710 lines
21 KiB
TypeScript
710 lines
21 KiB
TypeScript
// app/components/ui/macbook-scroll.tsx
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { MotionValue, motion, useScroll, useTransform } from "motion/react";
|
|
import { cn } from "~/lib/utils";
|
|
import {
|
|
Monitor,
|
|
MonitorSpeaker,
|
|
Sun,
|
|
Moon,
|
|
Search,
|
|
Mic,
|
|
SkipBack,
|
|
Play,
|
|
SkipForward,
|
|
Volume,
|
|
Volume1,
|
|
Volume2,
|
|
VolumeX,
|
|
Globe,
|
|
Command,
|
|
ChevronUp,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronDown,
|
|
Grid3x3
|
|
} from "lucide-react";
|
|
|
|
interface MacbookScrollProps {
|
|
src?: string;
|
|
showGradient?: boolean;
|
|
title?: string | React.ReactNode;
|
|
badge?: React.ReactNode;
|
|
className?: string;
|
|
// Target landing - best practice approach
|
|
landingTargetId?: string;
|
|
landingOffset?: number;
|
|
}
|
|
|
|
export const MacbookScroll = ({
|
|
src,
|
|
showGradient = true,
|
|
title,
|
|
badge,
|
|
className,
|
|
landingTargetId,
|
|
landingOffset = 0
|
|
}: MacbookScrollProps) => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [landingDistance, setLandingDistance] = useState(800);
|
|
|
|
const { scrollYProgress } = useScroll({
|
|
target: ref,
|
|
offset: ["start start", "end start"],
|
|
});
|
|
|
|
// Responsive landing calculation - best practice
|
|
useEffect(() => {
|
|
const calculateLanding = () => {
|
|
if (!landingTargetId) return;
|
|
|
|
const target = document.getElementById(landingTargetId);
|
|
const container = ref.current;
|
|
|
|
if (target && container) {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const targetRect = target.getBoundingClientRect();
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
|
|
// Calculate absolute positions
|
|
const containerTop = containerRect.top + scrollTop;
|
|
const targetTop = targetRect.top + scrollTop;
|
|
|
|
// Distance from container to target
|
|
const distance = targetTop - containerTop + landingOffset;
|
|
|
|
// Mobile responsive adjustment - more aggressive
|
|
const isMobile = window.innerWidth < 1024; // Changed from 768 to 1024
|
|
const finalDistance = isMobile ? distance * 2.5 : distance; // More reduction for mobile
|
|
|
|
setLandingDistance(Math.max(finalDistance, 200));
|
|
}
|
|
};
|
|
|
|
calculateLanding();
|
|
const handleResize = () => calculateLanding();
|
|
const handleLoad = () => calculateLanding();
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
window.addEventListener('load', handleLoad);
|
|
|
|
return () => {
|
|
window.removeEventListener('resize', handleResize);
|
|
window.removeEventListener('load', handleLoad);
|
|
};
|
|
}, [landingTargetId, landingOffset]);
|
|
|
|
// Simple transforms
|
|
const scaleX = useTransform(scrollYProgress, [0, 0.3], [1.2, 1.5]);
|
|
const scaleY = useTransform(scrollYProgress, [0, 0.3], [0.6, 1.5]);
|
|
const translate = useTransform(scrollYProgress, [0, 1], [0, landingDistance]);
|
|
const rotate = useTransform(scrollYProgress, [0.1, 0.12, 0.3], [-28, -28, 0]);
|
|
const textTransform = useTransform(scrollYProgress, [0, 0.3], [0, 100]);
|
|
const textOpacity = useTransform(scrollYProgress, [0, 0.2], [1, 0]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
data-macbook-container
|
|
className={cn(
|
|
// Mobile-first: Height dan scale yang balance
|
|
"flex shrink-0 transform flex-col items-center justify-start [perspective:800px]",
|
|
// Height: JAUH lebih pendek di mobile
|
|
"min-h-[80vh] lg:min-h-[200vh]",
|
|
// Scale: Balance - tidak terlalu kecil, tidak terlalu besar
|
|
"scale-50 md:scale-75 lg:scale-100",
|
|
// Padding: MINIMAL untuk mobile
|
|
"py-4 lg:py-20",
|
|
className
|
|
)}
|
|
>
|
|
{/* Menggunakan CSS variables untuk responsive - best practice Remix */}
|
|
<style>{`
|
|
@media (max-width: 1023px) {
|
|
[data-macbook-container] {
|
|
min-height: 70vh !important;
|
|
max-height: 70vh !important;
|
|
padding-top: 0.5rem !important;
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
* {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
`}</style>
|
|
|
|
<motion.h2
|
|
style={{
|
|
translateY: textTransform,
|
|
opacity: textOpacity,
|
|
}}
|
|
className="mb-2 lg:mb-16 text-center text-sm md:text-lg lg:text-3xl font-bold text-neutral-800 dark:text-white px-4"
|
|
>
|
|
{title || (
|
|
<span>
|
|
This Macbook is built with Tailwindcss. <br /> No kidding.
|
|
</span>
|
|
)}
|
|
</motion.h2>
|
|
|
|
{/* Lid */}
|
|
<Lid
|
|
src={src}
|
|
scaleX={scaleX}
|
|
scaleY={scaleY}
|
|
rotate={rotate}
|
|
translate={translate}
|
|
/>
|
|
|
|
{/* Base - responsive sizing */}
|
|
<div className="relative -z-10 h-[16rem] w-[24rem] md:h-[20rem] md:w-[28rem] lg:h-[22rem] lg:w-[32rem] overflow-hidden rounded-2xl bg-gray-200 dark:bg-[#272729]">
|
|
{/* Keyboard bar */}
|
|
<div className="relative h-6 md:h-8 lg:h-10 w-full">
|
|
<div className="absolute inset-x-0 mx-auto h-2 md:h-3 lg:h-4 w-[80%] bg-[#050505]" />
|
|
</div>
|
|
|
|
<div className="relative flex">
|
|
<div className="mx-auto h-full w-[10%] overflow-hidden">
|
|
<SpeakerGrid />
|
|
</div>
|
|
<div className="mx-auto h-full w-[80%]">
|
|
<Keypad />
|
|
</div>
|
|
<div className="mx-auto h-full w-[10%] overflow-hidden">
|
|
<SpeakerGrid />
|
|
</div>
|
|
</div>
|
|
|
|
<Trackpad />
|
|
|
|
<div className="absolute inset-x-0 bottom-0 mx-auto h-1.5 md:h-2 w-12 md:w-16 lg:w-20 rounded-tl-3xl rounded-tr-3xl bg-gradient-to-t from-[#272729] to-[#050505]" />
|
|
|
|
{showGradient && (
|
|
<div className="absolute inset-x-0 bottom-0 z-50 h-24 md:h-32 lg:h-40 w-full bg-gradient-to-t from-white via-white to-transparent dark:from-black dark:via-black"></div>
|
|
)}
|
|
|
|
{badge && <div className="absolute bottom-2 md:bottom-3 lg:bottom-4 left-2 md:left-3 lg:left-4">{badge}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Lid = ({
|
|
scaleX,
|
|
scaleY,
|
|
rotate,
|
|
translate,
|
|
src,
|
|
}: {
|
|
scaleX: MotionValue<number>;
|
|
scaleY: MotionValue<number>;
|
|
rotate: MotionValue<number>;
|
|
translate: MotionValue<number>;
|
|
src?: string;
|
|
}) => {
|
|
return (
|
|
<div className="relative [perspective:800px]">
|
|
<div
|
|
style={{
|
|
transform: "perspective(800px) rotateX(-25deg) translateZ(0px)",
|
|
transformOrigin: "bottom",
|
|
transformStyle: "preserve-3d",
|
|
}}
|
|
className="relative h-[8rem] w-[24rem] md:h-[10rem] md:w-[28rem] lg:h-[12rem] lg:w-[32rem] rounded-2xl bg-[#010101] p-2"
|
|
>
|
|
<div
|
|
style={{
|
|
boxShadow: "0px 2px 0px 2px #171717 inset",
|
|
}}
|
|
className="absolute inset-0 flex items-center justify-center rounded-lg bg-[#010101]"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.div
|
|
style={{
|
|
scaleX: scaleX,
|
|
scaleY: scaleY,
|
|
rotateX: rotate,
|
|
translateY: translate,
|
|
transformStyle: "preserve-3d",
|
|
transformOrigin: "top",
|
|
zIndex: 50, // Ensure it stays on top
|
|
}}
|
|
className="absolute inset-0 h-64 md:h-72 lg:h-96 w-[24rem] md:w-[28rem] lg:w-[32rem] rounded-2xl bg-[#010101] p-2 z-50"
|
|
>
|
|
<div className="absolute inset-0 rounded-lg bg-[#272729]" />
|
|
{src && (
|
|
<img
|
|
src={src}
|
|
alt="screen content"
|
|
className="absolute inset-0 h-full w-full rounded-lg object-cover object-left-top"
|
|
loading="lazy"
|
|
/>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Trackpad = () => {
|
|
return (
|
|
<div
|
|
className="mx-auto my-1 h-32 w-[40%] rounded-xl"
|
|
style={{
|
|
boxShadow: "0px 0px 1px 1px #00000020 inset",
|
|
}}
|
|
></div>
|
|
);
|
|
};
|
|
|
|
export const Keypad = () => {
|
|
return (
|
|
<div className="mx-1 h-full [transform:translateZ(0)] rounded-md bg-[#050505] p-1 [will-change:transform]">
|
|
{/* First Row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn
|
|
className="w-10 items-end justify-start pb-[2px] pl-[4px]"
|
|
childrenClassName="items-start"
|
|
>
|
|
esc
|
|
</KBtn>
|
|
<KBtn>
|
|
<Monitor className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F1</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Sun className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F2</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Grid3x3 className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F3</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Search className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F4</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Mic className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F5</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Moon className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F6</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<SkipBack className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F7</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Play className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F8</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<SkipForward className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F9</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<VolumeX className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F10</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Volume1 className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F11</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<Volume2 className="h-[6px] w-[6px]" />
|
|
<span className="mt-1 inline-block">F12</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<div className="h-4 w-4 rounded-full bg-gradient-to-b from-neutral-900 from-20% via-black via-50% to-neutral-900 to-95% p-px">
|
|
<div className="h-full w-full rounded-full bg-black" />
|
|
</div>
|
|
</KBtn>
|
|
</div>
|
|
|
|
{/* Second row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn>
|
|
<span className="block">~</span>
|
|
<span className="mt-1 block">`</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">!</span>
|
|
<span className="block">1</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">@</span>
|
|
<span className="block">2</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">#</span>
|
|
<span className="block">3</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">$</span>
|
|
<span className="block">4</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">%</span>
|
|
<span className="block">5</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">^</span>
|
|
<span className="block">6</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">&</span>
|
|
<span className="block">7</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">*</span>
|
|
<span className="block">8</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">(</span>
|
|
<span className="block">9</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">)</span>
|
|
<span className="block">0</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">_</span>
|
|
<span className="block">-</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">+</span>
|
|
<span className="block">=</span>
|
|
</KBtn>
|
|
<KBtn
|
|
className="w-10 items-end justify-end pr-[4px] pb-[2px]"
|
|
childrenClassName="items-end"
|
|
>
|
|
delete
|
|
</KBtn>
|
|
</div>
|
|
|
|
{/* Third row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn
|
|
className="w-10 items-end justify-start pb-[2px] pl-[4px]"
|
|
childrenClassName="items-start"
|
|
>
|
|
tab
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">Q</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">W</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">E</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">R</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">T</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">Y</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">U</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">I</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">O</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">P</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`{`}</span>
|
|
<span className="block">{`[`}</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`}`}</span>
|
|
<span className="block">{`]`}</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`|`}</span>
|
|
<span className="block">{`\\`}</span>
|
|
</KBtn>
|
|
</div>
|
|
|
|
{/* Fourth Row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn
|
|
className="w-[2.8rem] items-end justify-start pb-[2px] pl-[4px]"
|
|
childrenClassName="items-start"
|
|
>
|
|
caps lock
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">A</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">S</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">D</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">F</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">G</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">H</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">J</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">K</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">L</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`:`}</span>
|
|
<span className="block">{`;`}</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`"`}</span>
|
|
<span className="block">{`'`}</span>
|
|
</KBtn>
|
|
<KBtn
|
|
className="w-[2.85rem] items-end justify-end pr-[4px] pb-[2px]"
|
|
childrenClassName="items-end"
|
|
>
|
|
return
|
|
</KBtn>
|
|
</div>
|
|
|
|
{/* Fifth Row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn
|
|
className="w-[3.65rem] items-end justify-start pb-[2px] pl-[4px]"
|
|
childrenClassName="items-start"
|
|
>
|
|
shift
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">Z</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">X</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">C</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">V</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">B</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">N</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">M</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`<`}</span>
|
|
<span className="block">{`,`}</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`>`}</span>
|
|
<span className="block">{`.`}</span>
|
|
</KBtn>
|
|
<KBtn>
|
|
<span className="block">{`?`}</span>
|
|
<span className="block">{`/`}</span>
|
|
</KBtn>
|
|
<KBtn
|
|
className="w-[3.65rem] items-end justify-end pr-[4px] pb-[2px]"
|
|
childrenClassName="items-end"
|
|
>
|
|
shift
|
|
</KBtn>
|
|
</div>
|
|
|
|
{/* Sixth Row */}
|
|
<div className="mb-[2px] flex w-full shrink-0 gap-[2px]">
|
|
<KBtn className="" childrenClassName="h-full justify-between py-[4px]">
|
|
<div className="flex w-full justify-end pr-1">
|
|
<span className="block">fn</span>
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<Globe className="h-[6px] w-[6px]" />
|
|
</div>
|
|
</KBtn>
|
|
<KBtn className="" childrenClassName="h-full justify-between py-[4px]">
|
|
<div className="flex w-full justify-end pr-1">
|
|
<ChevronUp className="h-[6px] w-[6px]" />
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<span className="block">control</span>
|
|
</div>
|
|
</KBtn>
|
|
<KBtn className="" childrenClassName="h-full justify-between py-[4px]">
|
|
<div className="flex w-full justify-end pr-1">
|
|
<OptionKey className="h-[6px] w-[6px]" />
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<span className="block">option</span>
|
|
</div>
|
|
</KBtn>
|
|
<KBtn
|
|
className="w-8"
|
|
childrenClassName="h-full justify-between py-[4px]"
|
|
>
|
|
<div className="flex w-full justify-end pr-1">
|
|
<Command className="h-[6px] w-[6px]" />
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<span className="block">command</span>
|
|
</div>
|
|
</KBtn>
|
|
<KBtn className="w-[8.2rem]"></KBtn>
|
|
<KBtn
|
|
className="w-8"
|
|
childrenClassName="h-full justify-between py-[4px]"
|
|
>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<Command className="h-[6px] w-[6px]" />
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<span className="block">command</span>
|
|
</div>
|
|
</KBtn>
|
|
<KBtn className="" childrenClassName="h-full justify-between py-[4px]">
|
|
<div className="flex w-full justify-start pl-1">
|
|
<OptionKey className="h-[6px] w-[6px]" />
|
|
</div>
|
|
<div className="flex w-full justify-start pl-1">
|
|
<span className="block">option</span>
|
|
</div>
|
|
</KBtn>
|
|
<div className="mt-[2px] flex h-6 w-[4.9rem] flex-col items-center justify-end rounded-[4px] p-[0.5px]">
|
|
<KBtn className="h-3 w-6">
|
|
<ChevronUp className="h-[6px] w-[6px]" />
|
|
</KBtn>
|
|
<div className="flex">
|
|
<KBtn className="h-3 w-6">
|
|
<ChevronLeft className="h-[6px] w-[6px]" />
|
|
</KBtn>
|
|
<KBtn className="h-3 w-6">
|
|
<ChevronDown className="h-[6px] w-[6px]" />
|
|
</KBtn>
|
|
<KBtn className="h-3 w-6">
|
|
<ChevronRight className="h-[6px] w-[6px]" />
|
|
</KBtn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const KBtn = ({
|
|
className,
|
|
children,
|
|
childrenClassName,
|
|
backlit = true,
|
|
}: {
|
|
className?: string;
|
|
children?: React.ReactNode;
|
|
childrenClassName?: string;
|
|
backlit?: boolean;
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"[transform:translateZ(0)] rounded-[4px] p-[0.5px] [will-change:transform]",
|
|
backlit && "bg-white/[0.2] shadow-xl shadow-white",
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex h-6 w-6 items-center justify-center rounded-[3.5px] bg-[#0A090D]",
|
|
className,
|
|
)}
|
|
style={{
|
|
boxShadow:
|
|
"0px -0.5px 2px 0 #0D0D0F inset, -0.5px 0px 2px 0 #0D0D0F inset",
|
|
}}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"flex w-full flex-col items-center justify-center text-[5px] text-neutral-200",
|
|
childrenClassName,
|
|
backlit && "text-white",
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const SpeakerGrid = () => {
|
|
return (
|
|
<div
|
|
className="mt-2 flex h-40 gap-[2px] px-[0.5px]"
|
|
style={{
|
|
backgroundImage:
|
|
"radial-gradient(circle, #08080A 0.5px, transparent 0.5px)",
|
|
backgroundSize: "3px 3px",
|
|
}}
|
|
></div>
|
|
);
|
|
};
|
|
|
|
export const OptionKey = ({ className }: { className: string }) => {
|
|
return (
|
|
<svg
|
|
fill="none"
|
|
version="1.1"
|
|
id="icon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 32 32"
|
|
className={className}
|
|
>
|
|
<rect
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
x="18"
|
|
y="5"
|
|
width="10"
|
|
height="2"
|
|
/>
|
|
<polygon
|
|
stroke="currentColor"
|
|
strokeWidth={2}
|
|
points="10.6,5 4,5 4,7 9.4,7 18.4,27 28,27 28,25 19.6,25 "
|
|
/>
|
|
<rect
|
|
id="_Transparent_Rectangle_"
|
|
className="st0"
|
|
width="32"
|
|
height="32"
|
|
stroke="none"
|
|
/>
|
|
</svg>
|
|
);
|
|
}; |