m4x809/list-of-lp
1
0
Fork 0
mirror of https://github.com/M4X809/list-of-lp.git synced 2025-12-25 19:12:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance TrackCard and TrackModal components with new features

Browse source 
- Replaced `studioUrl` with `__SPOTIFY_URL__` in TrackCard for better track linking.
- Added a Tooltip to the LP Live badge in TrackCard to display disclaimers.
- Updated TrackModal to show the LP Live disclaimer below the location text.
- Modified Track data structure in list.ts to include new live performance details and disclaimers.
This commit is contained in:
m4x809 2025-10-25 11:15:01 +02:00
parent e5b6d7729d
commit dd9460ca0f
Signed by: m4x809
SSH key fingerprint: SHA256:YCoFF78p2DUP94EnCScqLwldjkKDwdKSZq3r8p/6EiU
4 changed files with 71 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/Components/TrackCard.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { Card, Group, Text, Badge, Box } from "@mantine/core"; import { Card, Group, Text, Badge, Box, Tooltip } from "@mantine/core";
import { useState } from "react"; import { useState } from "react";
import type { AlbumTheme } from "@/lib/themes"; import type { AlbumTheme } from "@/lib/themes";
import type { Track } from "@/lib/ListTypes"; import type { Track } from "@/lib/ListTypes";
@ -54,7 +54,7 @@ export default function TrackCard({ track, index, theme }: TrackCardProps) {
<Group gap="md"> <Group gap="md">
<Group gap="xs"> <Group gap="xs">
{track.studioUrl && ( {track.__SPOTIFY_URL__ && (
<Badge <Badge
size="sm" size="sm"
variant="filled" variant="filled"
@ -79,6 +79,7 @@ export default function TrackCard({ track, index, theme }: TrackCardProps) {
</Badge> </Badge>
)} )}
{track.lpLive && ( {track.lpLive && (
<Tooltip label={track.lpLive.disclaimer} hidden={!track.lpLive.disclaimer}>
<Badge <Badge
size="sm" size="sm"
variant="filled" variant="filled"
@ -87,8 +88,9 @@ export default function TrackCard({ track, index, theme }: TrackCardProps) {
color: theme.text.contrast, color: theme.text.contrast,
}} }}
> >
LP Live LP Live{track.lpLive.disclaimer ? "*" : ""}
</Badge> </Badge>
</Tooltip>
)} )}
{track.lpTV && ( {track.lpTV && (
<Badge <Badge

3
src/Components/TrackModal.tsx
View file

@ -177,6 +177,9 @@ export default function TrackModal({ opened, onClose, track, theme }: TrackModal
})} })}
</Text> </Text>
<Text>{track.lpLive.location}</Text> <Text>{track.lpLive.location}</Text>
<Text size="sm" c={theme.accent.DEFAULT}>
{track.lpLive.disclaimer}
</Text>
</Box> </Box>
<ActionIcon <ActionIcon
tabIndex={-1} tabIndex={-1}

3
src/lib/ListTypes.ts
View file

