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

Refactor AlbumCard and AlbumDetail components to enhance view transitions

Browse source 
- Wrapped album title and release date in span elements to apply view transition names, improving animation consistency.
- Updated styling for album title and release date to maintain visual integrity with dynamic theming.
This commit is contained in:
m4x809 2025-10-25 01:41:23 +02:00
parent 6024cdc442
commit 64cf136850
Signed by: m4x809
SSH key fingerprint: SHA256:YCoFF78p2DUP94EnCScqLwldjkKDwdKSZq3r8p/6EiU
2 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/Components/AlbumCard.tsx
View file

@ -72,26 +72,26 @@ export default function AlbumCard({ album }: { album: Album }) {
fw={700} fw={700}
className="transition-colors" className="transition-colors"
style={{ style={{
viewTransitionName: `album-card-title-${album.id}`,
color: theme.text.primary, color: theme.text.primary,
}} }}
> >
{label} <span style={{ viewTransitionName: `album-card-title-${album.id}` }}>{label}</span>
</Text> </Text>
<Text <Text
size="sm" size="sm"
style={{ style={{
viewTransitionName: `album-card-release-date-${album.id}`,
color: theme.text.secondary, color: theme.text.secondary,
}} }}
> >
<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span> <span style={{ viewTransitionName: `album-card-release-date-${album.id}` }}>
{new Date(releaseDate).toLocaleDateString("en-US", { <span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
year: "numeric", {new Date(releaseDate).toLocaleDateString("en-US", {
month: "long", year: "numeric",
day: "numeric", month: "long",
})} day: "numeric",
})}
</span>
</Text> </Text>
<Group gap="xs"> <Group gap="xs">

18
src/app/album/[albumId]/page.tsx
View file

@ -79,27 +79,27 @@ export default async function AlbumDetail({ params }: { params: Promise<{ albumI
order={1} order={1}
className="mb-3 text-6xl font-bold" className="mb-3 text-6xl font-bold"
style={{ style={{
viewTransitionName: `album-card-title-${album.id}`,
color: theme.text.primary, color: theme.text.primary,
textShadow: `0 0 20px ${theme.primary.DEFAULT}80`, textShadow: `0 0 20px ${theme.primary.DEFAULT}80`,
}} }}
> >
{album.label} <span style={{ viewTransitionName: `album-card-title-${album.id}` }}>{album.label}</span>
</Title> </Title>
<Text <Text
size="xl" size="xl"
className="mb-4" className="mb-4"
style={{ style={{
viewTransitionName: `album-card-release-date-${album.id}`,
color: theme.text.secondary, color: theme.text.secondary,
}} }}
> >
<span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span> <span style={{ viewTransitionName: `album-card-release-date-${album.id}` }}>
{new Date(album.releaseDate).toLocaleDateString("en-US", { <span style={{ color: theme.accent.DEFAULT, fontWeight: 600 }}>Released: </span>
year: "numeric", {new Date(album.releaseDate).toLocaleDateString("en-US", {
month: "long", year: "numeric",
day: "numeric", month: "long",
})} day: "numeric",
})}
</span>
</Text> </Text>
<Text size="md" style={{ color: theme.text.muted, lineHeight: 1.6 }}> <Text size="md" style={{ color: theme.text.muted, lineHeight: 1.6 }}>
{album.description} {album.description}