Components
Loading preview...
here is interactive vertical accordion
npx shadcn@latest add https://21st.dev/r/TomIsLoading/vertical-accordion"use client"; // This demo also needs to be a client component
import { useState, useEffect } from "react";
import { VerticalAccordion } from "@/components/ui/vertical-accordion"; // Убедитесь, что путь к вашему компоненту корректен
import { FiSun, FiMoon } from "react-icons/fi"; // For theme toggle icons
const DemoVerticalAccordion = () => {
// State to manage the theme mode
const [isDarkMode, setIsDarkMode] = useState(() => {
// Initialize theme from localStorage or default to false (light mode)
if (typeof window !== 'undefined') {
return localStorage.getItem("theme") === "dark";
}
return false;
});
// Effect to apply/remove 'dark' class on the HTML element
useEffect(() => {
if (isDarkMode) {
document.documentElement.classList.add("dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.classList.remove("dark");
localStorage.setItem("theme", "light");
}
}, [isDarkMode]);
const toggleTheme = () => {
setIsDarkMode((prevMode) => !prevMode);
};
return (
// For fullscreen demo, wrap the component in an h-screen w-full container
// The background here will match the accordion's section background
<div className="flex h-screen w-full justify-center items-center bg-white dark:bg-black relative">
<VerticalAccordion />
{/* Theme toggle button */}
<button
onClick={toggleTheme}
className="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-800 text-black dark:text-white transition-colors duration-200"
aria-label="Toggle theme"
>
{isDarkMode ? <FiSun size={24} /> : <FiMoon size={24} />}
</button>
</div>
);
};
export { DemoVerticalAccordion };