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

working bg expansion

Browse source
This commit is contained in:
m4x809 2025-10-25 01:38:49 +02:00
parent 6ce4950d54
commit 6024cdc442
Signed by: m4x809
SSH key fingerprint: SHA256:YCoFF78p2DUP94EnCScqLwldjkKDwdKSZq3r8p/6EiU
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/Components/AlbumCard.tsx
View file

@ -4,9 +4,11 @@ import { getThemeColors } from "@/lib/themes";
import type { Album } from "../lib/ListTypes"; import type { Album } from "../lib/ListTypes";
import { Box, Card, Image, Text, Badge, Group } from "@mantine/core"; import { Box, Card, Image, Text, Badge, Group } from "@mantine/core";
import { Link } from "next-view-transitions"; import { Link } from "next-view-transitions";
import { useState } from "react";
export default function AlbumCard({ album }: { album: Album }) { export default function AlbumCard({ album }: { album: Album }) {
const { label, releaseDate, image, tracks } = album; const { label, releaseDate, image, tracks } = album;
const [isElevated, setIsElevated] = useState(false);
type Songs = { type Songs = {
count: number; count: number;
@ -29,16 +31,21 @@ export default function AlbumCard({ album }: { album: Album }) {
boxShadow: `0 4px 20px ${theme.primary.DEFAULT}20`, boxShadow: `0 4px 20px ${theme.primary.DEFAULT}20`,
overflow: "hidden", overflow: "hidden",
borderRadius: "8px", borderRadius: "8px",
zIndex: isElevated ? 50 : 1,
}} }}
className="group relative col-span-1 cursor-pointer rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl" className="group relative col-span-1 rounded-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl"
> >
<Card <Card
component={Link} component={Link}
href={`/album/${album.id}`} href={`/album/${album.id}`}
className="cursor-pointer"
style={{ style={{
background: theme.background.gradient, background: theme.background.gradient,
viewTransitionName: `album-card-background-${album.id}`, viewTransitionName: `album-card-background-${album.id}`,
}} }}
onMouseEnter={() => setIsElevated(true)}
onMouseLeave={() => setIsElevated(false)}
onClick={() => setIsElevated(true)}
> >
<Box <Box
className="relative overflow-hidden rounded-lg" className="relative overflow-hidden rounded-lg"