diff --git a/src/Components/TrackCard.tsx b/src/Components/TrackCard.tsx index 29cf212..c30c35b 100644 --- a/src/Components/TrackCard.tsx +++ b/src/Components/TrackCard.tsx @@ -4,7 +4,7 @@ import { Card, Group, Text, Badge, Box } from "@mantine/core"; import { useState } from "react"; import type { AlbumTheme } from "@/lib/themes"; import type { Track } from "@/lib/ListTypes"; -import { useHash } from "@mantine/hooks"; +import TrackModal from "./TrackModal"; interface TrackCardProps { track: Track; @@ -14,100 +14,103 @@ interface TrackCardProps { export default function TrackCard({ track, index, theme }: TrackCardProps) { const [isHovered, setIsHovered] = useState(false); - const [_hash, setHash] = useHash(); + const [modalOpened, setModalOpened] = useState(false); return ( - setHash(`trackModal_${track.id}`)} - className="backdrop-blur-sm transition-all duration-300" - style={{ - background: isHovered ? theme.card.backgroundHover : theme.card.background, - border: `1px solid ${isHovered ? theme.border.light : theme.card.border}`, - cursor: "pointer", - // transform: isHovered ? "translateY(-2px)" : "translateY(0)", - boxShadow: isHovered ? `0 8px 24px ${theme.primary.DEFAULT}30` : "none", - }} - onMouseEnter={() => setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - > - - - - {index + 1} - - - {track.label} - - - - - - {track.studioUrl && ( - - Studio - - )} - {track.emilyLive && ( - - Emily Live - - )} - {track.lpLive && ( - - LP Live - - )} + <> + setModalOpened(true)} + className="backdrop-blur-sm transition-all duration-300" + style={{ + background: isHovered ? theme.card.backgroundHover : theme.card.background, + border: `1px solid ${isHovered ? theme.border.light : theme.card.border}`, + cursor: "pointer", + // transform: isHovered ? "translateY(-2px)" : "translateY(0)", + boxShadow: isHovered ? `0 8px 24px ${theme.primary.DEFAULT}30` : "none", + }} + onMouseEnter={() => setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + + + + {index + 1} + + + {track.label} + + + + + + {track.studioUrl && ( + + Studio + + )} + {track.emilyLive && ( + + Emily Live + + )} + {track.lpLive && ( + + LP Live + + )} + + + {track.duration} + - - {track.duration} - - - + + setModalOpened(false)} track={track} theme={theme} /> + ); } diff --git a/src/Components/TrackModal.tsx b/src/Components/TrackModal.tsx index e5b19ce..245cb41 100644 --- a/src/Components/TrackModal.tsx +++ b/src/Components/TrackModal.tsx @@ -1,72 +1,53 @@ "use client"; -import { albums } from "@/lib/list"; import { getSongLink } from "@/lib/songLinks"; -import { getThemeColors } from "@/lib/themes"; -import { faApple, faSpotify, faYoutube, faYoutubeSquare, IconDefinition } from "@fortawesome/free-brands-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import type { AlbumTheme } from "@/lib/themes"; +import type { Track } from "@/lib/ListTypes"; import { - ActionIcon, - Anchor, - Box, - Divider, - Grid, - GridCol, - Group, - Modal, - Stack, - Text, - Title, - Tooltip, -} from "@mantine/core"; -import { useDisclosure, useHash } from "@mantine/hooks"; + faApple, + faSpotify, + faYoutube, + faYoutubeSquare, + type IconDefinition, +} from "@fortawesome/free-brands-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ActionIcon, Box, Divider, Grid, GridCol, Group, Modal, Stack, Text, Title, Tooltip } from "@mantine/core"; import Link from "next/link"; -export default function TrackModal() { - const [hash, setHash] = useHash(); - console.log("🚀 ~ TrackModal.tsx:8 ~ TrackModal ~ hash:", hash); - const close = () => { - setHash(""); - }; +interface TrackModalProps { + opened: boolean; + onClose: () => void; + track: Track; + theme: AlbumTheme; +} - const album = albums.find((album) => { - return album.id === hash.split("_")[1]; - }); - const track = album?.tracks.find((track) => { - return track.id === `${hash.split("_")[1]}_${hash.split("_")[2]}`; - }); - - const songLink = getSongLink(track?.id || ""); - console.log("🚀 ~ TrackModal.tsx:25 ~ TrackModal ~ songLink:", songLink); - - const theme = getThemeColors(album?.id || ""); +export default function TrackModal({ opened, onClose, track, theme }: TrackModalProps) { + const songLink = getSongLink(track.id); return ( - {track?.label} - Studio Version} /> + {track.label} + + Studio Version + + } + /> 0 ? Object.keys(songLink).length : 4}> {songLink && Object.entries(songLink).map(([key, value]) => { @@ -113,11 +94,12 @@ export default function TrackModal() { return ( - {Array.isArray(track?.emilyLive) && ( + {Array.isArray(track.emilyLive) && ( <> - Fan Live Versions} /> + + Fan Live Versions + + } + /> - {track.emilyLive.map((live, idx) => ( + {track.emilyLive.map((live) => ( @@ -148,6 +138,7 @@ export default function TrackModal() { )} - {track?.lpLive && ( + {track.lpLive && ( <> - Linkin Park Live Versions} /> + + Linkin Park Live Versions + + } + /> - {new Date(track?.lpLive.date).toLocaleDateString("en-US", { + {new Date(track.lpLive.date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric", })} - {track?.lpLive.location} + {track.lpLive.location} diff --git a/src/app/album/[albumId]/page.tsx b/src/app/album/[albumId]/page.tsx index 38dec3f..116525f 100644 --- a/src/app/album/[albumId]/page.tsx +++ b/src/app/album/[albumId]/page.tsx @@ -4,7 +4,6 @@ import { albums } from "../../../lib/list"; import BackButton from "../../../Components/BackButton"; import { getThemeColors } from "@/lib/themes"; import TrackCard from "@/Components/TrackCard"; -import TrackModal from "@/Components/TrackModal"; export function generateStaticParams() { return albums.map((album) => ({ @@ -46,7 +45,6 @@ export default async function AlbumDetail({ params }: { params: Promise<{ albumI viewTransitionName: `album-card-background-${album.id}`, }} > - {/* Back Button */} @@ -57,7 +55,6 @@ export default async function AlbumDetail({ params }: { params: Promise<{ albumI style={{ border: `3px solid ${theme.border.light}`, borderRadius: "8px", - padding: "4px", background: theme.background.secondary, boxShadow: `0 8px 32px ${theme.primary.DEFAULT}40`, viewTransitionName: `album-card-image-${album.id}`, diff --git a/src/lib/list.ts b/src/lib/list.ts index ec728cb..779df4c 100644 --- a/src/lib/list.ts +++ b/src/lib/list.ts @@ -22,12 +22,6 @@ export const albums: Album[] = [ location: "Austin, Texas, USA", author: "Erynn Halvorson", }, - { - url: "https://youtu.be/miQ9Y5UW08dasdasdg", - date: "2025-04-26", - location: "Austin, Texas, USdasdsaA", - author: "Erynn Halvorson", - }, ], lpLive: { url: "https://www.youtube.com/watch?v=DOKcCl6iKaA",