Круглая полупрозрачная кнопка в духе Apple. По нажатию она на пружине разворачивается в широкую панель плеера: слева проявляются полоса прогресса и точки, справа выплывает из размытия значок воспроизведения.
Повторное нажатие сворачивает панель обратно в круг. Ширину в обоих состояниях, высоту и упругость пружины можно задать пропсами.
Скопируйте эти файлы в components/apple-play-button/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useState } from "react";
import { ApplePlayButton } from "@/components/apple-play-button/apple-play-button";
export default function Page() {
const [open, setOpen] = useState(false);
return (
<button type="button" onClick={() => setOpen((value) => !value)}>
<ApplePlayButton open={open} expandedWidth={330} />
</button>
);
}openРазвёрнута ли панель плеера
Тип boolean
collapsedWidth?Ширина свёрнутой кнопки в пикселях
Тип number·По умолчанию 60
expandedWidth?Ширина развёрнутой панели в пикселях
Тип number·По умолчанию 330
height?Высота кнопки в пикселях
Тип number·По умолчанию 60
bounce?Упругость пружины при раскрытии
Тип number·По умолчанию 0.16
className?Дополнительные классы кнопки
Тип string