Glassmorphism Listen App

1"use client";
2 
3import { useState } from "react";
4 
5import { Badge } from "@/components/ui/badge";
6import { Button } from "@/components/ui/button";
7import { Card } from "@/components/ui/card";
8import {
9  Headphones,
10  Heart,
11  Pause,
12  Repeat,
13  Shuffle,
14  SkipBack,
15  SkipForward,
16  Volume2,
17} from "lucide-react";
18 
19const highlights = [
20  {
21    title: "Spatial audio",
22    description:
23      "Immerse yourself in cinematic soundscapes crafted for every mood.",
24  },
25];
26 
27const playlist = [
28  {
29    id: "5L2ELXkO17Iu9J8hwMktVJ",
30    title: "Helaf El Amar",
31    artist: "George Wassouf",
32    album: "El Hawa Sultan",
33    duration: "6:40",
34    currentTime: "01:12",
35    progress: 35,
36    spotifyUrl: "https://open.spotify.com/track/5L2ELXkO17Iu9J8hwMktVJ",
37    embedUrl:
38      "https://open.spotify.com/embed/track/5L2ELXkO17Iu9J8hwMktVJ?utm_source=generator",
39  },
40  {
41    id: "2Z8WuEywRWYTKe1NybPQEW",
42    title: "Levitating",
43    artist: "Dua Lipa",
44    album: "Future Nostalgia",
45    duration: "3:23",
46    currentTime: "00:48",
47    progress: 22,
48    spotifyUrl: "https://open.spotify.com/track/2Z8WuEywRWYTKe1NybPQEW",
49    embedUrl:
50      "https://open.spotify.com/embed/track/2Z8WuEywRWYTKe1NybPQEW?utm_source=generator",
51  },
52  {
53    id: "02MWAaffLxlfxAUY7c5dvx",
54    title: "Heat Waves",
55    artist: "Glass Animals",
56    album: "Dreamland",
57    duration: "3:58",
58    currentTime: "02:41",
59    progress: 68,
60    spotifyUrl: "https://open.spotify.com/track/02MWAaffLxlfxAUY7c5dvx",
61    embedUrl:
62      "https://open.spotify.com/embed/track/02MWAaffLxlfxAUY7c5dvx?utm_source=generator",
63  },
64  {
65    id: "4ZtFanR9U6ndgddUvNcjcG",
66    title: "good 4 u",
67    artist: "Olivia Rodrigo",
68    album: "SOUR",
69    duration: "2:58",
70    currentTime: "00:36",
71    progress: 20,
72    spotifyUrl: "https://open.spotify.com/track/4ZtFanR9U6ndgddUvNcjcG",
73    embedUrl:
74      "https://open.spotify.com/embed/track/4ZtFanR9U6ndgddUvNcjcG?utm_source=generator",
75  },
76];
77 
78export function GlassmorphismListenAppBlock() {
79  const [activeIndex, setActiveIndex] = useState(0);
80  const activeTrack = playlist[activeIndex];
81 
82  return (
83    <section className="relative overflow-hidden px-6 py-32">
84      <div className="absolute inset-0 -z-10">
85        <div className="absolute left-1/2 top-0 h-[520px] w-[520px] -translate-x-1/2 rounded-full bg-foreground/[0.03] blur-3xl" />
86        <div className="absolute bottom-0 right-0 h-[420px] w-[420px] rounded-full bg-foreground/[0.02] blur-3xl" />
87      </div>
88 
89// … truncated