Components
Loading preview...
a reveal links interactive component
npx shadcn@latest add https://21st.dev/r/TomIsLoading/reveal-links"use client";
import { useState, useEffect } from "react";
import { RevealLinks } from "@/components/ui/reveal-links";
import { FiSun, FiMoon } from "react-icons/fi";
const DemoRevealLinks = () => {
const [isDarkMode, setIsDarkMode] = useState(() => {
if (typeof window !== 'undefined') {
return localStorage.getItem("theme") === "dark";
}
return false;
});
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 (
<div className="flex h-screen w-full justify-center items-center bg-white dark:bg-black relative overflow-auto">
<RevealLinks />
<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 { DemoRevealLinks };