@ -2,7 +2,7 @@ export type Track = {
id: string; id: string;
label: string; label: string;
duration: string; duration: string;
studioUrl: string | null;
emilyLive: emilyLive:
| null | null
| { | {
@ -15,6 +15,7 @@ export type Track = {
url: string; url: string;
date: string; date: string;
location: string; location: string;
disclaimer?: string;
}; };
lpTV?: null | { lpTV?: null | {

96
src/lib/list.ts
View file

@ -14,7 +14,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_1", id: "minutes-to-midnight_1",
label: "Wake", label: "Wake",
duration: "01:40", duration: "01:40",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -24,7 +23,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_2", id: "minutes-to-midnight_2",
label: "Given Up", label: "Given Up",
duration: "03:09", duration: "03:09",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -34,7 +32,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_3", id: "minutes-to-midnight_3",
label: "Leave Out All the Rest", label: "Leave Out All the Rest",
duration: "03:29", duration: "03:29",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -44,7 +41,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_4", id: "minutes-to-midnight_4",
label: "Bleed It Out", label: "Bleed It Out",
duration: "02:44", duration: "02:44",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -54,7 +50,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_5", id: "minutes-to-midnight_5",
label: "Shadow of the Day", label: "Shadow of the Day",
duration: "04:49", duration: "04:49",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -64,7 +59,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_6", id: "minutes-to-midnight_6",
label: "What I've Done", label: "What I've Done",
duration: "03:25", duration: "03:25",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -74,7 +68,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_7", id: "minutes-to-midnight_7",
label: "Hands Held High", label: "Hands Held High",
duration: "03:53", duration: "03:53",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -84,7 +77,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_8", id: "minutes-to-midnight_8",
label: "No More Sorrow", label: "No More Sorrow",
duration: "03:41", duration: "03:41",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -94,7 +86,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_9", id: "minutes-to-midnight_9",
label: "Valentine's Day", label: "Valentine's Day",
duration: "03:16", duration: "03:16",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -104,7 +95,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_10", id: "minutes-to-midnight_10",
label: "In Between", label: "In Between",
duration: "03:16", duration: "03:16",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -114,7 +104,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_11", id: "minutes-to-midnight_11",
label: "In Pieces", label: "In Pieces",
duration: "03:38", duration: "03:38",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -124,7 +113,6 @@ export const albums: Album[] = [
id: "minutes-to-midnight_12", id: "minutes-to-midnight_12",
label: "The Little Things Give You Away", label: "The Little Things Give You Away",
duration: "06:23", duration: "06:23",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -145,7 +133,6 @@ export const albums: Album[] = [
id: "meteora_1", id: "meteora_1",
label: "Foreword", label: "Foreword",
duration: "00:13", duration: "00:13",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -155,7 +142,6 @@ export const albums: Album[] = [
id: "meteora_2", id: "meteora_2",
label: "Don't Stay", label: "Don't Stay",
duration: "03:07", duration: "03:07",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -165,7 +151,6 @@ export const albums: Album[] = [
id: "meteora_3", id: "meteora_3",
label: "Somewhere I Belong", label: "Somewhere I Belong",
duration: "03:33", duration: "03:33",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -175,7 +160,6 @@ export const albums: Album[] = [
id: "meteora_4", id: "meteora_4",
label: "Lying from You", label: "Lying from You",
duration: "02:55", duration: "02:55",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -185,7 +169,6 @@ export const albums: Album[] = [
id: "meteora_5", id: "meteora_5",
label: "Hit the Floor", label: "Hit the Floor",
duration: "02:44", duration: "02:44",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -195,7 +178,6 @@ export const albums: Album[] = [
id: "meteora_6", id: "meteora_6",
label: "Easier to Run", label: "Easier to Run",
duration: "03:24", duration: "03:24",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -205,7 +187,6 @@ export const albums: Album[] = [
id: "meteora_7", id: "meteora_7",
label: "Faint", label: "Faint",
duration: "02:42", duration: "02:42",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -215,7 +196,6 @@ export const albums: Album[] = [
id: "meteora_8", id: "meteora_8",
label: "Figure.09", label: "Figure.09",
duration: "03:17", duration: "03:17",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -225,7 +205,6 @@ export const albums: Album[] = [
id: "meteora_9", id: "meteora_9",
label: "Breaking the Habit", label: "Breaking the Habit",
duration: "03:16", duration: "03:16",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -235,7 +214,6 @@ export const albums: Album[] = [
id: "meteora_10", id: "meteora_10",
label: "From the Inside", label: "From the Inside",
duration: "02:55", duration: "02:55",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -245,7 +223,6 @@ export const albums: Album[] = [
id: "meteora_11", id: "meteora_11",
label: "Nobody's Listening", label: "Nobody's Listening",
duration: "02:58", duration: "02:58",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -255,7 +232,6 @@ export const albums: Album[] = [
id: "meteora_12", id: "meteora_12",
label: "Session", label: "Session",
duration: "02:24", duration: "02:24",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -265,7 +241,6 @@ export const albums: Album[] = [
id: "meteora_13", id: "meteora_13",
label: "Numb", label: "Numb",
duration: "03:05", duration: "03:05",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -273,7 +248,6 @@ export const albums: Album[] = [
}, },
], ],
}, },
{ {
id: "hybrid-theory", id: "hybrid-theory",
label: "Hybrid Theory", label: "Hybrid Theory",
@ -287,7 +261,6 @@ export const albums: Album[] = [
id: "hybrid-theory_1", id: "hybrid-theory_1",
label: "Papercut", label: "Papercut",
duration: "03:04", duration: "03:04",
studioUrl: null,
emilyLive: [ emilyLive: [
{ {
url: "https://youtu.be/miQ9Y5UW08g", url: "https://youtu.be/miQ9Y5UW08g",
@ -308,8 +281,14 @@ export const albums: Album[] = [
id: "hybrid-theory_2", id: "hybrid-theory_2",
label: "One Step Closer", label: "One Step Closer",
duration: "02:35", duration: "02:35",
studioUrl: null, emilyLive: [
emilyLive: null, {
url: "https://www.youtube.com/watch?v=jHBeUlGTfI8",
date: "2025-04-26",
location: "Austin, Texas, USA",
author: "Erynn Halvorson",
},
],
lpLive: null, lpLive: null,
__SPOTIFY_URL__: "https://open.spotify.com/track/4bYLTrlcqctyHck3fjhMgW?si=dd2c47138fed4c4c", __SPOTIFY_URL__: "https://open.spotify.com/track/4bYLTrlcqctyHck3fjhMgW?si=dd2c47138fed4c4c",
@ -318,7 +297,6 @@ export const albums: Album[] = [
id: "hybrid-theory_3", id: "hybrid-theory_3",
label: "With You", label: "With You",
duration: "03:23", duration: "03:23",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -328,8 +306,20 @@ export const albums: Album[] = [
id: "hybrid-theory_4", id: "hybrid-theory_4",
label: "Points of Authority", label: "Points of Authority",
duration: "03:20", duration: "03:20",
studioUrl: null, emilyLive: [
emilyLive: null, {
url: "https://www.youtube.com/watch?v=tlRFjZ1YBCc",
date: "2024-11-08",
location: "Dallas, Texas, USA",
author: "Erynn Halvorson",
},
{
url: "https://www.youtube.com/watch?v=AaFmfk_GIKA",
date: "2025-02-12",
location: "Tokyo, Japan",
author: "Erynn Halvorson",
},
],
lpLive: null, lpLive: null,
__SPOTIFY_URL__: "https://open.spotify.com/track/214LJVTqrkUOGemWDGHJpr?si=749f11d7cd9a4f56", __SPOTIFY_URL__: "https://open.spotify.com/track/214LJVTqrkUOGemWDGHJpr?si=749f11d7cd9a4f56",
@ -338,9 +328,20 @@ export const albums: Album[] = [
id: "hybrid-theory_5", id: "hybrid-theory_5",
label: "Crawling", label: "Crawling",
duration: "03:29", duration: "03:29",
studioUrl: null, emilyLive: [
emilyLive: null, {
lpLive: null, url: "https://www.youtube.com/watch?v=ISJRWMSRK5k",
date: "2025-06-28",
location: "London, United Kingdom",
author: "Erynn Halvorson",
},
],
lpLive: {
url: "https://www.youtube.com/watch?v=cdaaLiAsQsA",
date: "2024-11-15",
location: "São Paulo, Brazil",
disclaimer: "Not the official live version, but from a recorded Livestream.",
},
__SPOTIFY_URL__: "https://open.spotify.com/track/0X576XiCW9uEtko6f6VkcU?si=0a47dc1d660b4c71", __SPOTIFY_URL__: "https://open.spotify.com/track/0X576XiCW9uEtko6f6VkcU?si=0a47dc1d660b4c71",
}, },
@ -348,7 +349,6 @@ export const albums: Album[] = [
id: "hybrid-theory_6", id: "hybrid-theory_6",
label: "Runaway", label: "Runaway",
duration: "03:03", duration: "03:03",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -358,7 +358,6 @@ export const albums: Album[] = [
id: "hybrid-theory_7", id: "hybrid-theory_7",
label: "By Myself", label: "By Myself",
duration: "03:09", duration: "03:09",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -368,8 +367,14 @@ export const albums: Album[] = [
id: "hybrid-theory_8", id: "hybrid-theory_8",
label: "In the End", label: "In the End",
duration: "03:36", duration: "03:36",
studioUrl: null, emilyLive: [
emilyLive: null, {
url: "https://www.youtube.com/watch?v=mst1Z4KNV20",
date: "2025-06-16",
location: "Hannover, Germany",
author: "Erynn Halvorson",
},
],
lpLive: null, lpLive: null,
__SPOTIFY_URL__: "https://open.spotify.com/track/7q115ia4fQn9zonjpexWsY?si=1e4cb0fe76244b11", __SPOTIFY_URL__: "https://open.spotify.com/track/7q115ia4fQn9zonjpexWsY?si=1e4cb0fe76244b11",
@ -378,8 +383,14 @@ export const albums: Album[] = [
id: "hybrid-theory_9", id: "hybrid-theory_9",
label: "A Place for My Head", label: "A Place for My Head",
duration: "03:04", duration: "03:04",
studioUrl: null, emilyLive: [
emilyLive: null, {
url: "https://www.youtube.com/watch?v=EFDKKyofzGg",
date: "2025-04-26",
location: "Austin, Texas, USA",
author: "Erynn Halvorson",
},
],
lpLive: null, lpLive: null,
__SPOTIFY_URL__: "https://open.spotify.com/track/1B8WdDScvobpFsZLfdmIE1?si=f1b5b6fe0abb4e23", __SPOTIFY_URL__: "https://open.spotify.com/track/1B8WdDScvobpFsZLfdmIE1?si=f1b5b6fe0abb4e23",
@ -388,7 +399,6 @@ export const albums: Album[] = [
id: "hybrid-theory_10", id: "hybrid-theory_10",
label: "Forgotten", label: "Forgotten",
duration: "03:04", duration: "03:04",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -398,7 +408,6 @@ export const albums: Album[] = [
id: "hybrid-theory_11", id: "hybrid-theory_11",
label: "Cure for the Itch", label: "Cure for the Itch",
duration: "02:37", duration: "02:37",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,
@ -408,7 +417,6 @@ export const albums: Album[] = [
id: "hybrid-theory_12", id: "hybrid-theory_12",
label: "Pushing Me Away", label: "Pushing Me Away",
duration: "03:11", duration: "03:11",
studioUrl: null,
emilyLive: null, emilyLive: null,
lpLive: null, lpLive: null,