-
- {(hasDownloaded && (
-
-
Downloaded! ❤️
-
- Your download of Zen Browser will begin shortly. Enjoy browsing the
- web with Zen!
-
-
- {selectedLinuxDownloadType === "appimage" && (
-
-
-
-
- AppImage users?
-
-
-
- If you're using an AppImage, you can use the automatic installer, check it out{" "}
-
-
-bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
-
-
- )}
-
- )) || (
- <>
-
Download
-
- We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.
-
-
- )}
- {/*Changes for the Choose your platform as checkbox looks old*/}
-
- {platform === null && (
-
- Platform
-
- Choose the platform you want to download Zen for.
-
-
+
+
+ {(hasDownloaded && (
+
+
Downloaded! ❤️
+
+ Your download of Zen Browser will begin shortly. Enjoy browsing
+ the web with Zen!
+
+
+ {selectedLinuxDownloadType === "appimage" && (
+
+
+
+ If you're using an AppImage, you can use the automatic
+ installer, check it out{" "}
+
+
+ bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
+
+
+ )}
+
+ )) || (
+ <>
+
+ Download
+
+ We're thrilled for you to experience Zen Browser. First, let us
+ know which device you're using. This will only take a moment, we
+ promise.
+
+
+ )}
+ {/*Changes for the Choose your platform as checkbox looks old*/}
+
+ {platform === null && (
+
+ Platform
+
+ Choose the platform you want to download Zen for.
+
+
setSelectedPlatform("Windows")}
className={ny(
- "select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
- selectedPlatform === "Windows" ? "border-blue-400" : ""
+ "mr-2 flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
+ selectedPlatform === "Windows" ? "border-blue-400" : "",
)}
style={{
- height: "11.25rem",
- width: "18.75rem",
+ height: "11.25rem",
+ width: "18.75rem",
}}
>
Windows
@@ -285,17 +288,17 @@ bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
setSelectedPlatform("Linux")}
className={ny(
- "select-none mr-2 flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
- selectedPlatform === "Linux" ? "border-yellow-400" : ""
+ "mr-2 flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
+ selectedPlatform === "Linux" ? "border-yellow-400" : "",
)}
style={{
- height: "11.25rem",
- width: "18.75rem",
+ height: "11.25rem",
+ width: "18.75rem",
}}
>
Linux
@@ -303,296 +306,304 @@ bash {"<"}(curl https://updates.zen-browser.app/appimage.sh)
setSelectedPlatform("MacOS")}
className={ny(
- "select-none flex flex-col items-center justify-center rounded-lg bg-background cursor-pointer border",
- selectedPlatform === "MacOS" ? "border-purple-400" : ""
+ "flex cursor-pointer select-none flex-col items-center justify-center rounded-lg border bg-background",
+ selectedPlatform === "MacOS" ? "border-purple-400" : "",
)}
style={{
- height: "11.25rem",
- width: "18.75rem",
+ height: "11.25rem",
+ width: "18.75rem",
}}
>
MacOS
-
- )}
- {/* Architecture */}
- {(platform === "Windows" || platform === "Linux") &&
- flowIndex === 1 && (
-
= 1
- }
- >
- Select Architecture
-
- Choose the architecture of your device, either optimized or
- generic.
-
-
-
setSelectedArchitecture("specific")}
- className={ny(
- "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedArchitecture === "specific"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 🚀
-
-
Optimized
-
- Blazing fast and compatible with modern devices
-
-
-
setSelectedArchitecture("generic")}
- className={ny(
- "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedArchitecture === "generic"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 👴
-
-
Generic
-
- Slow but compatible with older devices.
-
-
-
- )}
- {platform === "MacOS" && flowIndex === 1 && (
+
+ )}
+ {/* Architecture */}
+ {(platform === "Windows" || platform === "Linux") &&
+ flowIndex === 1 && (
= 1
+ }
>
- Download Zen for MacOS
+ Select Architecture
- Click the button below to download Zen for MacOS.
+ Choose the architecture of your device, either optimized or
+ generic.
setSelectedArchitecture("specific")}
className={ny(
- "select-none w-full h-64 mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedArchitecture === "specific" ? "border-blue-400" : ""
+ "mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedArchitecture === "specific"
+ ? "border-blue-400"
+ : "",
)}
>
-
🍏
-
AArch64
-
- 64-bit ARM architecture, for Apple's M Series Chips
+
+ 🚀
+
+
Optimized
+
+ Blazing fast and compatible with modern devices
setSelectedArchitecture("generic")}
className={ny(
- "select-none w-full h-64 mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedArchitecture === "generic" ? "border-blue-400" : ""
+ "mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedArchitecture === "generic"
+ ? "border-blue-400"
+ : "",
)}
>
-
x64
-
Intel
-
- 64-bit Intel architecture, for older Macs
+
+ 👴
+
+
Generic
+
+ Slow but compatible with older devices.
)}
- {flowIndex === 2 && platform === "Windows" && (
-
= 2}
- >
-
- Download Zen for Windows {selectedArchitecture}
-
-
- Choose the type of download you want for Zen for Windows.
-
-
-
setSelectedWindowsDownloadType("installer")}
- className={ny(
- "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedWindowsDownloadType === "installer"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 🚀
-
-
Installer
-
- Install Zen with a setup wizard
-
-
-
setSelectedWindowsDownloadType("portable")}
- className={ny(
- "select-none w-full h-full mb-2 ml-10 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedWindowsDownloadType === "portable"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 📦
-
-
Portable
-
- Download Zen as a ZIP file
-
-
-
- )}
- {flowIndex === 2 && platform === "Linux" && (
-
= 2}
- >
-
- Download Zen for Linux {selectedArchitecture}
-
-
- Choose the type of download you want for Zen for Linux.
-
-
-
setSelectedLinuxDownloadType("appimage")}
- className={ny(
- "select-none w-full h-full mb-2 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedLinuxDownloadType === "appimage"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 🚀
-
-
AppImage
-
- Install Zen with a setup wizard
-
-
-
setSelectedLinuxDownloadType("portable")}
- className={ny(
- "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedLinuxDownloadType === "portable"
- ? "border-blue-400"
- : ""
- )}
- >
-
- 📦
-
-
Portable
-
- Download Zen as a ZIP file
-
-
-
changeToFlatpak()}
- className={ny(
- "select-none w-full h-full mb-2 ml-5 p-5 flex flex-col items-center rounded-lg bg-background cursor-pointer border",
- selectedLinuxDownloadType === "flatpak"
- ? "border-blue-400"
- : "",
- selectedArchitecture === "specific"
- ? "opacity-50 cursor-not-allowed"
- : ""
- )}
- >
-
- 🧑💻
-
-
Flatpak
-
- Install Zen from the Flatpak repository.
-
-
-
- )}
-
- {!hasDownloaded && (
-
- goBackFlow()}
- className={ny(
- "opacity-70",
- platform === null ? "invisible" : ""
- )}
- >
-
- continueFlow()}
- disabled={selectedPlatform === null}
- >
- {(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
- ? "Download 🥳"
- : "Continue"}
-
-
- )}
- {(platform === "Linux" || platform === "Windows") &&
- flowIndex === 1 && (
-
- )}
-
-
-
-
-
- );
+ {platform === "MacOS" && flowIndex === 1 && (
+
+ Download Zen for MacOS
+
+ Click the button below to download Zen for MacOS.
+
+
+
setSelectedArchitecture("specific")}
+ className={ny(
+ "mb-2 flex h-64 w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedArchitecture === "specific"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ 🍏
+
+
AArch64
+
+ 64-bit ARM architecture, for Apple's M Series Chips
+
+
+
setSelectedArchitecture("generic")}
+ className={ny(
+ "mb-2 ml-10 flex h-64 w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedArchitecture === "generic"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ x64
+
+
Intel
+
+ 64-bit Intel architecture, for older Macs
+
+
+
+ )}
+ {flowIndex === 2 && platform === "Windows" && (
+
= 2}
+ >
+
+ Download Zen for Windows {selectedArchitecture}
+
+
+ Choose the type of download you want for Zen for Windows.
+
+
+
setSelectedWindowsDownloadType("installer")}
+ className={ny(
+ "mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedWindowsDownloadType === "installer"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ 🚀
+
+
Installer
+
+ Install Zen with a setup wizard
+
+
+
setSelectedWindowsDownloadType("portable")}
+ className={ny(
+ "mb-2 ml-10 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedWindowsDownloadType === "portable"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ 📦
+
+
Portable
+
+ Download Zen as a ZIP file
+
+
+
+ )}
+ {flowIndex === 2 && platform === "Linux" && (
+
= 2}
+ >
+
+ Download Zen for Linux {selectedArchitecture}
+
+
+ Choose the type of download you want for Zen for Linux.
+
+
+
setSelectedLinuxDownloadType("appimage")}
+ className={ny(
+ "mb-2 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedLinuxDownloadType === "appimage"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ 🚀
+
+
AppImage
+
+ Install Zen with a setup wizard
+
+
+
setSelectedLinuxDownloadType("portable")}
+ className={ny(
+ "mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedLinuxDownloadType === "portable"
+ ? "border-blue-400"
+ : "",
+ )}
+ >
+
+ 📦
+
+
Portable
+
+ Download Zen as a ZIP file
+
+
+
changeToFlatpak()}
+ className={ny(
+ "mb-2 ml-5 flex h-full w-full cursor-pointer select-none flex-col items-center rounded-lg border bg-background p-5",
+ selectedLinuxDownloadType === "flatpak"
+ ? "border-blue-400"
+ : "",
+ selectedArchitecture === "specific"
+ ? "cursor-not-allowed opacity-50"
+ : "",
+ )}
+ >
+
+ 🧑💻
+
+
Flatpak
+
+ Install Zen from the Flatpak repository.
+
+
+
+ )}
+
+ goBackFlow()}
+ className={ny(
+ "opacity-70",
+ platform === null ? "invisible" : "",
+ )}
+ >
+
+ continueFlow()}
+ disabled={selectedPlatform === null}
+ >
+ {(flowIndex === 1 && platform === "MacOS") || flowIndex === 2
+ ? "Download 🥳"
+ : "Continue"}
+
+
+ )}
+ {(platform === "Linux" || platform === "Windows") &&
+ flowIndex === 1 && (
+
+ )}
+
+
+
+
+
+ );
}
diff --git a/src/components/features.tsx b/src/components/features.tsx
index daa8d0f..5e2538d 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -1,316 +1,561 @@
-'use client';
-import Sticky from 'react-sticky-el';
+"use client";
+import Sticky from "react-sticky-el";
import {
- BookmarkCheckIcon,
- CheckIcon,
- ChevronLeft,
- ChevronRight,
- ExternalLinkIcon,
- EyeIcon,
- EyeOffIcon,
- Github,
- HeartHandshake,
- HeartPulseIcon,
- HomeIcon,
- PaintBucket,
- PersonStanding,
- RabbitIcon,
- ShieldAlertIcon,
- ShieldCheck,
- SidebarCloseIcon,
- SidebarIcon,
- SidebarOpenIcon,
- SpaceIcon,
- SplitSquareHorizontal,
- SplitSquareVertical,
- SplitSquareVerticalIcon,
- TableIcon,
- XIcon,
-} from 'lucide-react';
+ BookmarkCheckIcon,
+ CheckIcon,
+ ChevronLeft,
+ ChevronRight,
+ ExternalLinkIcon,
+ EyeIcon,
+ EyeOffIcon,
+ Github,
+ HeartHandshake,
+ HeartPulseIcon,
+ HomeIcon,
+ PaintBucket,
+ PersonStanding,
+ RabbitIcon,
+ ShieldAlertIcon,
+ ShieldCheck,
+ SidebarCloseIcon,
+ SidebarIcon,
+ SidebarOpenIcon,
+ SpaceIcon,
+ SplitSquareHorizontal,
+ SplitSquareVertical,
+ SplitSquareVerticalIcon,
+ TableIcon,
+ XIcon,
+} from "lucide-react";
import {
- Cross1Icon,
- EyeClosedIcon,
- HeartFilledIcon,
- Link1Icon,
- LockClosedIcon,
- QuestionMarkCircledIcon,
- QuestionMarkIcon,
- ReloadIcon,
- SpaceBetweenHorizontallyIcon,
- UpdateIcon,
-} from '@radix-ui/react-icons';
+ Cross1Icon,
+ EyeClosedIcon,
+ HeartFilledIcon,
+ Link1Icon,
+ LockClosedIcon,
+ QuestionMarkCircledIcon,
+ QuestionMarkIcon,
+ ReloadIcon,
+ SpaceBetweenHorizontallyIcon,
+ UpdateIcon,
+} from "@radix-ui/react-icons";
import Image from "next/legacy/image";
-import Link from 'next/link';
-import { Button } from './ui/button';
-import { COLORS } from './create-theme';
-import { Slider } from './ui/slider';
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { COLORS } from "./create-theme";
+import { Slider } from "./ui/slider";
import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from './ui/table';
-import React, { useState } from 'react';
-import { ny } from '@/lib/utils';
-import ThemeCard from './theme-card';
-import { getAllThemes, ZenTheme } from '@/lib/themes';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
-import Logo from './logo';
-import CachedImage from './CachedImage';
-import { transform } from 'next/dist/build/swc';
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "./ui/table";
+import React, { useState } from "react";
+import { ny } from "@/lib/utils";
+import ThemeCard from "./theme-card";
+import { getAllThemes, ZenTheme } from "@/lib/themes";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "./ui/accordion";
+import Logo from "./logo";
+import CachedImage from "./CachedImage";
+import { transform } from "next/dist/build/swc";
function Checkmark() {
- return (
-
- );
+ return (
+
+ );
}
function Cross() {
- return (
-
- );
+ return (
+
+ );
}
function Question() {
- return (
-
- );
+ return (
+
+ );
}
export default function Features() {
- const [feature, setFeature] = useState("item-1");
- return (
-
-
-
-
-
Your Browser, your way
-
With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.
-
- window.open('/themes', '_self')}>View Theme Store
-
-
-
-
-
Always up to date
-
Zen Browser is built on top of Firefox, ensuring it always stays up to date with the latest features, security patches, and performance improvements.
-
- window.open('/download', '_self')}>Download Now
-
-
-
+ const [feature, setFeature] = useState("item-1");
+ return (
+
+
+
+
+
+ Your Browser, your way{" "}
+
+
+ With Zen's Theme Store, you can customize your browsing experience
+ to reflect your unique style and preferences. Choose from a wide
+ array of themes, colors, and layouts to make Zen truly your own,
+ transforming your browser into a personalized digital space.
+
+
+ window.open("/themes", "_self")}
+ >
+ View Theme Store
+
+
+
+
+
+
+ Always up to date{" "}
+
+
+ Zen Browser is built on top of Firefox, ensuring it always stays
+ up to date with the latest features, security patches, and
+ performance improvements.
+
+
+ window.open("/download", "_self")}
+ >
+ Download Now
+
+
+
+
-
-
-
-
Community driven and Open Source
-
Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.
-
- window.open('https://github.com/zen-browser', '_blank')}>GitHub Page
-
-
-
-
-
-
-
Automated Releases to ensure security
-
-
-
-
-
Constantly improving
-
-
-
-
-
-
-
Built for simplicity
-
Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.
-
-
-
-
Completely Customizable
-
-
-
-
-
-
-
-
-
-
Split Views
-
Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.
-
- window.open('/download', '_self')}>Download Now
-
-
-
-
-
Better tab management
-
Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity
-
-
-
-
-
Fast profile switcher
-
-
-
-
-
Tab Groups (Coming Soon)
-
-
-
-
-
-
Security and Privacy is important to us
-
- Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.
-
-
- window.open('https://docs.zen-browser.app/security', '_blank')}>Security in Zen
- window.open('/privacy-policy', '_blank')}>Your Privacy
-
-
-
-
-
Sidebar
-
Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.
-
-
-
-
-
-
-
Introducing Compact Mode
-
Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.
-
- window.open('/download', '_self')}>What are you waiting for?
-
-
-
-
-
Frequently Asked Questions
-
-
- Is it Firefox based?
-
- Yes, Zen Browser is focused on being always at the latest version of Firefox, ensuring that you have the latest security updates and features.
-
-
-
- Does it track me?
-
- No! Zen Browser is built with privacy in mind. We don't track you, we don't collect your data, and we don't sell your data to third parties.
-
-
-
- How secure is Zen Browser?
-
- Zen Browser is built on top of Firefox, which is known for its security features. We also have additional security features like https only built into Zen Browser to help keep you safe online.
-
-
-
-
-
-
- {feature == "item-1" && (
-
- )}
- {feature == "item-2" && (
-
- )}
- {feature == "item-3" && (
-
- )}
-
-
-
-
Convinced?
-
Download Zen Browser now and experience the future of browsing.
-
- window.open('/download', '_self')}>Download Now
-
-
-
-
-
Even more convinced?
-
Help support the development of Zen Browser by donating to our cause.
-
- window.open('https://patreon.com/zen_browser', '_blank')}>Patreon
- window.open('https://ko-fi.com/zen_browser', '_blank')}>Ko-fi
-
-
-
- );
+
+
+
+
+ Community driven and Open Source{" "}
+
+
+ Zen thrives on the contributions of its vibrant community. As an
+ open-source project, Zen encourages collaboration and innovation,
+ allowing users and developers alike to shape the future of the
+ browser.
+
+
+
+ window.open("https://github.com/zen-browser", "_blank")
+ }
+ >
+ GitHub Page
+
+
+
+
+
+
+
+ Fully Open source
+
+
+
+
+
+ Automated Releases to ensure security
+
+
+
+
+
+ Community driven
+
+
+
+
+
+ Constantly improving
+
+
+
+
+
+
+
+
+ Built for simplicity
+
+ Zen Browser is designed to be simple and easy to use. It's built
+ with the user in mind, so you can focus on what matters most.
+
+
+
+
+
+ Completely Customizable
+
+
+
+
+
+
+ Thoughtful Design
+
+
+
+
+
+
+
+
+
+ Split Views{" "}
+
+
+ Zen Browser allows you to split your view into multiple panes, so
+ you can work on multiple things at once. It's perfect for
+ multitasking.
+
+
+ window.open("/download", "_self")}
+ >
+ Download Now
+
+
+
+
+
+
+ Better tab management{" "}
+
+
+ Better tab management helps you stay organized and focused, reducing
+ clutter and enhancing productivity
+
+
+
+
+
+
+ Fast profile switcher
+
+
+
+
+
+
+ Tab Groups (Coming Soon)
+
+
+
+
+
+
+
+ Security and Privacy is{" "}
+ important to us{" "}
+
+
+ Zen is based on Firefox, ensuring that your browsing experience
+ prioritizes security and privacy. With advanced tracking protection
+ and minimal data collection, Zen keeps your online activity safe and
+ secure, giving you peace of mind as you explore the web.
+
+
+
+ window.open("https://docs.zen-browser.app/security", "_blank")
+ }
+ >
+ Security in Zen{" "}
+
+ window.open("/privacy-policy", "_blank")}
+ >
+ Your Privacy{" "}
+
+
+
+
+
+
+ Sidebar
+
+ Zen Browser has a built-in sidebar that lets you quickly access your
+ favorite websites, bookmarks, and more. It's the perfect way to stay
+ organized.
+
+
+
+
+
+
+
+
+ Introducing Compact Mode{" "}
+
+
+ Zen Browser's compact mode gives you more screen real estate by
+ hiding the title bar and tabs. It's perfect for when you need to
+ focus on your work.
+
+
+ window.open("/download", "_self")}
+ >
+ What are you waiting for?
+
+
+
+
+
+
+ Frequently Asked Questions{" "}
+
+
+
+ Is it Firefox based?
+
+ Yes, Zen Browser is focused on being always at the latest
+ version of Firefox, ensuring that you have the latest security
+ updates and features.
+
+
+
+ Does it track me?
+
+ No! Zen Browser is built with privacy in mind.
+ We don't track you, we don't collect your data, and we don't
+ sell your data to third parties.
+
+
+
+ How secure is Zen Browser?
+
+ Zen Browser is built on top of Firefox, which is known for its
+ security features. We also have additional security features
+ like https only built into Zen Browser to help keep you safe
+ online.
+
+
+
+
+
+
+ {feature == "item-1" && (
+
+ )}
+ {feature == "item-2" && (
+
+ )}
+ {feature == "item-3" && (
+
+ )}
+
+
+
+
+ Convinced?
+
+
+ Download Zen Browser now and experience the future of browsing.
+
+
+ window.open("/download", "_self")}
+ >
+ Download Now
+
+
+
+
+
+
+ Even more convinced?{" "}
+
+
+ Help support the development of Zen Browser by donating to our
+ cause.
+
+
+
+ window.open("https://patreon.com/zen_browser", "_blank")
+ }
+ >
+ Patreon
+
+ window.open("https://ko-fi.com/zen_browser", "_blank")
+ }
+ >
+ Ko-fi
+
+
+
+ );
}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 1f8fcc6..62b9e31 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -1,4 +1,3 @@
-
import Link from "next/link";
import Logo from "./logo";
import TextReveal from "./ui/text-reveal";
@@ -7,108 +6,103 @@ import { MastodonLogo } from "./icons/mastodon";
import { Button } from "./ui/button";
export default function Footer() {
- return (
-
-
-
-
-
-
Zen Browser
-
Follow Us
-
-
-
-
-
-
-
-
Resources
-
-
Support Us
-
-
-
-
-
-
Crafted with ❤️ by the community - Copyright © {new Date().getFullYear()} Zen Browser
-
- Download
-
-
-
- );
+ return (
+
+
+
+
+
+
Zen Browser
+
Follow Us
+
+
+
+
+
+
+
+
Resources
+
+
Support Us
+
+
+
+
+
+
+ Crafted with ❤️ by the community - Copyright ©{" "}
+ {new Date().getFullYear()} Zen Browser
+
+
+ Download
+
+
+
+ );
}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 70613e4..e9dc874 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -11,53 +11,41 @@ import { ChevronDown, ChevronRight } from "lucide-react";
import Particles from "./ui/particles";
import Image from "next/legacy/image";
import Link from "next/link";
+import CoolHeaderText from "./cool-header-text";
export default function Header() {
- const ref = useRef(null);
- const inView = useInView(ref, { once: true, margin: "-100px" });
- return (
- <>
-
-
- );
+ const ref = useRef(null);
+ const inView = useInView(ref, { once: true, margin: "-100px" });
+ return (
+ <>
+
+
+
+
+ Beautifully designed, privacy-focused, and packed with features.
+
+
+
+
+ );
}
diff --git a/src/components/icons/mastodon.tsx b/src/components/icons/mastodon.tsx
index 915ba5c..b228054 100644
--- a/src/components/icons/mastodon.tsx
+++ b/src/components/icons/mastodon.tsx
@@ -1,7 +1,14 @@
export const MastodonLogo = (props: any) => (
-
-
-
-)
\ No newline at end of file
+
+
+);
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
index ec4826a..c40db20 100644
--- a/src/components/logo.tsx
+++ b/src/components/logo.tsx
@@ -6,10 +6,19 @@ import React from "react";
import CachedImage from "./CachedImage";
export default function Logo({ withText, ...props }: any) {
- return (
-
- zen }
-
- );
+ return (
+
+ zen }
+
+ );
}
diff --git a/src/components/marketplace.tsx b/src/components/marketplace.tsx
index 9f8c81b..63da987 100644
--- a/src/components/marketplace.tsx
+++ b/src/components/marketplace.tsx
@@ -5,23 +5,28 @@ import { getAllThemes, getThemesFromSearch, ZenTheme } from "@/lib/themes";
import ThemeCard from "./theme-card";
import { Button } from "./ui/button";
-export default function MarketplacePage({ themes }: {themes:ZenTheme[]}) {
- const [searchInput, setSearchInput] = React.useState("");
- const [tags, setTags] = React.useState
(["all"]);
+export default function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
+ const [searchInput, setSearchInput] = React.useState("");
+ const [tags, setTags] = React.useState(["all"]);
- return (
-
-
-
- {getThemesFromSearch(themes, searchInput, tags).map((theme) => (
-
-
+
+
+ {getThemesFromSearch(themes, searchInput, tags).map((theme) => (
+
+
-
-
-
- Toggle Menu
-
-
-
-
-
-
-
-
-
- Download
-
- Get the latest version of Zen Browser.
-
-
-
- Theme Store
-
- Customize your browsing experience.
-
-
-
- Release Notes
-
- Stay up to date with the latest changes.
-
-
-
- Donate {"<"}3
- Support the project
-
- {components.map(({title, href, description}) => (
-
- {title}
- {description}
-
- ))}
-
-
-
- )
+ return (
+
+
+
+
+ Toggle Menu
+
+
+
+
+
+
+
+
+
+ Download
+
+ Get the latest version of Zen Browser.
+
+
+
+ Theme Store
+
+ Customize your browsing experience.
+
+
+
+ Release Notes
+
+ Stay up to date with the latest changes.
+
+
+
+ Donate {"<"}3
+ Support the project
+
+ {components.map(({ title, href, description }) => (
+
+ {title}
+ {description}
+
+ ))}
+
+
+
+ );
}
interface MobileLinkProps extends LinkProps {
- onOpenChange?: (open: boolean) => void
- children: React.ReactNode
- className?: string
+ onOpenChange?: (open: boolean) => void;
+ children: React.ReactNode;
+ className?: string;
}
function MobileLink({
- href,
- onOpenChange,
- className,
- children,
- ...props
+ href,
+ onOpenChange,
+ className,
+ children,
+ ...props
}: MobileLinkProps) {
- const router = useRouter()
- return (
- {
- router.push(href.toString())
- onOpenChange?.(false)
- }}
- className={ny(className, "my-4")}
- {...props}
- >
- {children}
-
- )
-}
\ No newline at end of file
+ const router = useRouter();
+ return (
+ {
+ router.push(href.toString());
+ onOpenChange?.(false);
+ }}
+ className={ny(className, "my-4")}
+ {...props}
+ >
+ {children}
+
+ );
+}
diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx
index ef4e1e8..75e6afc 100644
--- a/src/components/mode-toggle.tsx
+++ b/src/components/mode-toggle.tsx
@@ -5,36 +5,36 @@ import { useTheme } from "next-themes";
import { Button } from "./ui/button";
export function ModeToggle() {
- const { setTheme } = useTheme();
- const [currentTheme, setCurrentTheme] = useState('light');
- const [mounted, setMounted] = useState(false);
+ const { setTheme } = useTheme();
+ const [currentTheme, setCurrentTheme] = useState("light");
+ const [mounted, setMounted] = useState(false);
- useEffect(() => {
- setMounted(true);
- const savedTheme = localStorage.getItem('theme') || 'light';
- setCurrentTheme(savedTheme);
- setTheme(savedTheme);
- }, [setTheme]);
+ useEffect(() => {
+ setMounted(true);
+ const savedTheme = localStorage.getItem("theme") || "light";
+ setCurrentTheme(savedTheme);
+ setTheme(savedTheme);
+ }, [setTheme]);
- const toggleTheme = () => {
- const newTheme = currentTheme === 'light' ? 'dark' : 'light';
- setCurrentTheme(newTheme);
- setTheme(newTheme);
- localStorage.setItem('theme', newTheme);
- };
+ const toggleTheme = () => {
+ const newTheme = currentTheme === "light" ? "dark" : "light";
+ setCurrentTheme(newTheme);
+ setTheme(newTheme);
+ localStorage.setItem("theme", newTheme);
+ };
- if (!mounted) {
- return null;
- }
+ if (!mounted) {
+ return null;
+ }
- return (
-
- {currentTheme === 'light' ? (
- Toggle theme
-
- );
-}
\ No newline at end of file
+ return (
+
+ {currentTheme === "light" ? (
+ Toggle theme
+
+ );
+}
diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
index 48183ce..c81435d 100644
--- a/src/components/navigation.tsx
+++ b/src/components/navigation.tsx
@@ -1,167 +1,176 @@
+import * as React from "react";
+import Link from "next/link";
-import * as React from "react"
-import Link from "next/link"
-
-import { ny } from "@/lib/utils"
+import { ny } from "@/lib/utils";
import {
- NavigationMenu,
- NavigationMenuContent,
- NavigationMenuItem,
- NavigationMenuLink,
- NavigationMenuList,
- NavigationMenuTrigger,
- navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu"
-import Logo from "./logo"
-import { ModeToggle } from "./mode-toggle"
-import { MobileNav } from "./mobile-nav"
-import { HeartIcon } from "lucide-react"
-import { HeartFilledIcon } from "@radix-ui/react-icons"
-
-export const components: { title: string; href: string; description: string }[] = [
- {
- title: "Privacy Policy",
- href: "/privacy-policy",
- description: "Read our privacy policy to learn more about how we handle your data."
- },
- {
- title: "Discord",
- href: "https://discord.gg/zen-browser",
- description: "Join our Discord server to chat with the community and get support."
- },
- {
- title: "Source Code",
- href: "https://github.com/zen-browser",
- description: "View the source code on GitHub and contribute to the project."
- },
- {
- title: "Branding Assets",
- href: "/branding-assets",
- description: "Download our branding assets to use in your projects."
- },
- {
- title: "About",
- href: "/about",
- description: "Learn more about the Zen Browser project and the team behind it."
- },
- {
- title: "Documentation",
- href: "https://docs.zen-browser.app/",
- description: "Read the documentation to learn more about Zen Browser."
- }
-]
-
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import Logo from "./logo";
+import { ModeToggle } from "./mode-toggle";
+import { MobileNav } from "./mobile-nav";
+import { HeartIcon } from "lucide-react";
+import { HeartFilledIcon } from "@radix-ui/react-icons";
+
+export const components: {
+ title: string;
+ href: string;
+ description: string;
+}[] = [
+ {
+ title: "Privacy Policy",
+ href: "/privacy-policy",
+ description:
+ "Read our privacy policy to learn more about how we handle your data.",
+ },
+ {
+ title: "Discord",
+ href: "https://discord.gg/zen-browser",
+ description:
+ "Join our Discord server to chat with the community and get support.",
+ },
+ {
+ title: "Source Code",
+ href: "https://github.com/zen-browser",
+ description:
+ "View the source code on GitHub and contribute to the project.",
+ },
+ {
+ title: "Branding Assets",
+ href: "/branding-assets",
+ description: "Download our branding assets to use in your projects.",
+ },
+ {
+ title: "About",
+ href: "/about",
+ description:
+ "Learn more about the Zen Browser project and the team behind it.",
+ },
+ {
+ title: "Documentation",
+ href: "https://docs.zen-browser.app/",
+ description: "Read the documentation to learn more about Zen Browser.",
+ },
+];
+
export function Navigation() {
- return (
-
-
-
-
-
-
-
-
-
- Getting Started
-
-
-
-
-
-
- Donate
-
-
-
-
- Support us on Patreon and get exclusive rewards and keep the project alive.
-
-
- Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
-
-
-
-
-
- {"Useful Links"}
-
-
- {components.map((component) => (
-
- {component.description}
-
- ))}
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ Getting Started
+
+
+
+
+
+
+ Donate
+
+
+
+
+ Support us on Patreon and get exclusive rewards and keep the
+ project alive.
+
+
+ Ko-fi is a way to support us with a one-time donation and help
+ us keep the project alive.
+
+
+
+
+
+ {"Useful Links"}
+
+
+ {components.map((component) => (
+
+ {component.description}
+
+ ))}
+
+
+
+
+
+
-
-
- {title}
-
- {children}
-
-
-
-
- )
-})
-ListItem.displayName = "ListItem"
\ No newline at end of file
+ return (
+
+
+
+ {title}
+
+ {children}
+
+
+
+
+ );
+});
+ListItem.displayName = "ListItem";
diff --git a/src/components/release-note.tsx b/src/components/release-note.tsx
index a38ed6a..bd34dcd 100644
--- a/src/components/release-note.tsx
+++ b/src/components/release-note.tsx
@@ -10,113 +10,124 @@ import { AccordionContent, AccordionTrigger } from "./ui/accordion";
import { ny } from "@/lib/utils";
export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
- const splitDate = data.date.split("/");
- return (
-
-
- {moment({
- year: parseInt(splitDate[2]),
- month: parseInt(splitDate[1]) - 1,
- day: parseInt(splitDate[0]),
- }).format('MMMM Do, YYYY')}
-
-
-
- Release notes for {data.version} 🎉
-
-
- If you encounter any issues, please report them on{" "}
-
- the issues page
-
- . Thanks everyone for your feedback! ❤️
-
- {data.extra && (
-
"),
- }}
- >
- )}
-
- {data.breakingChanges && (
-
-
-
- Breaking Changes
-
-
-
-
- {data.breakingChanges.map((change) => (
-
-
- {change}
-
-
- ))}
-
-
-
- )
- }
- {data.fixes && (
-
-
-
- Fixes
-
-
-
-
- {data.fixes.map((fix) => (
-
-
- {fix.description}
-
- {fix.issue && (
-
- #{fix.issue}
-
- )}
-
- ))}
-
-
-
- )}
- {data.features && (
-
-
-
- Features
-
-
-
-
- {data.features.map((feature) => (
-
-
- {feature}
-
-
- ))}
-
-
-
- )}
-
-
- );
+ const splitDate = data.date.split("/");
+ return (
+
+
+ {moment({
+ year: parseInt(splitDate[2]),
+ month: parseInt(splitDate[1]) - 1,
+ day: parseInt(splitDate[0]),
+ }).format("MMMM Do, YYYY")}
+
+
+
+ Release notes for {data.version} 🎉
+
+
+ If you encounter any issues, please report them on{" "}
+
+ the issues page
+
+ . Thanks everyone for your feedback! ❤️
+
+ {data.extra && (
+
"),
+ }}
+ >
+ )}
+
+ {data.breakingChanges && (
+
+
+
+ Breaking Changes
+
+
+
+
+ {data.breakingChanges.map((change) => (
+
+ {change}
+
+ ))}
+
+
+
+ )}
+ {data.fixes && (
+
+
+
+ Fixes
+
+
+
+
+ {data.fixes.map((fix) => (
+
+ {fix.description}
+ {fix.issue && (
+
+ #{fix.issue}
+
+ )}
+
+ ))}
+
+
+
+ )}
+ {data.features && (
+
+
+
+ Features
+
+
+
+
+ {data.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+
+
+ )}
+
+
+ );
}
diff --git a/src/components/theme-card.tsx b/src/components/theme-card.tsx
index bbc0623..033d3d8 100644
--- a/src/components/theme-card.tsx
+++ b/src/components/theme-card.tsx
@@ -1,50 +1,78 @@
-
import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "./ui/dialog";
+import { Button } from "./ui/button";
import { ny } from "@/lib/utils";
-const ThemeCardWrapper = styled.div`
-`;
+const ThemeCardWrapper = styled.div``;
export default function ThemeCard({
- theme,
- className
+ theme,
+ className,
}: {
- theme: ZenTheme;
- className?: string;
+ theme: ZenTheme;
+ className?: string;
}) {
+ const maxNameLen = 50;
+ const maxDescLen = 100;
- const maxNameLen = 50;
- const maxDescLen = 100;
-
- return (
- {
- if (event.target instanceof HTMLAnchorElement) return;
- window.open(`/themes/${theme.id}`, "_self");
- }} className={ny("flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-surface hover:border-blue-500 cursor-pointer select-none ", className)}>
- {theme.name.substring(0, maxNameLen).trim() + (theme.name.length > maxNameLen ? "..." : "")}
-
-
- {theme.description.substring(0, maxDescLen).trim() +
- (theme.description.length > maxDescLen ? "..." : "")}
-
-
- );
+ return (
+ {
+ if (event.target instanceof HTMLAnchorElement) return;
+ window.open(`/themes/${theme.id}`, "_self");
+ }}
+ className={ny(
+ "border-grey-900 flex w-full cursor-pointer select-none flex-col justify-start rounded-lg border bg-muted p-5 shadow-sm transition duration-300 ease-in-out hover:border-blue-500 hover:bg-surface hover:shadow-lg dark:border-muted dark:bg-muted/50",
+ className,
+ )}
+ >
+
+ {theme.name.substring(0, maxNameLen).trim() +
+ (theme.name.length > maxNameLen ? "..." : "")}
+
+
+
+ {theme.description.substring(0, maxDescLen).trim() +
+ (theme.description.length > maxDescLen ? "..." : "")}
+
+
+ );
}
diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index 7af036c..5b5b27c 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -1,70 +1,100 @@
-
-
-import { getThemeAuthorLink, getThemeFromId, getThemeMarkdown, ZenTheme } from "@/lib/themes";
+import {
+ getThemeAuthorLink,
+ getThemeFromId,
+ getThemeMarkdown,
+ ZenTheme,
+} from "@/lib/themes";
import { Button } from "./ui/button";
import Markdown from "react-markdown";
-import '../app/privacy-policy/markdown.css';
+import "../app/privacy-policy/markdown.css";
import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
export default async function ThemePage({ themeID }: { themeID: string }) {
+ const theme = await getThemeFromId(themeID);
+ if (!theme) {
+ return Theme not found
;
+ }
- const theme = await getThemeFromId(themeID);
- if (!theme) {
- return Theme not found
;
- }
+ const readme = await getThemeMarkdown(theme);
- const readme = await getThemeMarkdown(theme);
-
- return (
-
-
-
- Go back
-
-
-
{theme.name}
-
{theme.description}
- {theme.homepage && (
-
- Visit Homepage
-
- )}
-
-
Install Theme 🎉
-
Uninstall Theme
-
You need to have Zen Browser installed to install this theme. Download now!
-
-
-
- {readme === null ? (
- {`${readme}`}
- )}
-
-
-
- Theme by{" "}
-
- {theme.author}
-
- {` • v${theme.version}`}
-
-
-
+
+
+ Go back
+
+
+
{theme.name}
+
+ {theme.description}
+
+ {theme.homepage && (
+
+ Visit Homepage
+
+ )}
+
+
+ Install Theme 🎉
+
+
+ Uninstall Theme
+
+
+ You need to have Zen Browser installed to install this theme.{" "}
+
+ Download now!
+
+
+
+
+
+ {readme === null ? (
+ {`${readme}`}
+ )}
+
+
+
+ Theme by{" "}
+
+ {theme.author}
+
+ {` • v${theme.version}`}
+
+
+
{children}
+ return {children} ;
}
diff --git a/src/components/themes-search.tsx b/src/components/themes-search.tsx
index 0ebd6e9..9c5f26e 100644
--- a/src/components/themes-search.tsx
+++ b/src/components/themes-search.tsx
@@ -2,50 +2,62 @@ import { SearchIcon } from "lucide-react";
import { Button } from "./ui/button";
import { ny } from "@/lib/utils";
-const TAGS = [
- "all",
- "color-scheme",
- "utility",
-];
+const TAGS = ["all", "color-scheme", "utility"];
export default function ThemesSearch({
- input, setInput, tags, setTags
+ input,
+ setInput,
+ tags,
+ setTags,
}: {
- input: string;
- setInput: (input: string) => void;
- tags: string[];
- setTags: (tags: string[]) => void;
+ input: string;
+ setInput: (input: string) => void;
+ tags: string[];
+ setTags: (tags: string[]) => void;
}) {
- return (
- <>
-
- window.open("https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines#themes-store-submission-guidelines", "_blank")}
- className="text-muted rounded-full rounded-r-none hidden md:block"
- >Submit a theme
- window.open("/create-theme", "_self")}
- className="text-muted rounded-full rounded-l-none border-l border-black dark:border-none hidden md:block"
- >Create your theme
-
-
- {TAGS.map((tag) => (
- setTags([tag])}
- className={ny(`!rounded-full px-5 ${tags.includes(tag) ? "bg-black dark:bg-white text-white dark:text-black" : ""}`)}
- >{tag}
- ))}
-
-
- );
+ return (
+ <>
+
+
+ window.open(
+ "https://docs.zen-browser.app/themes-store/themes-marketplace-submission-guidelines#themes-store-submission-guidelines",
+ "_blank",
+ )
+ }
+ className="hidden rounded-full rounded-r-none text-muted md:block"
+ >
+ Submit a theme
+
+ window.open("/create-theme", "_self")}
+ className="hidden rounded-full rounded-l-none border-l border-black text-muted dark:border-none md:block"
+ >
+ Create your theme
+
+
+
+ {TAGS.map((tag) => (
+ setTags([tag])}
+ className={ny(
+ `!rounded-full px-5 ${tags.includes(tag) ? "bg-black text-white dark:bg-white dark:text-black" : ""}`,
+ )}
+ >
+ {tag}
+
+ ))}
+
+
+ );
}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index ab33aa9..b7c6fce 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -1,57 +1,57 @@
-'use client'
+"use client";
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
const AccordionItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- svg]:rotate-180',
- className,
- )}
- {...props}
- >
- {children}
-
-
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+ svg]:rotate-180",
+ className,
+ )}
+ {...props}
+ >
+ {children}
+
+
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
const AccordionContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- {children}
-
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+ {children}
+
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/components/ui/animated-gradient-text.tsx b/src/components/ui/animated-gradient-text.tsx
index af4ab30..90ec1dd 100644
--- a/src/components/ui/animated-gradient-text.tsx
+++ b/src/components/ui/animated-gradient-text.tsx
@@ -1,23 +1,23 @@
-import type { ReactNode } from 'react'
-import { ny } from '@/lib/utils'
+import type { ReactNode } from "react";
+import { ny } from "@/lib/utils";
export default function AnimatedGradientText({
- children,
- className,
+ children,
+ className,
}: {
- children: ReactNode
- className?: string
+ children: ReactNode;
+ className?: string;
}) {
- return (
-
-
+ return (
+
- )
+ {children}
+
-
-
-
-
-
- {squares.map(({ pos: [x, y], id }, index) => (
- updateSquarePosition(id)}
- key={`${x}-${y}-${index}`}
- width={width - 1}
- height={height - 1}
- x={x * width + 1}
- y={y * height + 1}
- fill="currentColor"
- strokeWidth="0"
- />
- ))}
-
-
- )
+ return (
+
+
+
+
+
+
+ {squares.map(({ pos: [x, y], id }, index) => (
+ updateSquarePosition(id)}
+ key={`${x}-${y}-${index}`}
+ width={width - 1}
+ height={height - 1}
+ x={x * width + 1}
+ y={y * height + 1}
+ fill="currentColor"
+ strokeWidth="0"
+ />
+ ))}
+
+
+ );
}
-export default GridPattern
+export default GridPattern;
diff --git a/src/components/ui/animated-shiny-text.tsx b/src/components/ui/animated-shiny-text.tsx
index 262fddd..393a4ea 100644
--- a/src/components/ui/animated-shiny-text.tsx
+++ b/src/components/ui/animated-shiny-text.tsx
@@ -1,39 +1,39 @@
-import type { CSSProperties, FC, ReactNode } from 'react'
-import { ny } from '@/lib/utils'
+import type { CSSProperties, FC, ReactNode } from "react";
+import { ny } from "@/lib/utils";
interface AnimatedShinyTextProps {
- children: ReactNode
- className?: string
- shimmerWidth?: number
+ children: ReactNode;
+ className?: string;
+ shimmerWidth?: number;
}
const AnimatedShinyText: FC = ({
- children,
- className,
- shimmerWidth = 100,
+ children,
+ className,
+ shimmerWidth = 100,
}) => {
- return (
-
- {children}
-
- )
-}
+ className,
+ )}
+ >
+ {children}
+
+ );
+};
-export default AnimatedShinyText
+export default AnimatedShinyText;
diff --git a/src/components/ui/blur-fade.tsx b/src/components/ui/blur-fade.tsx
index f7427b7..154efa8 100644
--- a/src/components/ui/blur-fade.tsx
+++ b/src/components/ui/blur-fade.tsx
@@ -1,60 +1,60 @@
-'use client'
+"use client";
-import { useRef } from 'react'
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion, useInView } from 'framer-motion'
+import { useRef } from "react";
+import type { Variants } from "framer-motion";
+import { AnimatePresence, motion, useInView } from "framer-motion";
interface BlurFadeProps {
- children: React.ReactNode
- className?: string
- variant?: {
- hidden: { y: number }
- visible: { y: number }
- }
- duration?: number
- delay?: number
- yOffset?: number
- inView?: boolean
- inViewMargin?: any
- blur?: string
+ children: React.ReactNode;
+ className?: string;
+ variant?: {
+ hidden: { y: number };
+ visible: { y: number };
+ };
+ duration?: number;
+ delay?: number;
+ yOffset?: number;
+ inView?: boolean;
+ inViewMargin?: any;
+ blur?: string;
}
export default function BlurFade({
- children,
- className,
- variant,
- duration = 0.4,
- delay = 0,
- yOffset = 6,
- inView = false,
- inViewMargin = '-50px',
- blur = '6px',
+ children,
+ className,
+ variant,
+ duration = 0.4,
+ delay = 0,
+ yOffset = 6,
+ inView = false,
+ inViewMargin = "-50px",
+ blur = "6px",
}: BlurFadeProps) {
- const ref = useRef(null)
- const inViewResult = useInView(ref, { once: true, margin: inViewMargin })
- const isInView = !inView || inViewResult
- const defaultVariants: Variants = {
- hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
- visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
- }
- const combinedVariants = variant || defaultVariants
- return (
-
-
- {children}
-
-
- )
+ const ref = useRef(null);
+ const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
+ const isInView = !inView || inViewResult;
+ const defaultVariants: Variants = {
+ hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
+ visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
+ };
+ const combinedVariants = variant || defaultVariants;
+ return (
+
+
+ {children}
+
+
+ );
}
diff --git a/src/components/ui/blur-in.tsx b/src/components/ui/blur-in.tsx
index b9b1c4e..67f4355 100644
--- a/src/components/ui/blur-in.tsx
+++ b/src/components/ui/blur-in.tsx
@@ -1,37 +1,37 @@
-'use client'
-import { motion } from 'framer-motion'
-import { ny } from '@/lib/utils'
+"use client";
+import { motion } from "framer-motion";
+import { ny } from "@/lib/utils";
interface BlurIntProps {
- word: string
- className?: string
- variant?: {
- hidden: { filter: string, opacity: number }
- visible: { filter: string, opacity: number }
- }
- duration?: number
+ word: string;
+ className?: string;
+ variant?: {
+ hidden: { filter: string; opacity: number };
+ visible: { filter: string; opacity: number };
+ };
+ duration?: number;
}
function BlurIn({ word, className, variant, duration = 1 }: BlurIntProps) {
- const defaultVariants = {
- hidden: { filter: 'blur(10px)', opacity: 0 },
- visible: { filter: 'blur(0px)', opacity: 1 },
- }
- const combinedVariants = variant || defaultVariants
+ const defaultVariants = {
+ hidden: { filter: "blur(10px)", opacity: 0 },
+ visible: { filter: "blur(0px)", opacity: 1 },
+ };
+ const combinedVariants = variant || defaultVariants;
- return (
-
- {word}
-
- )
+ return (
+
+ {word}
+
+ );
}
-export default BlurIn
+export default BlurIn;
diff --git a/src/components/ui/border-beam.tsx b/src/components/ui/border-beam.tsx
index d114c64..944e8f7 100644
--- a/src/components/ui/border-beam.tsx
+++ b/src/components/ui/border-beam.tsx
@@ -1,49 +1,49 @@
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
interface BorderBeamProps {
- className?: string
- size?: number
- duration?: number
- borderWidth?: number
- anchor?: number
- colorFrom?: string
- colorTo?: string
- delay?: number
+ className?: string;
+ size?: number;
+ duration?: number;
+ borderWidth?: number;
+ anchor?: number;
+ colorFrom?: string;
+ colorTo?: string;
+ delay?: number;
}
export function BorderBeam({
- className,
- size = 200,
- duration = 15,
- anchor = 90,
- borderWidth = 1.5,
- colorFrom = '#ffaa40',
- colorTo = '#9c40ff',
- delay = 0,
+ className,
+ size = 200,
+ duration = 15,
+ anchor = 90,
+ borderWidth = 1.5,
+ colorFrom = "#ffaa40",
+ colorTo = "#9c40ff",
+ delay = 0,
}: BorderBeamProps) {
- return (
-
- )
+ // pseudo styles
+ "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
+ className,
+ )}
+ />
+ );
}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 8e96fe1..0b8cf3b 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,52 +5,52 @@ import { type VariantProps, cva } from "class-variance-authority";
import { ny } from "@/lib/utils";
const buttonVariants = cva(
- "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
- {
- variants: {
- variant: {
- default:
- "bg-primary text-primary-foreground shadow hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
- outline:
- "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground ",
- secondary:
- "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-12 px-8 py-4",
- sm: "h-8 rounded-md px-3 text-xs",
- lg: "h-10 rounded-md px-8",
- icon: "h-9 w-9",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- },
+ "inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+ {
+ variants: {
+ variant: {
+ default:
+ "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+ destructive:
+ "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+ outline:
+ "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground ",
+ secondary:
+ "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-12 px-8 py-4",
+ sm: "h-8 rounded-md px-3 text-xs",
+ lg: "h-10 rounded-md px-8",
+ icon: "h-9 w-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ },
);
export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean;
}
const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button";
- return (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-
-
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+
+
+
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-export { Checkbox }
+export { Checkbox };
diff --git a/src/components/ui/confetti.tsx b/src/components/ui/confetti.tsx
index 6a199ba..35058bf 100644
--- a/src/components/ui/confetti.tsx
+++ b/src/components/ui/confetti.tsx
@@ -1,119 +1,124 @@
-'use client'
-import confetti from 'canvas-confetti'
-import type { ReactNode } from 'react'
-import React, { createContext, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
+"use client";
+import confetti from "canvas-confetti";
+import type { ReactNode } from "react";
+import React, {
+ createContext,
+ forwardRef,
+ useCallback,
+ useEffect,
+ useImperativeHandle,
+ useMemo,
+ useRef,
+} from "react";
import type {
- GlobalOptions as ConfettiGlobalOptions,
- CreateTypes as ConfettiInstance,
- Options as ConfettiOptions,
-} from 'canvas-confetti'
-import { Button, ButtonProps } from './button'
+ GlobalOptions as ConfettiGlobalOptions,
+ CreateTypes as ConfettiInstance,
+ Options as ConfettiOptions,
+} from "canvas-confetti";
+import { Button, ButtonProps } from "./button";
interface Api {
- fire: (options?: ConfettiOptions) => void
+ fire: (options?: ConfettiOptions) => void;
}
-type Props = React.ComponentPropsWithRef<'canvas'> & {
- options?: ConfettiOptions
- globalOptions?: ConfettiGlobalOptions
- manualstart?: boolean
- children?: ReactNode
-}
+type Props = React.ComponentPropsWithRef<"canvas"> & {
+ options?: ConfettiOptions;
+ globalOptions?: ConfettiGlobalOptions;
+ manualstart?: boolean;
+ children?: ReactNode;
+};
-export type ConfettiRef = Api | null
+export type ConfettiRef = Api | null;
-const ConfettiContext = createContext({} as Api)
+const ConfettiContext = createContext({} as Api);
const Confetti = forwardRef((props, ref) => {
- const {
- options,
- globalOptions = { resize: true, useWorker: true },
- manualstart = false,
- children,
- ...rest
- } = props
- const instanceRef = useRef(null) // confetti instance
+ const {
+ options,
+ globalOptions = { resize: true, useWorker: true },
+ manualstart = false,
+ children,
+ ...rest
+ } = props;
+ const instanceRef = useRef(null); // confetti instance
- const canvasRef = useCallback(
- // https://react.dev/reference/react-dom/components/common#ref-callback
- // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
- (node: HTMLCanvasElement) => {
- if (node !== null) {
- // is mounted => create the confetti instance
- if (instanceRef.current)
- return // if not already created
- instanceRef.current = confetti.create(node, {
- ...globalOptions,
- resize: true,
- })
- }
- else {
- // is unmounted => reset and destroy instanceRef
- if (instanceRef.current) {
- instanceRef.current.reset()
- instanceRef.current = null
- }
- }
- },
- [globalOptions],
- )
+ const canvasRef = useCallback(
+ // https://react.dev/reference/react-dom/components/common#ref-callback
+ // https://reactjs.org/docs/refs-and-the-dom.html#callback-refs
+ (node: HTMLCanvasElement) => {
+ if (node !== null) {
+ // is mounted => create the confetti instance
+ if (instanceRef.current) return; // if not already created
+ instanceRef.current = confetti.create(node, {
+ ...globalOptions,
+ resize: true,
+ });
+ } else {
+ // is unmounted => reset and destroy instanceRef
+ if (instanceRef.current) {
+ instanceRef.current.reset();
+ instanceRef.current = null;
+ }
+ }
+ },
+ [globalOptions],
+ );
- // `fire` is a function that calls the instance() with `opts` merged with `options`
- const fire = useCallback(
- (opts = {}) => instanceRef.current?.({ ...options, ...opts }),
- [options],
- )
+ // `fire` is a function that calls the instance() with `opts` merged with `options`
+ const fire = useCallback(
+ (opts = {}) => instanceRef.current?.({ ...options, ...opts }),
+ [options],
+ );
- const api = useMemo(
- () => ({
- fire,
- }),
- [fire],
- )
+ const api = useMemo(
+ () => ({
+ fire,
+ }),
+ [fire],
+ );
- useImperativeHandle(ref, () => api, [api])
+ useImperativeHandle(ref, () => api, [api]);
- useEffect(() => {
- if (!manualstart)
- fire()
- }, [manualstart, fire])
+ useEffect(() => {
+ if (!manualstart) fire();
+ }, [manualstart, fire]);
- return (
-
-
- )
-})
+ return (
+
+
+ );
+});
interface ConfettiButtonProps extends ButtonProps {
- options?: ConfettiOptions &
- ConfettiGlobalOptions & { canvas?: HTMLCanvasElement }
- children?: React.ReactNode
+ options?: ConfettiOptions &
+ ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
+ children?: React.ReactNode;
}
function ConfettiButton({ options, children, ...props }: ConfettiButtonProps) {
- const handleClick = (event: React.MouseEvent) => {
- const rect = event.currentTarget.getBoundingClientRect()
- const x = rect.left + rect.width / 2
- const y = rect.top + rect.height / 2
- confetti({
- ...options,
- origin: {
- x: x / window.innerWidth,
- y: y / window.innerHeight,
- },
- })
- }
+ const handleClick = (event: React.MouseEvent) => {
+ const rect = event.currentTarget.getBoundingClientRect();
+ const x = rect.left + rect.width / 2;
+ const y = rect.top + rect.height / 2;
+ confetti({
+ ...options,
+ origin: {
+ x: x / window.innerWidth,
+ y: y / window.innerHeight,
+ },
+ });
+ };
- return (
-
- {children}
-
- )
+ return (
+
+ {children}
+
+ );
}
-export { Confetti, ConfettiButton }
+export { Confetti, ConfettiButton };
-export default Confetti
+export default Confetti;
diff --git a/src/components/ui/cool-mode.tsx b/src/components/ui/cool-mode.tsx
index a437586..b8bf1a9 100644
--- a/src/components/ui/cool-mode.tsx
+++ b/src/components/ui/cool-mode.tsx
@@ -1,239 +1,234 @@
-'use client'
-import type { ReactNode } from 'react'
-import React, { useEffect, useRef } from 'react'
+"use client";
+import type { ReactNode } from "react";
+import React, { useEffect, useRef } from "react";
export interface BaseParticle {
- element: HTMLElement | SVGSVGElement
- left: number
- size: number
- top: number
+ element: HTMLElement | SVGSVGElement;
+ left: number;
+ size: number;
+ top: number;
}
export interface BaseParticleOptions {
- particle?: string
- size?: number
+ particle?: string;
+ size?: number;
}
export interface CoolParticle extends BaseParticle {
- direction: number
- speedHorz: number
- speedUp: number
- spinSpeed: number
- spinVal: number
+ direction: number;
+ speedHorz: number;
+ speedUp: number;
+ spinSpeed: number;
+ spinVal: number;
}
export interface CoolParticleOptions extends BaseParticleOptions {
- particleCount?: number
- speedHorz?: number
- speedUp?: number
+ particleCount?: number;
+ speedHorz?: number;
+ speedUp?: number;
}
function getContainer() {
- const id = '_coolMode_effect'
- const existingContainer = document.getElementById(id)
+ const id = "_coolMode_effect";
+ const existingContainer = document.getElementById(id);
- if (existingContainer)
- return existingContainer
+ if (existingContainer) return existingContainer;
- const container = document.createElement('div')
- container.setAttribute('id', id)
- container.setAttribute(
- 'style',
- 'overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647',
- )
+ const container = document.createElement("div");
+ container.setAttribute("id", id);
+ container.setAttribute(
+ "style",
+ "overflow:hidden; position:fixed; height:100%; top:0; left:0; right:0; bottom:0; pointer-events:none; z-index:2147483647",
+ );
- document.body.appendChild(container)
+ document.body.appendChild(container);
- return container
+ return container;
}
-let instanceCounter = 0
+let instanceCounter = 0;
function applyParticleEffect(
- element: HTMLElement,
- options?: CoolParticleOptions,
+ element: HTMLElement,
+ options?: CoolParticleOptions,
): () => void {
- instanceCounter++
+ instanceCounter++;
- const defaultParticle = 'circle'
- const particleType = options?.particle || defaultParticle
- const sizes = [15, 20, 25, 35, 45]
- const limit = 45
+ const defaultParticle = "circle";
+ const particleType = options?.particle || defaultParticle;
+ const sizes = [15, 20, 25, 35, 45];
+ const limit = 45;
- let particles: CoolParticle[] = []
- let autoAddParticle = false
- let mouseX = 0
- let mouseY = 0
+ let particles: CoolParticle[] = [];
+ let autoAddParticle = false;
+ let mouseX = 0;
+ let mouseY = 0;
- const container = getContainer()
+ const container = getContainer();
- function generateParticle() {
- const size
- = options?.size || sizes[Math.floor(Math.random() * sizes.length)]
- const speedHorz = options?.speedHorz || Math.random() * 10
- const speedUp = options?.speedUp || Math.random() * 25
- const spinVal = Math.random() * 360
- const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1)
- const top = mouseY - size / 2
- const left = mouseX - size / 2
- const direction = Math.random() <= 0.5 ? -1 : 1
+ function generateParticle() {
+ const size =
+ options?.size || sizes[Math.floor(Math.random() * sizes.length)];
+ const speedHorz = options?.speedHorz || Math.random() * 10;
+ const speedUp = options?.speedUp || Math.random() * 25;
+ const spinVal = Math.random() * 360;
+ const spinSpeed = Math.random() * 35 * (Math.random() <= 0.5 ? -1 : 1);
+ const top = mouseY - size / 2;
+ const left = mouseX - size / 2;
+ const direction = Math.random() <= 0.5 ? -1 : 1;
- const particle = document.createElement('div')
+ const particle = document.createElement("div");
- if (particleType === 'circle') {
- const svgNS = 'http://www.w3.org/2000/svg'
- const circleSVG = document.createElementNS(svgNS, 'svg')
- const circle = document.createElementNS(svgNS, 'circle')
- circle.setAttributeNS(null, 'cx', (size / 2).toString())
- circle.setAttributeNS(null, 'cy', (size / 2).toString())
- circle.setAttributeNS(null, 'r', (size / 2).toString())
- circle.setAttributeNS(
- null,
- 'fill',
- `hsl(${Math.random() * 360}, 70%, 50%)`,
- )
+ if (particleType === "circle") {
+ const svgNS = "http://www.w3.org/2000/svg";
+ const circleSVG = document.createElementNS(svgNS, "svg");
+ const circle = document.createElementNS(svgNS, "circle");
+ circle.setAttributeNS(null, "cx", (size / 2).toString());
+ circle.setAttributeNS(null, "cy", (size / 2).toString());
+ circle.setAttributeNS(null, "r", (size / 2).toString());
+ circle.setAttributeNS(
+ null,
+ "fill",
+ `hsl(${Math.random() * 360}, 70%, 50%)`,
+ );
- circleSVG.appendChild(circle)
- circleSVG.setAttribute('width', size.toString())
- circleSVG.setAttribute('height', size.toString())
+ circleSVG.appendChild(circle);
+ circleSVG.setAttribute("width", size.toString());
+ circleSVG.setAttribute("height", size.toString());
- particle.appendChild(circleSVG)
- }
- else {
- particle.innerHTML = ` = ({ children, options }) => {
- const ref = useRef(null)
+ const ref = useRef(null);
- useEffect(() => {
- if (ref.current)
- return applyParticleEffect(ref.current, options)
- }, [options])
+ useEffect(() => {
+ if (ref.current) return applyParticleEffect(ref.current, options);
+ }, [options]);
- return React.cloneElement(children as React.ReactElement, { ref })
-}
+ return React.cloneElement(children as React.ReactElement, { ref });
+};
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 81886b1..a51402a 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,126 +1,126 @@
-'use client'
+"use client";
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
- {children}
-
- Close
-
-
-
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+
+
+ {children}
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
function DialogHeader({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) {
- return (
-
- )
+ return (
+
+ );
}
-DialogHeader.displayName = 'DialogHeader'
+DialogHeader.displayName = "DialogHeader";
function DialogFooter({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) {
- return (
-
- )
+ return (
+
+ );
}
-DialogFooter.displayName = 'DialogFooter'
+DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-
-
-
-
- )
+ return (
+
+
+
+
+
+
+ );
}
-export default DotPattern
+export default DotPattern;
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 14c0dc1..8f03b4c 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,205 +1,205 @@
-'use client'
+"use client";
-import * as React from 'react'
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import {
- CheckIcon,
- ChevronRightIcon,
- DotFilledIcon,
-} from '@radix-ui/react-icons'
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from "@radix-ui/react-icons";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuSubTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
>(({ className, inset, children, ...props }, ref) => (
-
- {children}
-
-))
-DropdownMenuSubTrigger.displayName
- = DropdownMenuPrimitive.SubTrigger.displayName
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, sideOffset = 4, ...props }, ref) => (
-
-
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
>(({ className, inset, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, checked, ...props }, ref) => (
-
-
-
-
-
- {children}
-
-))
-DropdownMenuCheckboxItem.displayName
- = DropdownMenuPrimitive.CheckboxItem.displayName
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
-
-
-
- {children}
-
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef & {
- inset?: boolean
- }
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
>(({ className, inset, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ) {
- return (
-
- {text}
-
- )
+ return (
+
+ {text}
+
+ );
}
diff --git a/src/components/ui/form.tsx b/src/components/ui/form.tsx
index f670443..0ffe9d9 100644
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@@ -1,189 +1,192 @@
-import * as React from 'react'
-import type * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'
-import { Controller, FormProvider, useFormContext, useFormState } from 'react-hook-form'
+import * as React from "react";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import type { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+import {
+ Controller,
+ FormProvider,
+ useFormContext,
+ useFormState,
+} from "react-hook-form";
-import { ny } from '@/lib/utils'
-import { Label } from '@/components/ui/label'
+import { ny } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
-const Form = FormProvider
+const Form = FormProvider;
interface FormFieldContextValue<
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
> {
- name: TName
+ name: TName;
}
const FormFieldContext = React.createContext(
- {} as FormFieldContextValue,
-)
+ {} as FormFieldContextValue,
+);
function FormField<
- TFieldValues extends FieldValues = FieldValues,
- TName extends FieldPath = FieldPath,
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
>({ ...props }: ControllerProps) {
- return (
-
-
- )
+ return (
+
+
+ );
}
function useFormField() {
- const fieldContext = React.useContext(FormFieldContext)
- const itemContext = React.useContext(FormItemContext)
- const { getFieldState, formState } = useFormContext()
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
- const fieldState = getFieldState(fieldContext.name, formState)
+ const fieldState = getFieldState(fieldContext.name, formState);
- if (!fieldContext)
- throw new Error('useFormField should be used within ')
+ if (!fieldContext)
+ throw new Error("useFormField should be used within ");
- const { id } = itemContext
+ const { id } = itemContext;
- return {
- id,
- name: fieldContext.name,
- formItemId: `${id}-form-item`,
- formDescriptionId: `${id}-form-item-description`,
- formMessageId: `${id}-form-item-message`,
- ...fieldState,
- }
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
}
interface FormItemContextValue {
- id: string
+ id: string;
}
const FormItemContext = React.createContext(
- {} as FormItemContextValue,
-)
+ {} as FormItemContextValue,
+);
const FormItem = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
+ HTMLDivElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const id = React.useId()
+ const id = React.useId();
- return (
-
-
-
- )
-})
-FormItem.displayName = 'FormItem'
+ return (
+
+
+
+ );
+});
+FormItem.displayName = "FormItem";
const FormLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => {
- const { error, formItemId } = useFormField()
+ const { error, formItemId } = useFormField();
- return (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ ...props }, ref) => {
- const { error, formItemId, formDescriptionId, formMessageId }
- = useFormField()
+ const { error, formItemId, formDescriptionId, formMessageId } =
+ useFormField();
- return (
-
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const { formDescriptionId } = useFormField()
+ const { formDescriptionId } = useFormField();
- return (
-
- )
-})
-FormDescription.displayName = 'FormDescription'
+ return (
+
+ );
+});
+FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, children, ...props }, ref) => {
- const { error, formMessageId } = useFormField()
- const body = error ? String(error?.message) : children
+ const { error, formMessageId } = useFormField();
+ const body = error ? String(error?.message) : children;
- if (!body)
- return null
+ if (!body) return null;
- return (
-
- {body}
-
- )
-})
-FormMessage.displayName = 'FormMessage'
+ return (
+
+ {body}
+
+ );
+});
+FormMessage.displayName = "FormMessage";
const FormGlobalError = React.forwardRef<
- HTMLParagraphElement,
- React.HTMLAttributes
+ HTMLParagraphElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => {
- const { errors } = useFormState()
- const rootError = errors.root
- if (!rootError)
- return null
+ const { errors } = useFormState();
+ const rootError = errors.root;
+ if (!rootError) return null;
- return (
-
- {rootError.message}
-
- )
-})
-FormGlobalError.displayName = 'FormGlobalError'
+ return (
+
+ {rootError.message}
+
+ );
+});
+FormGlobalError.displayName = "FormGlobalError";
export {
- useFormField,
- Form,
- FormItem,
- FormLabel,
- FormControl,
- FormDescription,
- FormMessage,
- FormGlobalError,
- FormField,
-}
+ useFormField,
+ Form,
+ FormItem,
+ FormLabel,
+ FormControl,
+ FormDescription,
+ FormMessage,
+ FormGlobalError,
+ FormField,
+};
diff --git a/src/components/ui/gradual-spacing.tsx b/src/components/ui/gradual-spacing.tsx
index c4b69a0..0ba08c2 100644
--- a/src/components/ui/gradual-spacing.tsx
+++ b/src/components/ui/gradual-spacing.tsx
@@ -1,44 +1,44 @@
-'use client'
+"use client";
-import type { Variants } from 'framer-motion'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ny } from '@/lib/utils'
+import type { Variants } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+import { ny } from "@/lib/utils";
interface GradualSpacingProps {
- text: string
- duration?: number
- delayMultiple?: number
- framerProps?: Variants
- className?: string
+ text: string;
+ duration?: number;
+ delayMultiple?: number;
+ framerProps?: Variants;
+ className?: string;
}
export default function GradualSpacing({
- text,
- duration = 0.5,
- delayMultiple = 0.04,
- framerProps = {
- hidden: { opacity: 0, x: -20 },
- visible: { opacity: 1, x: 0 },
- },
- className,
+ text,
+ duration = 0.5,
+ delayMultiple = 0.04,
+ framerProps = {
+ hidden: { opacity: 0, x: -20 },
+ visible: { opacity: 1, x: 0 },
+ },
+ className,
}: GradualSpacingProps) {
- return (
-
-
- {text.split('').map((char, i) => (
-
- {char === ' ' ? : char}
-
- ))}
-
-
+
+ {text.split("").map((char, i) => (
+
+ {char === " " ? : char}
+
+ ))}
+
+
-
-
-
-
-
- {squares.map(([x, y]) => (
-
- )}
-
- )
+ return (
+
+
+
+
+
+
+ {squares.map(([x, y]) => (
+
+ )}
+
+ );
}
-export default GridPattern
+export default GridPattern;
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index b80c71c..eeddce6 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,26 +1,26 @@
-'use client'
+"use client";
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
const labelVariants = cva(
- 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-)
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
const Label = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef &
- VariantProps
+ React.ElementRef,
+ React.ComponentPropsWithoutRef &
+ VariantProps
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- {children}
-
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+ {children}
+
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
const NavigationMenuList = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
- {children}{" "}
-
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+ {children}{" "}
+
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
const NavigationMenuContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-))
+
+
+));
NavigationMenuViewport.displayName =
- NavigationMenuPrimitive.Viewport.displayName
+ NavigationMenuPrimitive.Viewport.displayName;
const NavigationMenuIndicator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-
-))
+
+
+
+));
NavigationMenuIndicator.displayName =
- NavigationMenuPrimitive.Indicator.displayName
+ NavigationMenuPrimitive.Indicator.displayName;
export {
- navigationMenuTriggerStyle,
- NavigationMenu,
- NavigationMenuList,
- NavigationMenuItem,
- NavigationMenuContent,
- NavigationMenuTrigger,
- NavigationMenuLink,
- NavigationMenuIndicator,
- NavigationMenuViewport,
-}
+ navigationMenuTriggerStyle,
+ NavigationMenu,
+ NavigationMenuList,
+ NavigationMenuItem,
+ NavigationMenuContent,
+ NavigationMenuTrigger,
+ NavigationMenuLink,
+ NavigationMenuIndicator,
+ NavigationMenuViewport,
+};
diff --git a/src/components/ui/neon-gradient-card.tsx b/src/components/ui/neon-gradient-card.tsx
index 1d6a15c..863596a 100644
--- a/src/components/ui/neon-gradient-card.tsx
+++ b/src/components/ui/neon-gradient-card.tsx
@@ -1,144 +1,144 @@
-'use client'
+"use client";
-import type { CSSProperties, ReactElement, ReactNode } from 'react'
-import { useEffect, useRef, useState } from 'react'
-import { ny } from '@/lib/utils'
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import { ny } from "@/lib/utils";
interface NeonColorsProps {
- firstColor: string
- secondColor: string
+ firstColor: string;
+ secondColor: string;
}
interface NeonGradientCardProps {
- /**
- * @default
- * @type ReactElement
- * @description
- * The component to be rendered as the card
- */
- as?: ReactElement
- /**
- * @default ""
- * @type string
- * @description
- * The className of the card
- */
- className?: string
+ /**
+ * @default
+ * @type ReactElement
+ * @description
+ * The component to be rendered as the card
+ */
+ as?: ReactElement;
+ /**
+ * @default ""
+ * @type string
+ * @description
+ * The className of the card
+ */
+ className?: string;
- /**
- * @default ""
- * @type ReactNode
- * @description
- * The children of the card
- */
- children?: ReactNode
+ /**
+ * @default ""
+ * @type ReactNode
+ * @description
+ * The children of the card
+ */
+ children?: ReactNode;
- /**
- * @default 5
- * @type number
- * @description
- * The size of the border in pixels
- */
- borderSize?: number
+ /**
+ * @default 5
+ * @type number
+ * @description
+ * The size of the border in pixels
+ */
+ borderSize?: number;
- /**
- * @default 20
- * @type number
- * @description
- * The size of the radius in pixels
- */
- borderRadius?: number
+ /**
+ * @default 20
+ * @type number
+ * @description
+ * The size of the radius in pixels
+ */
+ borderRadius?: number;
- /**
- * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
- * @type string
- * @description
- * The colors of the neon gradient
- */
- neonColors?: NeonColorsProps
+ /**
+ * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }"
+ * @type string
+ * @description
+ * The colors of the neon gradient
+ */
+ neonColors?: NeonColorsProps;
- [key: string]: any
+ [key: string]: any;
}
const NeonGradientCard: React.FC = ({
- className,
- children,
- borderSize = 2,
- borderRadius = 20,
- neonColors = {
- firstColor: '#ff00aa',
- secondColor: '#00FFF1',
- },
- ...props
+ className,
+ children,
+ borderSize = 2,
+ borderRadius = 20,
+ neonColors = {
+ firstColor: "#ff00aa",
+ secondColor: "#00FFF1",
+ },
+ ...props
}) => {
- const containerRef = useRef(null)
- const [dimensions, setDimensions] = useState({ width: 0, height: 0 })
+ const containerRef = useRef(null);
+ const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
- useEffect(() => {
- const updateDimensions = () => {
- if (containerRef.current) {
- const { offsetWidth, offsetHeight } = containerRef.current
- setDimensions({ width: offsetWidth, height: offsetHeight })
- }
- }
+ useEffect(() => {
+ const updateDimensions = () => {
+ if (containerRef.current) {
+ const { offsetWidth, offsetHeight } = containerRef.current;
+ setDimensions({ width: offsetWidth, height: offsetHeight });
+ }
+ };
- updateDimensions()
- window.addEventListener('resize', updateDimensions)
+ updateDimensions();
+ window.addEventListener("resize", updateDimensions);
- return () => {
- window.removeEventListener('resize', updateDimensions)
- }
- }, [])
+ return () => {
+ window.removeEventListener("resize", updateDimensions);
+ };
+ }, []);
- useEffect(() => {
- if (containerRef.current) {
- const { offsetWidth, offsetHeight } = containerRef.current
- setDimensions({ width: offsetWidth, height: offsetHeight })
- }
- }, [children])
+ useEffect(() => {
+ if (containerRef.current) {
+ const { offsetWidth, offsetHeight } = containerRef.current;
+ setDimensions({ width: offsetWidth, height: offsetHeight });
+ }
+ }, [children]);
- return (
-
- )
-}
+ return (
+
+ );
+};
-export { NeonGradientCard }
+export { NeonGradientCard };
diff --git a/src/components/ui/orbiting-circles.tsx b/src/components/ui/orbiting-circles.tsx
index 50af26d..2a544a4 100644
--- a/src/components/ui/orbiting-circles.tsx
+++ b/src/components/ui/orbiting-circles.tsx
@@ -1,57 +1,57 @@
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
export default function OrbitingCircles({
- className,
- children,
- reverse,
- duration = 20,
- delay = 10,
- radius = 50,
- path = true,
+ className,
+ children,
+ reverse,
+ duration = 20,
+ delay = 10,
+ radius = 50,
+ path = true,
}: {
- className?: string
- children?: React.ReactNode
- reverse?: boolean
- duration?: number
- delay?: number
- radius?: number
- path?: boolean
+ className?: string;
+ children?: React.ReactNode;
+ reverse?: boolean;
+ duration?: number;
+ delay?: number;
+ radius?: number;
+ path?: boolean;
}) {
- return (
- <>
- {path && (
-
-
- )}
+ return (
+ <>
+ {path && (
+
+
+ )}
-
- {children}
-
-
- )
+
+ {children}
+
+
+ );
}
diff --git a/src/components/ui/particles.tsx b/src/components/ui/particles.tsx
index 052bafd..cb46b31 100644
--- a/src/components/ui/particles.tsx
+++ b/src/components/ui/particles.tsx
@@ -1,271 +1,272 @@
-'use client'
+"use client";
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from "react";
interface MousePosition {
- x: number
- y: number
+ x: number;
+ y: number;
}
function MousePosition(): MousePosition {
- const [mousePosition, setMousePosition] = useState({
- x: 0,
- y: 0,
- })
+ const [mousePosition, setMousePosition] = useState({
+ x: 0,
+ y: 0,
+ });
- useEffect(() => {
- const handleMouseMove = (event: MouseEvent) => {
- setMousePosition({ x: event.clientX, y: event.clientY })
- }
+ useEffect(() => {
+ const handleMouseMove = (event: MouseEvent) => {
+ setMousePosition({ x: event.clientX, y: event.clientY });
+ };
- window.addEventListener('mousemove', handleMouseMove)
+ window.addEventListener("mousemove", handleMouseMove);
- return () => {
- window.removeEventListener('mousemove', handleMouseMove)
- }
- }, [])
+ return () => {
+ window.removeEventListener("mousemove", handleMouseMove);
+ };
+ }, []);
- return mousePosition
+ return mousePosition;
}
interface ParticlesProps {
- className?: string
- quantity?: number
- staticity?: number
- ease?: number
- size?: number
- refresh?: boolean
- color?: string
- vx?: number
- vy?: number
+ className?: string;
+ quantity?: number;
+ staticity?: number;
+ ease?: number;
+ size?: number;
+ refresh?: boolean;
+ color?: string;
+ vx?: number;
+ vy?: number;
}
function hexToRgb(hex: string): number[] {
- hex = hex.replace('#', '')
- const hexInt = Number.parseInt(hex, 16)
- const red = (hexInt >> 16) & 255
- const green = (hexInt >> 8) & 255
- const blue = hexInt & 255
- return [red, green, blue]
+ hex = hex.replace("#", "");
+ const hexInt = Number.parseInt(hex, 16);
+ const red = (hexInt >> 16) & 255;
+ const green = (hexInt >> 8) & 255;
+ const blue = hexInt & 255;
+ return [red, green, blue];
}
const Particles: React.FC = ({
- className = '',
- quantity = 100,
- staticity = 50,
- ease = 50,
- size = 0.4,
- refresh = false,
- color = '#ffffff',
- vx = 0,
- vy = 0,
+ className = "",
+ quantity = 100,
+ staticity = 50,
+ ease = 50,
+ size = 0.4,
+ refresh = false,
+ color = "#ffffff",
+ vx = 0,
+ vy = 0,
}) => {
- const canvasRef = useRef(null)
- const canvasContainerRef = useRef(null)
- const context = useRef(null)
- const circles = useRef([])
- const mousePosition = MousePosition()
- const mouse = useRef<{ x: number, y: number }>({ x: 0, y: 0 })
- const canvasSize = useRef<{ w: number, h: number }>({ w: 0, h: 0 })
- const dpr = typeof window !== 'undefined' ? window.devicePixelRatio : 1
+ const canvasRef = useRef(null);
+ const canvasContainerRef = useRef(null);
+ const context = useRef(null);
+ const circles = useRef([]);
+ const mousePosition = MousePosition();
+ const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+ const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+ const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
- useEffect(() => {
- if (canvasRef.current) {
- context.current = canvasRef.current.getContext('2d')
- }
- initCanvas()
- animate()
- window.addEventListener('resize', initCanvas)
+ useEffect(() => {
+ if (canvasRef.current) {
+ context.current = canvasRef.current.getContext("2d");
+ }
+ initCanvas();
+ animate();
+ window.addEventListener("resize", initCanvas);
- return () => {
- window.removeEventListener('resize', initCanvas)
- }
- }, [color])
+ return () => {
+ window.removeEventListener("resize", initCanvas);
+ };
+ }, [color]);
- useEffect(() => {
- onMouseMove()
- }, [mousePosition.x, mousePosition.y])
+ useEffect(() => {
+ onMouseMove();
+ }, [mousePosition.x, mousePosition.y]);
- useEffect(() => {
- initCanvas()
- }, [refresh])
+ useEffect(() => {
+ initCanvas();
+ }, [refresh]);
- const initCanvas = () => {
- resizeCanvas()
- drawParticles()
- }
+ const initCanvas = () => {
+ resizeCanvas();
+ drawParticles();
+ };
- const onMouseMove = () => {
- if (canvasRef.current) {
- const rect = canvasRef.current.getBoundingClientRect()
- const { w, h } = canvasSize.current
- const x = mousePosition.x - rect.left - w / 2
- const y = mousePosition.y - rect.top - h / 2
- const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
- if (inside) {
- mouse.current.x = x
- mouse.current.y = y
- }
- }
- }
+ const onMouseMove = () => {
+ if (canvasRef.current) {
+ const rect = canvasRef.current.getBoundingClientRect();
+ const { w, h } = canvasSize.current;
+ const x = mousePosition.x - rect.left - w / 2;
+ const y = mousePosition.y - rect.top - h / 2;
+ const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+ if (inside) {
+ mouse.current.x = x;
+ mouse.current.y = y;
+ }
+ }
+ };
- interface Circle {
- x: number
- y: number
- translateX: number
- translateY: number
- size: number
- alpha: number
- targetAlpha: number
- dx: number
- dy: number
- magnetism: number
- }
+ interface Circle {
+ x: number;
+ y: number;
+ translateX: number;
+ translateY: number;
+ size: number;
+ alpha: number;
+ targetAlpha: number;
+ dx: number;
+ dy: number;
+ magnetism: number;
+ }
- const resizeCanvas = () => {
- if (canvasContainerRef.current && canvasRef.current && context.current) {
- circles.current.length = 0
- canvasSize.current.w = canvasContainerRef.current.offsetWidth
- canvasSize.current.h = canvasContainerRef.current.offsetHeight
- canvasRef.current.width = canvasSize.current.w * dpr
- canvasRef.current.height = canvasSize.current.h * dpr
- canvasRef.current.style.width = `${canvasSize.current.w}px`
- canvasRef.current.style.height = `${canvasSize.current.h}px`
- context.current.scale(dpr, dpr)
- }
- }
+ const resizeCanvas = () => {
+ if (canvasContainerRef.current && canvasRef.current && context.current) {
+ circles.current.length = 0;
+ canvasSize.current.w = canvasContainerRef.current.offsetWidth;
+ canvasSize.current.h = canvasContainerRef.current.offsetHeight;
+ canvasRef.current.width = canvasSize.current.w * dpr;
+ canvasRef.current.height = canvasSize.current.h * dpr;
+ canvasRef.current.style.width = `${canvasSize.current.w}px`;
+ canvasRef.current.style.height = `${canvasSize.current.h}px`;
+ context.current.scale(dpr, dpr);
+ }
+ };
- const circleParams = (): Circle => {
- const x = Math.floor(Math.random() * canvasSize.current.w)
- const y = Math.floor(Math.random() * canvasSize.current.h)
- const translateX = 0
- const translateY = 0
- const pSize = Math.floor(Math.random() * 2) + size
- const alpha = 0
- const targetAlpha = Number.parseFloat((Math.random() * 0.6 + 0.1).toFixed(1))
- const dx = (Math.random() - 0.5) * 0.1
- const dy = (Math.random() - 0.5) * 0.1
- const magnetism = 0.1 + Math.random() * 4
- return {
- x,
- y,
- translateX,
- translateY,
- size: pSize,
- alpha,
- targetAlpha,
- dx,
- dy,
- magnetism,
- }
- }
+ const circleParams = (): Circle => {
+ const x = Math.floor(Math.random() * canvasSize.current.w);
+ const y = Math.floor(Math.random() * canvasSize.current.h);
+ const translateX = 0;
+ const translateY = 0;
+ const pSize = Math.floor(Math.random() * 2) + size;
+ const alpha = 0;
+ const targetAlpha = Number.parseFloat(
+ (Math.random() * 0.6 + 0.1).toFixed(1),
+ );
+ const dx = (Math.random() - 0.5) * 0.1;
+ const dy = (Math.random() - 0.5) * 0.1;
+ const magnetism = 0.1 + Math.random() * 4;
+ return {
+ x,
+ y,
+ translateX,
+ translateY,
+ size: pSize,
+ alpha,
+ targetAlpha,
+ dx,
+ dy,
+ magnetism,
+ };
+ };
- const rgb = hexToRgb(color)
+ const rgb = hexToRgb(color);
- const drawCircle = (circle: Circle, update = false) => {
- if (context.current) {
- const { x, y, translateX, translateY, size, alpha } = circle
- context.current.translate(translateX, translateY)
- context.current.beginPath()
- context.current.arc(x, y, size, 0, 2 * Math.PI)
- context.current.fillStyle = `rgba(${rgb.join(', ')}, ${alpha})`
- context.current.fill()
- context.current.setTransform(dpr, 0, 0, dpr, 0, 0)
+ const drawCircle = (circle: Circle, update = false) => {
+ if (context.current) {
+ const { x, y, translateX, translateY, size, alpha } = circle;
+ context.current.translate(translateX, translateY);
+ context.current.beginPath();
+ context.current.arc(x, y, size, 0, 2 * Math.PI);
+ context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`;
+ context.current.fill();
+ context.current.setTransform(dpr, 0, 0, dpr, 0, 0);
- if (!update) {
- circles.current.push(circle)
- }
- }
- }
+ if (!update) {
+ circles.current.push(circle);
+ }
+ }
+ };
- const clearContext = () => {
- if (context.current) {
- context.current.clearRect(
- 0,
- 0,
- canvasSize.current.w,
- canvasSize.current.h,
- )
- }
- }
+ const clearContext = () => {
+ if (context.current) {
+ context.current.clearRect(
+ 0,
+ 0,
+ canvasSize.current.w,
+ canvasSize.current.h,
+ );
+ }
+ };
- const drawParticles = () => {
- clearContext()
- const particleCount = quantity
- for (let i = 0; i < particleCount; i++) {
- const circle = circleParams()
- drawCircle(circle)
- }
- }
+ const drawParticles = () => {
+ clearContext();
+ const particleCount = quantity;
+ for (let i = 0; i < particleCount; i++) {
+ const circle = circleParams();
+ drawCircle(circle);
+ }
+ };
- const remapValue = (
- value: number,
- start1: number,
- end1: number,
- start2: number,
- end2: number,
- ): number => {
- const remapped
- = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
- return remapped > 0 ? remapped : 0
- }
+ const remapValue = (
+ value: number,
+ start1: number,
+ end1: number,
+ start2: number,
+ end2: number,
+ ): number => {
+ const remapped =
+ ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+ return remapped > 0 ? remapped : 0;
+ };
- const animate = () => {
- clearContext()
- circles.current.forEach((circle: Circle, i: number) => {
- // Handle the alpha value
- const edge = [
- circle.x + circle.translateX - circle.size, // distance from left edge
- canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
- circle.y + circle.translateY - circle.size, // distance from top edge
- canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
- ]
- const closestEdge = edge.reduce((a, b) => Math.min(a, b))
- const remapClosestEdge = Number.parseFloat(
- remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
- )
- if (remapClosestEdge > 1) {
- circle.alpha += 0.02
- if (circle.alpha > circle.targetAlpha) {
- circle.alpha = circle.targetAlpha
- }
- }
- else {
- circle.alpha = circle.targetAlpha * remapClosestEdge
- }
- circle.x += circle.dx + vx
- circle.y += circle.dy + vy
- circle.translateX
- += (mouse.current.x / (staticity / circle.magnetism) - circle.translateX)
- / ease
- circle.translateY
- += (mouse.current.y / (staticity / circle.magnetism) - circle.translateY)
- / ease
+ const animate = () => {
+ clearContext();
+ circles.current.forEach((circle: Circle, i: number) => {
+ // Handle the alpha value
+ const edge = [
+ circle.x + circle.translateX - circle.size, // distance from left edge
+ canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge
+ circle.y + circle.translateY - circle.size, // distance from top edge
+ canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
+ ];
+ const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+ const remapClosestEdge = Number.parseFloat(
+ remapValue(closestEdge, 0, 20, 0, 1).toFixed(2),
+ );
+ if (remapClosestEdge > 1) {
+ circle.alpha += 0.02;
+ if (circle.alpha > circle.targetAlpha) {
+ circle.alpha = circle.targetAlpha;
+ }
+ } else {
+ circle.alpha = circle.targetAlpha * remapClosestEdge;
+ }
+ circle.x += circle.dx + vx;
+ circle.y += circle.dy + vy;
+ circle.translateX +=
+ (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) /
+ ease;
+ circle.translateY +=
+ (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) /
+ ease;
- drawCircle(circle, true)
+ drawCircle(circle, true);
- // circle gets out of the canvas
- if (
- circle.x < -circle.size
- || circle.x > canvasSize.current.w + circle.size
- || circle.y < -circle.size
- || circle.y > canvasSize.current.h + circle.size
- ) {
- // remove the circle from the array
- circles.current.splice(i, 1)
- // create a new circle
- const newCircle = circleParams()
- drawCircle(newCircle)
- // update the circle position
- }
- })
- window.requestAnimationFrame(animate)
- }
+ // circle gets out of the canvas
+ if (
+ circle.x < -circle.size ||
+ circle.x > canvasSize.current.w + circle.size ||
+ circle.y < -circle.size ||
+ circle.y > canvasSize.current.h + circle.size
+ ) {
+ // remove the circle from the array
+ circles.current.splice(i, 1);
+ // create a new circle
+ const newCircle = circleParams();
+ drawCircle(newCircle);
+ // update the circle position
+ }
+ });
+ window.requestAnimationFrame(animate);
+ };
- return (
-
-
- )
-}
+ return (
+
+
+ );
+};
-export default Particles
+export default Particles;
diff --git a/src/components/ui/pulsating-button.tsx b/src/components/ui/pulsating-button.tsx
index 38fbbba..c0926ae 100644
--- a/src/components/ui/pulsating-button.tsx
+++ b/src/components/ui/pulsating-button.tsx
@@ -1,78 +1,76 @@
-'use client'
+"use client";
-import React from 'react'
+import React from "react";
interface PulsatingButtonProps {
- text: string
- pulseColor: string
- backgroundColor: string
- textColor: string
- animationDuration: string
- buttonWidth: string
- buttonHeight: string
+ text: string;
+ pulseColor: string;
+ backgroundColor: string;
+ textColor: string;
+ animationDuration: string;
+ buttonWidth: string;
+ buttonHeight: string;
}
export const PulsatingButton: React.FC = ({
- text,
- pulseColor,
- backgroundColor,
- textColor,
- animationDuration,
- buttonWidth,
- buttonHeight,
+ text,
+ pulseColor,
+ backgroundColor,
+ textColor,
+ animationDuration,
+ buttonWidth,
+ buttonHeight,
}) => {
- const pulseKeyframes = {
- '--tw-pulse-color': pulseColor,
- 'animation': `pulse ${animationDuration} linear infinite`,
- }
+ const pulseKeyframes = {
+ "--tw-pulse-color": pulseColor,
+ animation: `pulse ${animationDuration} linear infinite`,
+ };
- return (
-
- )
-}
+ return (
+
+ );
+};
-export default PulsatingButton
+export default PulsatingButton;
diff --git a/src/components/ui/radial-gradient.tsx b/src/components/ui/radial-gradient.tsx
index 20987f7..2df5fec 100644
--- a/src/components/ui/radial-gradient.tsx
+++ b/src/components/ui/radial-gradient.tsx
@@ -1,77 +1,77 @@
-import type { CSSProperties } from 'react'
+import type { CSSProperties } from "react";
-type Type = 'circle' | 'ellipse'
+type Type = "circle" | "ellipse";
type Origin =
- | 'center'
- | 'top'
- | 'bottom'
- | 'left'
- | 'right'
- | 'top left'
- | 'top right'
- | 'bottom left'
- | 'bottom right'
+ | "center"
+ | "top"
+ | "bottom"
+ | "left"
+ | "right"
+ | "top left"
+ | "top right"
+ | "bottom left"
+ | "bottom right";
interface RadialProps {
- /**
- * The type of radial gradient
- * @default circle
- * @type string
- */
- type?: Type
- /**
- * The color to transition from
- * @default #00000000
- * @type string
- */
- from?: string
+ /**
+ * The type of radial gradient
+ * @default circle
+ * @type string
+ */
+ type?: Type;
+ /**
+ * The color to transition from
+ * @default #00000000
+ * @type string
+ */
+ from?: string;
- /**
- * The color to transition to
- * @default #290A5C
- * @type string
- */
- to?: string
+ /**
+ * The color to transition to
+ * @default #290A5C
+ * @type string
+ */
+ to?: string;
- /**
- * The size of the gradient in pixels
- * @default 300
- * @type number
- */
- size?: number
+ /**
+ * The size of the gradient in pixels
+ * @default 300
+ * @type number
+ */
+ size?: number;
- /**
- * The origin of the gradient
- * @default center
- * @type string
- */
- origin?: Origin
+ /**
+ * The origin of the gradient
+ * @default center
+ * @type string
+ */
+ origin?: Origin;
- /**
- * The class name to apply to the gradient
- * @default ""
- * @type string
- */
- className?: string
+ /**
+ * The class name to apply to the gradient
+ * @default ""
+ * @type string
+ */
+ className?: string;
}
function RadialGradient({
- type = 'circle',
- from = 'rgba(120,119,198,0.3)',
- to = 'hsla(0, 0%, 0%, 0)',
- size = 300,
- origin = 'center',
- className,
+ type = "circle",
+ from = "rgba(120,119,198,0.3)",
+ to = "hsla(0, 0%, 0%, 0)",
+ size = 300,
+ origin = "center",
+ className,
}: RadialProps) {
- const styles: CSSProperties = {
- position: 'absolute',
- pointerEvents: 'none',
- inset: 0,
- backgroundImage: `radial-gradient(${type} ${size}px at ${origin}, ${from}, ${to})`,
- }
+ const styles: CSSProperties = {
+ position: "absolute",
+ pointerEvents: "none",
+ inset: 0,
+ backgroundImage: `radial-gradient(${type} ${size}px at ${origin}, ${from}, ${to})`,
+ };
- return
+ return
;
}
-export default RadialGradient
+export default RadialGradient;
diff --git a/src/components/ui/retro-grid.tsx b/src/components/ui/retro-grid.tsx
index f66bec9..4257726 100644
--- a/src/components/ui/retro-grid.tsx
+++ b/src/components/ui/retro-grid.tsx
@@ -1,32 +1,32 @@
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
export default function RetroGrid({ className }: { className?: string }) {
- return (
-
- {/* Grid */}
-
-
+ {/* Grid */}
+
+ // Dark styles
+ "dark:[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]",
+ )}
+ />
+
- {/* Background Gradient */}
-
-
- )
+ {/* Background Gradient */}
+
+
,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
- {children}
-
-
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+
+ {children}
+
+
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, orientation = 'vertical', ...props }, ref) => (
-
-
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, orientation = "vertical", ...props }, ref) => (
+
+
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 0472d28..af93219 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,168 +1,167 @@
-'use client'
+"use client";
-import * as React from 'react'
+import * as React from "react";
import {
- CaretSortIcon,
- CheckIcon,
- ChevronDownIcon,
- ChevronUpIcon,
-} from '@radix-ui/react-icons'
-import * as SelectPrimitive from '@radix-ui/react-select'
+ CaretSortIcon,
+ CheckIcon,
+ ChevronDownIcon,
+ ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
- span]:line-clamp-1 [&>span]:text-left',
- className,
- )}
- onPointerDown={(e) => {
- if (e.pointerType === 'touch')
- e.preventDefault()
- }}
- {...props}
- >
- {children}
-
-
-
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+ span]:line-clamp-1 [&>span]:text-left",
+ className,
+ )}
+ onPointerDown={(e) => {
+ if (e.pointerType === "touch") e.preventDefault();
+ }}
+ {...props}
+ >
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
-))
-SelectScrollDownButton.displayName
- = SelectPrimitive.ScrollDownButton.displayName
+
+
+));
+SelectScrollDownButton.displayName =
+ SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, children, position = 'popper', ...props }, ref) => (
-
-
-
- {children}
-
-
-
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = "popper", ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, children, ...props }, ref) => (
-
-
-
-
-
- {children}
-
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- VariantProps {}
+ extends React.ComponentPropsWithoutRef,
+ VariantProps {}
const SheetContent = React.forwardRef<
- React.ElementRef,
- SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
-
-
-
- Close
-
- {children}
-
-
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+ Close
+
+ {children}
+
+
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
function SheetHeader({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) {
- return (
-
- )
+ return (
+
+ );
}
-SheetHeader.displayName = 'SheetHeader'
+SheetHeader.displayName = "SheetHeader";
function SheetFooter({
- className,
- ...props
+ className,
+ ...props
}: React.HTMLAttributes) {
- return (
-
- )
+ return (
+
+ );
}
-SheetFooter.displayName = 'SheetFooter'
+SheetFooter.displayName = "SheetFooter";
const SheetTitle = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ,
- React.ComponentPropsWithoutRef
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
-
- {text}
-
-
-
-
- )
+function ShinyButton({ text = "shiny-button" }) {
+ return (
+
+
+ {text}
+
+
+ );
}
-export default ShinyButton
+export default ShinyButton;
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index d3d6189..427ab1f 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -1,136 +1,189 @@
-'use client'
+"use client";
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
-interface SliderProps extends React.ComponentPropsWithoutRef {
- showSteps?: 'none' | 'half' | 'full'
- formatLabel?: (value: number) => string
- formatLabelSide?: string
+interface SliderProps
+ extends React.ComponentPropsWithoutRef {
+ showSteps?: "none" | "half" | "full";
+ formatLabel?: (value: number) => string;
+ formatLabelSide?: string;
}
const Slider = React.forwardRef<
- React.ElementRef,
- SliderProps
->(({ className, showSteps = 'none', formatLabel, formatLabelSide = 'top', ...props }, ref) => {
- const { min = 0, max = 100, step = 1, orientation = 'horizontal', value, defaultValue, onValueChange } = props
- const [hoveredThumbIndex, setHoveredThumbIndex] = React.useState(false)
- const numberOfSteps = Math.floor((max - min) / step)
- const stepLines = Array.from({ length: numberOfSteps }, (_, index) => index * step + min)
+ React.ElementRef,
+ SliderProps
+>(
+ (
+ {
+ className,
+ showSteps = "none",
+ formatLabel,
+ formatLabelSide = "top",
+ ...props
+ },
+ ref,
+ ) => {
+ const {
+ min = 0,
+ max = 100,
+ step = 1,
+ orientation = "horizontal",
+ value,
+ defaultValue,
+ onValueChange,
+ } = props;
+ const [hoveredThumbIndex, setHoveredThumbIndex] =
+ React.useState(false);
+ const numberOfSteps = Math.floor((max - min) / step);
+ const stepLines = Array.from(
+ { length: numberOfSteps },
+ (_, index) => index * step + min,
+ );
- const initialValue = Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max])
- const [localValues, setLocalValues] = React.useState(initialValue)
+ const initialValue = Array.isArray(value)
+ ? value
+ : Array.isArray(defaultValue)
+ ? defaultValue
+ : [min, max];
+ const [localValues, setLocalValues] =
+ React.useState(initialValue);
- React.useEffect(() => {
- if (!isEqual(value, localValues))
- setLocalValues(Array.isArray(value) ? value : (Array.isArray(defaultValue) ? defaultValue : [min, max]))
- }, [min, max, value])
+ React.useEffect(() => {
+ if (!isEqual(value, localValues))
+ setLocalValues(
+ Array.isArray(value)
+ ? value
+ : Array.isArray(defaultValue)
+ ? defaultValue
+ : [min, max],
+ );
+ }, [min, max, value]);
- const handleValueChange = (newValues: number[]) => {
- setLocalValues(newValues)
- if (onValueChange)
- onValueChange(newValues)
- }
+ const handleValueChange = (newValues: number[]) => {
+ setLocalValues(newValues);
+ if (onValueChange) onValueChange(newValues);
+ };
- function isEqual(array1: number[] | undefined, array2: number[] | undefined) {
- array1 = array1 ?? []
- array2 = array2 ?? []
+ function isEqual(
+ array1: number[] | undefined,
+ array2: number[] | undefined,
+ ) {
+ array1 = array1 ?? [];
+ array2 = array2 ?? [];
- if (array1.length !== array2.length)
- return false
+ if (array1.length !== array2.length) return false;
- for (let i = 0; i < array1.length; i++) {
- if (array1[i] !== array2[i])
- return false
- }
+ for (let i = 0; i < array1.length; i++) {
+ if (array1[i] !== array2[i]) return false;
+ }
- return true
- }
+ return true;
+ }
- return (
- handleValueChange(value)}
- {...props}
- onFocus={() => setHoveredThumbIndex(true)}
- onBlur={() => setHoveredThumbIndex(false)}
- >
-
- handleValueChange(value)}
+ {...props}
+ onFocus={() => setHoveredThumbIndex(true)}
+ onBlur={() => setHoveredThumbIndex(false)}
+ >
+
+
- )
- })}
+ const positionPercentage = ((value - min) / (max - min)) * 100;
+ const adjustedPosition = 50 + (positionPercentage - 50) * 0.96;
+ return (
+
+ );
+ })}
+
+ {localValues.map((numberStep, index) => (
+
+ {hoveredThumbIndex && formatLabel && (
+
+ {formatLabel(numberStep)}
+
+ )}
+
+ ))}
+
+ );
+ },
+);
-
- {localValues.map((numberStep, index) => (
-
- {hoveredThumbIndex && formatLabel && (
-
- {formatLabel(numberStep)}
-
- )}
-
- ))}
-
- )
-})
+Slider.displayName = SliderPrimitive.Root.displayName;
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }
+export { Slider };
diff --git a/src/components/ui/sparkles-text.tsx b/src/components/ui/sparkles-text.tsx
index 2290115..70a17f8 100644
--- a/src/components/ui/sparkles-text.tsx
+++ b/src/components/ui/sparkles-text.tsx
@@ -1,152 +1,151 @@
-'use client'
+"use client";
-import { motion } from 'framer-motion'
-import type { CSSProperties, ReactElement } from 'react'
-import { useEffect, useState } from 'react'
-import { ny } from '@/lib/utils'
+import { motion } from "framer-motion";
+import type { CSSProperties, ReactElement } from "react";
+import { useEffect, useState } from "react";
+import { ny } from "@/lib/utils";
interface Sparkle {
- id: string
- x: string
- y: string
- color: string
- delay: number
- scale: number
- lifespan: number
+ id: string;
+ x: string;
+ y: string;
+ color: string;
+ delay: number;
+ scale: number;
+ lifespan: number;
}
interface SparklesTextProps {
- /**
- * @default
- * @type ReactElement
- * @description
- * The component to be rendered as the text
- */
- as?: ReactElement
+ /**
+ * @default
+ * @type ReactElement
+ * @description
+ * The component to be rendered as the text
+ */
+ as?: ReactElement;
- /**
- * @default ""
- * @type string
- * @description
- * The className of the text
- */
- className?: string
+ /**
+ * @default ""
+ * @type string
+ * @description
+ * The className of the text
+ */
+ className?: string;
- /**
- * @required
- * @type string
- * @description
- * The text to be displayed
- */
- text: string
+ /**
+ * @required
+ * @type string
+ * @description
+ * The text to be displayed
+ */
+ text: string;
- /**
- * @default 10
- * @type number
- * @description
- * The count of sparkles
- */
- sparklesCount?: number
+ /**
+ * @default 10
+ * @type number
+ * @description
+ * The count of sparkles
+ */
+ sparklesCount?: number;
- /**
- * @default "{first: '#A07CFE', second: '#FE8FB5'}"
- * @type string
- * @description
- * The colors of the sparkles
- */
- colors?: {
- first: string
- second: string
- }
+ /**
+ * @default "{first: '#A07CFE', second: '#FE8FB5'}"
+ * @type string
+ * @description
+ * The colors of the sparkles
+ */
+ colors?: {
+ first: string;
+ second: string;
+ };
}
const SparklesText: React.FC = ({
- text,
- colors = { first: '#A07CFE', second: '#FE8FB5' },
- className,
- sparklesCount = 10,
- ...props
+ text,
+ colors = { first: "#A07CFE", second: "#FE8FB5" },
+ className,
+ sparklesCount = 10,
+ ...props
}) => {
- const [sparkles, setSparkles] = useState([])
+ const [sparkles, setSparkles] = useState([]);
- useEffect(() => {
- const generateStar = (): Sparkle => {
- const starX = `${Math.random() * 100}%`
- const starY = `${Math.random() * 100}%`
- const color = Math.random() > 0.5 ? colors.first : colors.second
- const delay = Math.random() * 2
- const scale = Math.random() * 1 + 0.3
- const lifespan = Math.random() * 10 + 5
- const id = `${starX}-${starY}-${Date.now()}`
- return { id, x: starX, y: starY, color, delay, scale, lifespan }
- }
+ useEffect(() => {
+ const generateStar = (): Sparkle => {
+ const starX = `${Math.random() * 100}%`;
+ const starY = `${Math.random() * 100}%`;
+ const color = Math.random() > 0.5 ? colors.first : colors.second;
+ const delay = Math.random() * 2;
+ const scale = Math.random() * 1 + 0.3;
+ const lifespan = Math.random() * 10 + 5;
+ const id = `${starX}-${starY}-${Date.now()}`;
+ return { id, x: starX, y: starY, color, delay, scale, lifespan };
+ };
- const initializeStars = () => {
- const newSparkles = Array.from({ length: sparklesCount }, generateStar)
- setSparkles(newSparkles)
- }
+ const initializeStars = () => {
+ const newSparkles = Array.from({ length: sparklesCount }, generateStar);
+ setSparkles(newSparkles);
+ };
- const updateStars = () => {
- setSparkles(currentSparkles =>
- currentSparkles.map((star) => {
- if (star.lifespan <= 0)
- return generateStar()
- else return { ...star, lifespan: star.lifespan - 0.1 }
- }),
- )
- }
+ const updateStars = () => {
+ setSparkles((currentSparkles) =>
+ currentSparkles.map((star) => {
+ if (star.lifespan <= 0) return generateStar();
+ else return { ...star, lifespan: star.lifespan - 0.1 };
+ }),
+ );
+ };
- initializeStars()
- const interval = setInterval(updateStars, 100)
+ initializeStars();
+ const interval = setInterval(updateStars, 100);
- return () => clearInterval(interval)
- }, [colors.first, colors.second])
+ return () => clearInterval(interval);
+ }, [colors.first, colors.second]);
- return (
-
-
- {sparkles.map(sparkle => (
-
- {text}
-
-
-
- )
-}
+ return (
+
+
+ {sparkles.map((sparkle) => (
+
+ {text}
+
+
+
+ );
+};
const Sparkle: React.FC = ({ id, x, y, color, delay, scale }) => {
- return (
-
-
- )
-}
+ return (
+
+
+ );
+};
-export default SparklesText
+export default SparklesText;
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index cd2454f..2a084fe 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,120 +1,120 @@
-import * as React from 'react'
+import * as React from "react";
-import { ny } from '@/lib/utils'
+import { ny } from "@/lib/utils";
const Table = React.forwardRef<
- HTMLTableElement,
- React.HTMLAttributes
+ HTMLTableElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
-))
-Table.displayName = 'Table'
+
+));
+Table.displayName = "Table";
const TableHeader = React.forwardRef<
- HTMLTableSectionElement,
- React.HTMLAttributes
+ HTMLTableSectionElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+ HTMLTableSectionElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+ HTMLTableSectionElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
- tr]:last:border-b-0',
- className,
- )}
- {...props}
- />
-))
-TableFooter.displayName = 'TableFooter'
+ tr]:last:border-b-0",
+ className,
+ )}
+ {...props}
+ />
+));
+TableFooter.displayName = "TableFooter";
const TableRow = React.forwardRef<
- HTMLTableRowElement,
- React.HTMLAttributes
+ HTMLTableRowElement,
+ React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+ HTMLTableCellElement,
+ React.ThHTMLAttributes 
- 
- 
