refactoring & fixing links

app/f7/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 // import F7ReleasesPage from '@/src/components/Pages/F7/F7ReleasePage'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 
 //
 import 'framework7/css/bundle'
@@ -29,11 +29,11 @@ const f7params = {
 }
 
 const F7HomePage = () => {
-	const [ready, setReady] = useState<any>(false)
+	// const [ready, setReady] = useState<any>(false)
 
 	useEffect(() => {
 		f7ready((f7) => {
-			setReady(true)
+			// setReady(true)
 
 			console.log('HOME f7 ready', f7)
 

src/components/CollectionItems/Albums/Album.tsx

@@ -11,6 +11,7 @@ import {
 	isMobile,
 } from 'react-device-detect'
 import { IoCheckmarkCircle } from 'react-icons/io5'
+import Link from '../../Components/Link'
 
 interface AlbumProps extends React.HTMLAttributes<HTMLDivElement>, Album {}
 
@@ -68,7 +69,7 @@ const AlbumComponent = ({
 			data-m={Number(isMobile)}
 			// key={identifier}
 		>
-			<a
+			<Link
 				className={styles.album}
 				target="_blank"
 				href={`https://music.apple.com/${process.env.STOREFRONT}/album/${storeId}`}
@@ -134,7 +135,7 @@ const AlbumComponent = ({
 					</div>
 					<div className={styles.artistName}>{artistName}</div>
 				</div>
-			</a>
+			</Link>
 		</div>
 	)
 }

src/components/CollectionItems/Songs/Songs/Song.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import styles from './Song.module.css'
 import ContentRating from '@/src/components/Elements/ContentRating/ContentRating'
 import { Artist, Song } from '@/types/Items'
+import Link from '@/src/components/Components/Link'
 
 interface SongProps extends React.HTMLAttributes<HTMLDivElement>, Song {
 	selected?: boolean
@@ -67,7 +68,7 @@ const SongComponent = ({
 					<div className={styles.artworkNameContainer}>
 						<div className="flex">
 							<a
-								className={styles.artworkContainer}
+								className={`external ${styles.artworkContainer}`}
 								target="_blank"
 								href={songLink}
 							>
@@ -108,13 +109,13 @@ const SongComponent = ({
 				</div>
 				<div className={styles.albumNameCell}>
 					<div className={styles.albumName}>
-						<a
+						<Link
 							// className={styles.artworkContainer}
 							target="_blank"
 							href={albumId ? albumLink : '#'}
 						>
 							{albumName}
-						</a>
+						</Link>
 					</div>
 				</div>
 				<div className={styles.durationCell}>

src/components/Components/Link.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+// export interface LinkProps extends React.HTMLAttributes<HTMLAnchorElement> {}
+export interface LinkProps
+	extends React.DetailedHTMLProps<
+		React.AnchorHTMLAttributes<HTMLAnchorElement>,
+		HTMLAnchorElement
+	> {}
+
+const Link = ({ className = '', ...props }: LinkProps) => {
+	return <a className={`external ${className}`} {...props} />
+}
+
+export default Link

src/components/Pages/User/ReleasesPage.tsx

@@ -22,7 +22,7 @@ export default function ReleasesPage({ ...props }: ReleasesPageProps) {
 
 	// Auth hook
 	const { user, isLoading, hasTestToken } = useAuth({
-		middleware: 'auth',
+		// middleware: 'auth',
 	}) // todo : redirect to previous page after login
 
 	// State