Glassmorphism Listen App

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