@m5kdev/web-ui 0.1.0

package/src/components/mode-toggle.tsx

@@ -0,0 +1,31 @@
+import { Moon, Sun } from "lucide-react";
+
+import { useTheme } from "#components/theme-provider";
+import { Button } from "#components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "#components/ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/nav-main.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { ChevronRight, type LucideIcon } from "lucide-react";
+import { Link } from "react-router";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "#components/ui/collapsible";
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "#components/ui/sidebar";
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string;
+    url: string;
+    icon?: LucideIcon;
+    isActive?: boolean;
+    items?: {
+      title: string;
+      url: string;
+    }[];
+  }[];
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <Link to={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </Link>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  );
+}

package/src/components/pricing-cards.tsx

@@ -0,0 +1,133 @@
+import { Check, type LucideIcon, MoveRight, PhoneCall } from "lucide-react";
+import { Badge } from "#components/ui/badge";
+import { Button } from "#components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "#components/ui/card";
+
+interface Feature {
+  title: string;
+  description: string;
+}
+
+interface PricingCardProps {
+  title: string;
+  description: string;
+  price: number;
+  features: Feature[];
+  highlighted?: boolean;
+  ctaText: string;
+  ctaIcon: LucideIcon;
+  variant?: "default" | "outline";
+}
+
+function PricingCard({
+  title,
+  description,
+  price,
+  features,
+  highlighted = false,
+  ctaText,
+  ctaIcon: CtaIcon,
+  variant = "outline",
+}: PricingCardProps) {
+  const Icon = CtaIcon;
+  return (
+    <Card className={`w-full rounded-md ${highlighted ? "shadow-2xl" : ""}`}>
+      <CardHeader>
+        <CardTitle>
+          <span className="flex flex-row gap-4 items-center font-normal">{title}</span>
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-8 justify-start">
+          <p className="flex flex-row items-center gap-2 text-xl">
+            <span className="text-4xl">${price}</span>
+            <span className="text-sm text-muted-foreground"> / month</span>
+          </p>
+          <div className="flex flex-col gap-4 justify-start">
+            {features.map((feature, index) => (
+              <div key={index} className="flex flex-row gap-4">
+                <Check className="w-4 h-4 mt-2 text-primary" />
+                <div className="flex flex-col">
+                  <p>{feature.title}</p>
+                  <p className="text-muted-foreground text-sm">{feature.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <Button variant={variant} className="gap-4">
+            {ctaText} <Icon className="w-4 h-4" />
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function PricingCards() {
+  const commonDescription =
+    "Our goal is to streamline SMB trade, making it easier and faster than ever for everyone and everywhere.";
+
+  const commonFeatures = [
+    {
+      title: "Fast and reliable",
+      description: "We've made it fast and reliable.",
+    },
+    {
+      title: "Fast and reliable",
+      description: "We've made it fast and reliable.",
+    },
+    {
+      title: "Fast and reliable",
+      description: "We've made it fast and reliable.",
+    },
+  ];
+
+  return (
+    <div className="w-full py-20 lg:py-40">
+      <div className="container mx-auto">
+        <div className="flex text-center justify-center items-center gap-4 flex-col">
+          <Badge>Pricing</Badge>
+          <div className="flex gap-2 flex-col">
+            <h2 className="text-3xl md:text-5xl tracking-tighter max-w-xl text-center font-regular">
+              Prices that make sense!
+            </h2>
+            <p className="text-lg leading-relaxed tracking-tight text-muted-foreground max-w-xl text-center">
+              Managing a small business today is already tough.
+            </p>
+          </div>
+          <div className="grid pt-20 text-left grid-cols-1 lg:grid-cols-3 w-full gap-8">
+            <PricingCard
+              title="Startup"
+              description={commonDescription}
+              price={40}
+              features={commonFeatures}
+              ctaText="Sign up today"
+              ctaIcon={MoveRight}
+              variant="outline"
+            />
+            <PricingCard
+              title="Growth"
+              description={commonDescription}
+              price={40}
+              features={commonFeatures}
+              highlighted={true}
+              ctaText="Sign up today"
+              ctaIcon={MoveRight}
+              variant="default"
+            />
+            <PricingCard
+              title="Enterprise"
+              description={commonDescription}
+              price={40}
+              features={commonFeatures}
+              ctaText="Book a meeting"
+              ctaIcon={PhoneCall}
+              variant="outline"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/shared/ButtonCopy.tsx

@@ -0,0 +1,50 @@
+import { CheckCircle, Copy } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { Button, type ButtonProps } from "#components/ui/button";
+import { cn } from "#utils";
+
+export function ButtonCopy({
+  text,
+  notificationTimeout = 1000,
+  iconOnly = false,
+  ...props
+}: ButtonProps & { text: string; notificationTimeout?: number; iconOnly?: boolean }) {
+  const { t } = useTranslation();
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = async (text: string) => {
+    try {
+      await window.navigator.clipboard.writeText(text);
+      setIsCopied(true);
+      toast.success(t("web-ui:common.copySuccess"));
+      setTimeout(() => setIsCopied(false), notificationTimeout);
+    } catch (error) {
+      toast.error(t("web-ui:common.copyError"));
+      console.error(error);
+    }
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={() => handleCopy(text)}
+      className={cn(isCopied ? "bg-green-200 hover:bg-green-300" : "", iconOnly ? "" : "gap-1")}
+      {...props}
+    >
+      {isCopied ? (
+        <>
+          <CheckCircle className="h-4 w-4" />
+          {!iconOnly && t("web-ui:common.copied")}
+        </>
+      ) : (
+        <>
+          <Copy className="h-4 w-4" />
+          {!iconOnly && t("web-ui:common.copy")}
+        </>
+      )}
+    </Button>
+  );
+}

package/src/components/team-switcher.tsx

@@ -0,0 +1,83 @@
+import { ChevronsUpDown, Plus } from "lucide-react";
+import * as React from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "#components/ui/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "#components/ui/sidebar";
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string;
+    logo: React.ElementType;
+    plan: string;
+  }[];
+}) {
+  const { isMobile } = useSidebar();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">{activeTeam.name}</span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-muted-foreground">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,74 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "dark",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem(storageKey);
+    if (savedTheme) setTheme(savedTheme as Theme);
+  }, []);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/src/components/typewriter.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { TypewriterEffect } from "./ui/typewriter-effect";
+
+interface TypewriterProps extends Omit<React.ComponentProps<typeof TypewriterEffect>, "words"> {
+  words: string[];
+  wordClass?: string;
+  highlightClass?: string;
+  highlightIndex?: number;
+}
+
+export function Typewriter({
+  words,
+  wordClass = "dark:text-neutral-300",
+  highlightClass = "text-green-500 dark:text-green-500",
+  cursorClassName = "bg-green-500 dark:bg-green-500",
+  highlightIndex,
+  ...props
+}: TypewriterProps) {
+  const position = highlightIndex ?? words.length - 1;
+  return (
+    <TypewriterEffect
+      {...props}
+      words={words.map((text, index) => ({
+        text,
+        className: index === position ? highlightClass : wordClass,
+      }))}
+      cursorClassName={cursorClassName}
+    />
+  );
+}
+
+interface CyclingTypewriterProps
+  extends Omit<React.ComponentProps<typeof TypewriterEffect>, "words"> {
+  wordSets: string[][];
+  wordClass?: string;
+  highlightClass?: string;
+  highlightIndex?: number;
+  displayDuration?: number;
+  cycleDelay?: number;
+}
+
+export function CyclingTypewriter({
+  wordSets,
+  wordClass = "dark:text-neutral-300",
+  highlightClass = "text-green-500 dark:text-green-500",
+  cursorClassName = "bg-green-500 dark:bg-green-500",
+  highlightIndex,
+  displayDuration = 3000,
+  cycleDelay = 500,
+  ...props
+}: CyclingTypewriterProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    if (wordSets.length === 0 || wordSets.length === 1) return;
+
+    const currentWords = wordSets[currentIndex];
+    // Calculate typing animation duration
+    // TypewriterEffect uses: duration 0.3s per char, stagger 0.1s
+    // Total time ≈ (charCount * 0.3) + (charCount * 0.1) = charCount * 0.4
+    const charCount = currentWords.join(" ").length;
+    const typingDuration = charCount * 400; // milliseconds
+
+    // Total cycle time: typing duration + display duration + cycle delay
+    const totalCycleTime = typingDuration + displayDuration + cycleDelay;
+
+    const timer = setTimeout(() => {
+      setCurrentIndex((prev) => (prev + 1) % wordSets.length);
+    }, totalCycleTime);
+
+    return () => clearTimeout(timer);
+  }, [currentIndex, wordSets, displayDuration, cycleDelay]);
+
+  if (wordSets.length === 0) return null;
+
+  const currentWords = wordSets[currentIndex];
+  const position = highlightIndex ?? currentWords.length - 1;
+
+  return (
+    <TypewriterEffect
+      {...props}
+      key={currentIndex}
+      words={currentWords.map((text, index) => ({
+        text,
+        className: index === position ? highlightClass : wordClass,
+      }))}
+      cursorClassName={cursorClassName}
+    />
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,133 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import type * as React from "react";
+
+import { buttonVariants } from "#components/ui/button";
+import { cn } from "#utils";
+
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};