Apple Glass Effect Demo

1"use client";
2import { useState } from "react";
3import { GlassContainer } from "../ui/apple-glass-effect";
4import {
5  Play,
6  Pause,
7  SkipBack,
8  SkipForward,
9  Volume2,
10  Heart,
11  Search,
12  Calendar,
13  Sun,
14  Wifi,
15  Battery,
16  Bluetooth,
17  AirVent,
18  Flashlight,
19  Calculator,
20  MessagesSquareIcon as Messages,
21  Bell,
22} from "lucide-react";
23import Image from "next/image";
24 
25export const GlassExamples = () => {
26  const [isPlaying, setIsPlaying] = useState(false);
27  const [searchQuery, setSearchQuery] = useState("");
28  const volume = 75;
29 
30  return (
31    <div className="min-h-screen py-8 px-2 2xl:p-8">
32      {/* Background */}
33      <div className="absolute inset-0">
34        <Image
35          src="/assets/images/apple-glass-effect/img.jpg"
36          alt="background image"
37          fill
38          priority
39          className="h-full w-full object-cover absolute inset-0"
40        />
41        <div className="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/30 to-pink-900/20" />
42      </div>
43 
44      <div className="max-w-7xl mx-auto relative z-10">
45        {/* Top Row - Control Center Style */}
46        <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 mb-8">
47          {/* Music Player Widget */}
48          <GlassContainer
49            blur={0}
50            highlightOpacity={0}
51            innerGlowOpacity={0}
52            specularIntensity={0.5}
53            className="lg:col-span-2 h-58 w-full px-6"
54          >
55            <div className="w-full">
56              <div className="flex items-center gap-4 mb-4">
57                <div className="w-16 h-16 bg-gradient-to-br from-pink-500 to-purple-600 rounded-xl flex items-center justify-center">
58                  <Image
59                    src="/assets/images/apple-glass-effect/cover.jpeg"
60                    alt="Music Cover"
61                    width={64}
62                    height={64}
63                    className="rounded-lg shadow-lg"
64                  />
65                </div>
66                <div className="flex-1">
67                  <h3 className="text-md sm:text-lg font-semibold text-white">
68                    Now Playing
69                  </h3>
70                  <p className="text-white/80 text-sm sm:text-base">
71                    Until I Found You
72                  </p>
73                  <p className="text-white/60 text-sm">Stephen Sanchez</p>
74                </div>
75// … truncated