Border Beam Demo

1import { Play, SkipBack, SkipForward } from "lucide-react"
2 
3import { Button } from "@/components/ui/button"
4import {
5  Card,
6  CardContent,
7  CardDescription,
8  CardFooter,
9  CardHeader,
10  CardTitle,
11} from "@/components/ui/card"
12import { BorderBeam } from "@/registry/magicui/border-beam"
13 
14export default function MusicPlayer() {
15  return (
16    <Card className="relative w-[350px] overflow-hidden">
17      <CardHeader>
18        <CardTitle>Now Playing</CardTitle>
19        <CardDescription>Stairway to Heaven - Led Zeppelin</CardDescription>
20      </CardHeader>
21      <CardContent>
22        <div className="flex flex-col items-center gap-4">
23          <div className="h-48 w-48 rounded-lg bg-linear-to-br from-purple-500 to-pink-500" />
24          <div className="bg-secondary h-1 w-full rounded-full">
25            <div className="bg-primary h-full w-1/3 rounded-full" />
26          </div>
27          <div className="text-muted-foreground flex w-full justify-between text-sm">
28            <span>2:45</span>
29            <span>8:02</span>
30          </div>
31        </div>
32      </CardContent>
33      <CardFooter className="flex justify-center gap-4">
34        <Button variant="outline" size="icon" className="rounded-full">
35          <SkipBack className="size-4" />
36        </Button>
37        <Button size="icon" className="rounded-full">
38          <Play className="size-4" />
39        </Button>
40        <Button variant="outline" size="icon" className="rounded-full">
41          <SkipForward className="size-4" />
42        </Button>
43      </CardFooter>
44      <BorderBeam
45        duration={6}
46        size={400}
47        className="from-transparent via-red-500 to-transparent"
48      />
49      <BorderBeam
50        duration={6}
51        delay={3}
52        size={400}
53        borderWidth={2}
54        className="from-transparent via-blue-500 to-transparent"
55      />
56    </Card>
57  )
58}