add prettier, pretify

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "printWidth": 120,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "arrowParens": "avoid"
+}

package-lock.json

@@ -58,12 +58,13 @@
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.7.0",
+        "prettier": "^3.8.1",
         "tailwindcss": "^4.1.12",
         "typescript": "~5.6.3",
         "vite": "^6.3.5"
       },
       "engines": {
-        "node": ">=18.0.0 <22.0.0",
+        "node": ">=18.0.0",
         "npm": ">=9.0.0"
       }
     },
@@ -4286,6 +4287,22 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -63,6 +63,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.7.0",
+    "prettier": "^3.8.1",
     "tailwindcss": "^4.1.12",
     "typescript": "~5.6.3",
     "vite": "^6.3.5"

src/App.tsx

@@ -1,159 +1,130 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect } from 'react'
-import { Header } from "./components/Header";
+import { Header } from './components/Header'
-import { Footer } from "./components/Footer";
+import { Footer } from './components/Footer'
-import { ContactModal } from "./components/ContactModal";
+import { ContactModal } from './components/ContactModal'
-import { HomePage } from "./pages/HomePage";
+import { HomePage } from './pages/HomePage'
-import { CloudPage } from "./pages/CloudPage";
+import { CloudPage } from './pages/CloudPage'
-import { RussianSoftwarePage } from "./pages/RussianSoftwarePage";
+import { RussianSoftwarePage } from './pages/RussianSoftwarePage'
-import { CybersecurityPage } from "./pages/CybersecurityPage";
+import { CybersecurityPage } from './pages/CybersecurityPage'
-import { AISolutionsPage } from "./pages/AISolutionsPage";
+import { AISolutionsPage } from './pages/AISolutionsPage'
-import { RussianHardwarePage } from "./pages/RussianHardwarePage";
+import { RussianHardwarePage } from './pages/RussianHardwarePage'
-import { HardwareSolutionsPage } from "./pages/HardwareSolutionsPage";
+import { HardwareSolutionsPage } from './pages/HardwareSolutionsPage'
-import { CADandGISPage } from "./pages/CADandGISPage";
+import { CADandGISPage } from './pages/CADandGISPage'
-import { IndustrialSolutionsPage } from "./pages/IndustrialSolutionsPage";
+import { IndustrialSolutionsPage } from './pages/IndustrialSolutionsPage'
-import { GovernmentPage } from "./pages/GovernmentPage";
+import { GovernmentPage } from './pages/GovernmentPage'
-import { BusinessPage } from "./pages/BusinessPage";
+import { BusinessPage } from './pages/BusinessPage'
-import { ConsultingPage } from "./pages/ConsultingPage";
+import { ConsultingPage } from './pages/ConsultingPage'
-import { ImplementationPage } from "./pages/ImplementationPage";
+import { ImplementationPage } from './pages/ImplementationPage'
-import { ManagedServicesPage } from "./pages/ManagedServicesPage";
+import { ManagedServicesPage } from './pages/ManagedServicesPage'
-import { IntegrationPage } from "./pages/IntegrationPage";
+import { IntegrationPage } from './pages/IntegrationPage'
-import { SpecializedServicesPage } from "./pages/SpecializedServicesPage";
+import { SpecializedServicesPage } from './pages/SpecializedServicesPage'
-import { SupportPage } from "./pages/SupportPage";
+import { SupportPage } from './pages/SupportPage'
-import { SubscriptionPage } from "./pages/SubscriptionPage";
+import { SubscriptionPage } from './pages/SubscriptionPage'
 
 export default function App() {
-  const [currentPage, setCurrentPage] = useState("home");
+  const [currentPage, setCurrentPage] = useState('home')
-  const [pendingScroll, setPendingScroll] = useState<
+  const [pendingScroll, setPendingScroll] = useState<string | null>(null)
-    string | null
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false)
-  >(null);
-  const [isContactModalOpen, setIsContactModalOpen] =
-    useState(false);
 
   const scrollToSection = (sectionId: string) => {
     // Даем странице время отрендериться
     setTimeout(() => {
-      const section = document.getElementById(sectionId);
+      const section = document.getElementById(sectionId)
-      console.log(
+      console.log('Trying to scroll to:', sectionId, 'Found element:', section)
-        "Trying to scroll to:",
-        sectionId,
-        "Found element:",
-        section,
-      );
       if (section) {
-        const headerHeight = 85; // Header высота + минимальный отступ
+        const headerHeight = 85 // Header высота + минимальный отступ
-        const targetPosition = section.offsetTop - headerHeight;
+        const targetPosition = section.offsetTop - headerHeight
-        console.log("Scrolling to position:", targetPosition);
+        console.log('Scrolling to position:', targetPosition)
         window.scrollTo({
           top: targetPosition,
-          behavior: "smooth",
+          behavior: 'smooth',
-        });
+        })
       } else {
-        console.error("Section not found:", sectionId);
+        console.error('Section not found:', sectionId)
+      }
+    }, 100)
   }
-    }, 100);
-  };
 
   const handleNavigate = (page: string, section?: string) => {
     if (section) {
       // Клик на Кейсы/О компании/Контакты
-      if (currentPage !== "home") {
+      if (currentPage !== 'home') {
         // Если не на главной - переходим туда
-        setCurrentPage("home");
+        setCurrentPage('home')
-        setPendingScroll(section);
+        setPendingScroll(section)
       } else {
         // Уже на главной - скроллим сразу
-        scrollToSection(section);
+        scrollToSection(section)
       }
     } else {
       // Обычная навигация на другие страницы
-      setCurrentPage(page);
+      setCurrentPage(page)
-      setPendingScroll(null);
+      setPendingScroll(null)
-      window.scrollTo({ top: 0, behavior: "smooth" });
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    }
   }
-  };
 
   useEffect(() => {
     // Когда вернулись на главную с отложенным скроллом
-    if (currentPage === "home" && pendingScroll) {
+    if (currentPage === 'home' && pendingScroll) {
-      scrollToSection(pendingScroll);
+      scrollToSection(pendingScroll)
-      setPendingScroll(null);
+      setPendingScroll(null)
     }
-  }, [currentPage, pendingScroll]);
+  }, [currentPage, pendingScroll])
 
   const handleBackToHome = () => {
-    setCurrentPage("home");
+    setCurrentPage('home')
-    setPendingScroll(null);
+    setPendingScroll(null)
-    window.scrollTo({ top: 0, behavior: "smooth" });
+    window.scrollTo({ top: 0, behavior: 'smooth' })
-  };
+  }
 
   const renderPage = () => {
     switch (currentPage) {
-      case "cloud":
+      case 'cloud':
-        return <CloudPage onBack={handleBackToHome} />;
+        return <CloudPage onBack={handleBackToHome} />
-      case "russian-software":
+      case 'russian-software':
-        return (
+        return <RussianSoftwarePage onBack={handleBackToHome} />
-          <RussianSoftwarePage onBack={handleBackToHome} />
+      case 'cybersecurity':
-        );
+        return <CybersecurityPage onBack={handleBackToHome} />
-      case "cybersecurity":
+      case 'ai-solutions':
-        return <CybersecurityPage onBack={handleBackToHome} />;
+        return <AISolutionsPage onBack={handleBackToHome} />
-      case "ai-solutions":
+      case 'russian-hardware':
-        return <AISolutionsPage onBack={handleBackToHome} />;
+        return <RussianHardwarePage onBack={handleBackToHome} />
-      case "russian-hardware":
+      case 'hardware-solutions':
-        return (
+        return <HardwareSolutionsPage onBack={handleBackToHome} />
-          <RussianHardwarePage onBack={handleBackToHome} />
+      case 'cad-gis':
-        );
+        return <CADandGISPage onBack={handleBackToHome} />
-      case "hardware-solutions":
+      case 'industrial-solutions':
-        return (
+        return <IndustrialSolutionsPage onBack={handleBackToHome} />
-          <HardwareSolutionsPage onBack={handleBackToHome} />
+      case 'government':
-        );
+        return <GovernmentPage onBack={handleBackToHome} />
-      case "cad-gis":
+      case 'business':
-        return <CADandGISPage onBack={handleBackToHome} />;
+        return <BusinessPage onBack={handleBackToHome} />
-      case "industrial-solutions":
+      case 'consulting':
-        return (
+        return <ConsultingPage onBack={handleBackToHome} />
-          <IndustrialSolutionsPage onBack={handleBackToHome} />
+      case 'implementation':
-        );
+        return <ImplementationPage onBack={handleBackToHome} />
-      case "government":
+      case 'managed-services':
-        return <GovernmentPage onBack={handleBackToHome} />;
+        return <ManagedServicesPage onBack={handleBackToHome} />
-      case "business":
+      case 'integration':
-        return <BusinessPage onBack={handleBackToHome} />;
+        return <IntegrationPage onBack={handleBackToHome} />
-      case "consulting":
+      case 'specialized-services':
-        return <ConsultingPage onBack={handleBackToHome} />;
+        return <SpecializedServicesPage onBack={handleBackToHome} />
-      case "implementation":
+      case 'support':
-        return <ImplementationPage onBack={handleBackToHome} />;
+        return <SupportPage onBack={handleBackToHome} />
-      case "managed-services":
+      case 'subscription':
-        return (
+        return <SubscriptionPage onBack={handleBackToHome} />
-          <ManagedServicesPage onBack={handleBackToHome} />
-        );
-      case "integration":
-        return <IntegrationPage onBack={handleBackToHome} />;
-      case "specialized-services":
-        return (
-          <SpecializedServicesPage onBack={handleBackToHome} />
-        );
-      case "support":
-        return <SupportPage onBack={handleBackToHome} />;
-      case "subscription":
-        return <SubscriptionPage onBack={handleBackToHome} />;
       default:
-        return (
+        return <HomePage onOpenContactModal={() => setIsContactModalOpen(true)} />
-          <HomePage
-            onOpenContactModal={() =>
-              setIsContactModalOpen(true)
     }
-          />
-        );
   }
-  };
 
   return (
     <div className="min-h-screen bg-white w-full overflow-x-hidden">
       <Header onNavigate={handleNavigate} />
       {renderPage()}
       <Footer />
-      <ContactModal
+      <ContactModal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} />
-        isOpen={isContactModalOpen}
-        onClose={() => setIsContactModalOpen(false)}
-      />
     </div>
-  );
+  )
 }

src/components/About.tsx

@@ -1,5 +1,24 @@
-import { CheckCircle, Rocket, Zap, Target, Award, Shield, Clock, HeadphonesIcon, TrendingUp, Users, CheckCircle2, Cloud, Lock, Database, Briefcase, Server, Cpu, Package } from 'lucide-react';
+import {
-import { useState, useEffect } from 'react';
+  CheckCircle,
+  Rocket,
+  Zap,
+  Target,
+  Award,
+  Shield,
+  Clock,
+  HeadphonesIcon,
+  TrendingUp,
+  Users,
+  CheckCircle2,
+  Cloud,
+  Lock,
+  Database,
+  Briefcase,
+  Server,
+  Cpu,
+  Package,
+} from 'lucide-react'
+import { useState, useEffect } from 'react'
 
 const allVendors = [
   'Яндекс.Облако',
@@ -53,33 +72,31 @@ const allVendors = [
   'Depo',
   'Eltex',
   'Qtech',
-  'D-Link'
+  'D-Link',
-];
+]
 
 export function About() {
-  const [currentVendorIndex, setCurrentVendorIndex] = useState(0);
+  const [currentVendorIndex, setCurrentVendorIndex] = useState(0)
-  const [isVisible, setIsVisible] = useState(true);
+  const [isVisible, setIsVisible] = useState(true)
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setIsVisible(false);
+      setIsVisible(false)
 
       setTimeout(() => {
-        setCurrentVendorIndex((prev) => (prev + 1) % allVendors.length);
+        setCurrentVendorIndex(prev => (prev + 1) % allVendors.length)
-        setIsVisible(true);
+        setIsVisible(true)
-      }, 800);
+      }, 800)
-    }, 4500);
+    }, 4500)
 
-    return () => clearInterval(interval);
+    return () => clearInterval(interval)
-  }, []);
+  }, [])
 
   return (
     <section className="py-4 bg-gray-50">
       <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
         <div className="max-w-3xl mb-16">
-          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
+          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">О компании</p>
-            О компании
-          </p>
           <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6 flex flex-wrap items-baseline gap-2">
             <span>Сотрудничаем с</span>
             <span
@@ -158,5 +175,5 @@ export function About() {
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/Cases.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight, Cloud, Cpu, Shield } from 'lucide-react';
+import { ArrowRight, Cloud, Cpu, Shield } from 'lucide-react'
 
 const cases = [
   {
@@ -10,7 +10,7 @@ const cases = [
     results: '−40% TCO',
     gradient: 'from-blue-100 to-cyan-100',
     iconBg: 'bg-white',
-    iconColor: 'text-blue-600'
+    iconColor: 'text-blue-600',
   },
   {
     icon: Cpu,
@@ -21,7 +21,7 @@ const cases = [
     results: '+25% эффективность',
     gradient: 'from-emerald-100 to-teal-100',
     iconBg: 'bg-white',
-    iconColor: 'text-emerald-600'
+    iconColor: 'text-emerald-600',
   },
   {
     icon: Shield,
@@ -32,37 +32,36 @@ const cases = [
     results: '99.9% uptime',
     gradient: 'from-violet-100 to-purple-100',
     iconBg: 'bg-white',
-    iconColor: 'text-violet-600'
+    iconColor: 'text-violet-600',
-  }
+  },
-];
+]
 
 export function Cases() {
   return (
     <section className="py-4 bg-white">
       <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
         <div className="max-w-3xl mb-16">
-          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
+          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">Кейсы</p>
-            Кейсы
+          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">Реализованные проекты</h2>
-          </p>
+          <p className="text-xl text-gray-600">Примеры успешного внедрения с конкретными результатами</p>
-          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">
-            Реализованные проекты
-          </h2>
-          <p className="text-xl text-gray-600">
-            Примеры успешного внедрения с конкретными результатами
-          </p>
         </div>
 
         <div className="grid lg:grid-cols-3 gap-8">
           {cases.map((caseItem, index) => {
-            const Icon = caseItem.icon;
+            const Icon = caseItem.icon
-            const floatClass = index === 0 ? 'animate-float' : index === 1 ? 'animate-float-delay-1' : 'animate-float-delay-2';
+            const floatClass =
+              index === 0 ? 'animate-float' : index === 1 ? 'animate-float-delay-1' : 'animate-float-delay-2'
             return (
               <div
                 key={index}
                 className="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 cursor-pointer flex flex-col"
               >
-                <div className={`relative h-64 overflow-hidden bg-gradient-to-br ${caseItem.gradient} flex items-center justify-center`}>
+                <div
-                  <div className={`w-24 h-24 ${caseItem.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}>
+                  className={`relative h-64 overflow-hidden bg-gradient-to-br ${caseItem.gradient} flex items-center justify-center`}
+                >
+                  <div
+                    className={`w-24 h-24 ${caseItem.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}
+                  >
                     <Icon className={`w-12 h-12 ${caseItem.iconColor}`} />
                   </div>
                   <div className="absolute top-4 left-4">
@@ -73,27 +72,19 @@ export function Cases() {
                 </div>
 
                 <div className="p-6 flex flex-col flex-1">
-                  <div className="text-sm text-blue-600 mb-2">
+                  <div className="text-sm text-blue-600 mb-2">{caseItem.company}</div>
-                    {caseItem.company}
-                  </div>
 
-                  <h3 className="text-xl text-gray-900 mb-3">
+                  <h3 className="text-xl text-gray-900 mb-3">{caseItem.title}</h3>
-                    {caseItem.title}
-                  </h3>
 
-                  <p className="text-gray-600 mb-4 leading-relaxed flex-1">
+                  <p className="text-gray-600 mb-4 leading-relaxed flex-1">{caseItem.description}</p>
-                    {caseItem.description}
-                  </p>
 
                   <div className="pt-4 border-t border-gray-100 flex items-center justify-between">
-                    <span className="text-gray-900">
+                    <span className="text-gray-900">{caseItem.results}</span>
-                      {caseItem.results}
-                    </span>
                     <ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
                   </div>
                 </div>
               </div>
-            );
+            )
           })}
         </div>
 
@@ -105,5 +96,5 @@ export function Cases() {
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/CategoryPage.tsx

@@ -1,17 +1,17 @@
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react'
 
 interface Vendor {
-  name: string;
+  name: string
-  description: string;
+  description: string
-  logo?: string;
+  logo?: string
-  products?: string[];
+  products?: string[]
 }
 
 interface CategoryPageProps {
-  title: string;
+  title: string
-  description: string;
+  description: string
-  vendors: Vendor[];
+  vendors: Vendor[]
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function CategoryPage({ title, description, vendors, onBack }: CategoryPageProps) {
@@ -33,12 +33,8 @@ export function CategoryPage({ title, description, vendors, onBack }: CategoryPa
               <div className="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-sm mb-6">
                 Каталог решений
               </div>
-              <h1 className="text-5xl lg:text-6xl mb-6 leading-tight text-gray-900">
+              <h1 className="text-5xl lg:text-6xl mb-6 leading-tight text-gray-900">{title}</h1>
-                {title}
+              <p className="text-xl text-gray-600 max-w-3xl leading-relaxed">{description}</p>
-              </h1>
-              <p className="text-xl text-gray-600 max-w-3xl leading-relaxed">
-                {description}
-              </p>
             </div>
 
             <div className="hidden xl:block w-32 h-32 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-3xl flex-shrink-0"></div>
@@ -56,26 +52,17 @@ export function CategoryPage({ title, description, vendors, onBack }: CategoryPa
             >
               <div className="space-y-4 flex-1 flex flex-col">
                 <div className="flex items-start justify-between">
-                  <h3 className="text-2xl text-gray-900 group-hover:text-blue-600 transition-colors">
+                  <h3 className="text-2xl text-gray-900 group-hover:text-blue-600 transition-colors">{vendor.name}</h3>
-                    {vendor.name}
-                  </h3>
                 </div>
 
-                <p className="text-gray-600 leading-relaxed">
+                <p className="text-gray-600 leading-relaxed">{vendor.description}</p>
-                  {vendor.description}
-                </p>
 
                 {vendor.products && vendor.products.length > 0 && (
                   <div className="pt-4 border-t border-gray-100">
-                    <div className="text-sm text-gray-500 mb-3 uppercase tracking-wider">
+                    <div className="text-sm text-gray-500 mb-3 uppercase tracking-wider">Решения</div>
-                      Решения
-                    </div>
                     <div className="flex flex-wrap gap-2">
                       {vendor.products.map((product, idx) => (
-                        <span 
+                        <span key={idx} className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm">
-                          key={idx}
-                          className="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-lg text-sm"
-                        >
                           {product}
                         </span>
                       ))}
@@ -92,5 +79,5 @@ export function CategoryPage({ title, description, vendors, onBack }: CategoryPa
         </div>
       </div>
     </div>
-  );
+  )
 }

src/components/Contact.tsx

@@ -1,4 +1,4 @@
-import { Phone, Mail, MapPin, Clock } from 'lucide-react';
+import { Phone, Mail, MapPin, Clock } from 'lucide-react'
 
 export function Contact() {
   return (
@@ -6,12 +6,8 @@ export function Contact() {
       <div className="max-w-[900px] mx-auto px-6">
         {/* Заголовок */}
         <div className="text-center mb-12">
-          <h2 className="text-3xl lg:text-4xl text-gray-900 mb-3">
+          <h2 className="text-3xl lg:text-4xl text-gray-900 mb-3">Обсудим ваш проект</h2>
-            Обсудим ваш проект
+          <p className="text-gray-600">Оставьте заявку — перезвоним в течение часа</p>
-          </h2>
-          <p className="text-gray-600">
-            Оставьте заявку — перезвоним в течение часа
-          </p>
         </div>
 
         {/* Форма */}
@@ -76,9 +72,7 @@ export function Contact() {
               >
                 Отправить заявку
               </button>
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
-                Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
-              </p>
             </div>
           </form>
         </div>
@@ -104,5 +98,5 @@ export function Contact() {
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/ContactModal.tsx

@@ -1,25 +1,25 @@
-import { X, Mail, Phone, MapPin, Clock, Calendar } from 'lucide-react';
+import { X, Mail, Phone, MapPin, Clock, Calendar } from 'lucide-react'
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom';
+import { createPortal } from 'react-dom'
 
 interface ContactModalProps {
-  isOpen: boolean;
+  isOpen: boolean
-  onClose: () => void;
+  onClose: () => void
 }
 
 export function ContactModal({ isOpen, onClose }: ContactModalProps) {
   useEffect(() => {
     if (isOpen) {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflow = 'hidden'
     } else {
-      document.body.style.overflow = 'unset';
+      document.body.style.overflow = 'unset'
     }
     return () => {
-      document.body.style.overflow = 'unset';
+      document.body.style.overflow = 'unset'
-    };
+    }
-  }, [isOpen]);
+  }, [isOpen])
 
-  if (!isOpen) return null;
+  if (!isOpen) return null
 
   const modalContent = (
     <div
@@ -28,17 +28,13 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
     >
       <div
         className="relative bg-white rounded-2xl w-full max-w-[700px] max-h-[90vh] overflow-y-auto shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
+        onClick={e => e.stopPropagation()}
       >
         {/* Заголовок */}
         <div className="sticky top-0 bg-white border-b border-gray-100 px-6 py-5 flex items-start justify-between z-10 rounded-t-2xl">
           <div>
-            <h2 className="text-2xl text-gray-900">
+            <h2 className="text-2xl text-gray-900">Обсудим ваш проект</h2>
-              Обсудим ваш проект
+            <p className="text-sm text-gray-600 mt-1">Оставьте заявку — перезвоним в течение часа</p>
-            </h2>
-            <p className="text-sm text-gray-600 mt-1">
-              Оставьте заявку — перезвоним в течение часа
-            </p>
           </div>
           <button
             onClick={onClose}
@@ -97,14 +93,18 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
             {/* Для чего нужна покупка и Сроки */}
             <div className="grid md:grid-cols-2 gap-5">
               <div>
-                <label htmlFor="modal-purpose" className="block text-sm text-gray-700 mb-2">Какую задачу решаете?</label>
+                <label htmlFor="modal-purpose" className="block text-sm text-gray-700 mb-2">
+                  Какую задачу решаете?
+                </label>
                 <select
                   id="modal-purpose"
                   className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                   required
                 >
                   <option value="">Выберите цель покупки</option>
-                  <option value="emergency" selected>🔥 Всё горит, нужна помощь!</option>
+                  <option value="emergency" selected>
+                    🔥 Всё горит, нужна помощь!
+                  </option>
                   <option value="modernization">Модернизация инфраструктуры</option>
                   <option value="software-replacement">Замена импортного ПО на российское</option>
                   <option value="capacity-expansion">Расширение мощностей</option>
@@ -119,14 +119,18 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
               </div>
 
               <div>
-                <label htmlFor="modal-timeline" className="block text-sm text-gray-700 mb-2">Сроки реализации</label>
+                <label htmlFor="modal-timeline" className="block text-sm text-gray-700 mb-2">
+                  Сроки реализации
+                </label>
                 <select
                   id="modal-timeline"
                   className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all"
                   required
                 >
                   <option value="">Выберите срок</option>
-                  <option value="yesterday" selected>Еще вчера</option>
+                  <option value="yesterday" selected>
+                    Еще вчера
+                  </option>
                   <option value="urgent">Срочно (до 1 месяца)</option>
                   <option value="1-3-months">1-3 месяца</option>
                   <option value="3-6-months">3-6 месяцев</option>
@@ -139,7 +143,9 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
 
             {/* Комментарий к задаче */}
             <div>
-              <label htmlFor="modal-task" className="block text-sm text-gray-700 mb-2">Комментарий к задаче</label>
+              <label htmlFor="modal-task" className="block text-sm text-gray-700 mb-2">
+                Комментарий к задаче
+              </label>
               <textarea
                 id="modal-task"
                 rows={4}
@@ -156,7 +162,9 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
               </label>
               <div className="grid md:grid-cols-2 gap-4">
                 <div>
-                  <label htmlFor="slot1" className="block text-xs text-gray-600 mb-1">Вариант 1</label>
+                  <label htmlFor="slot1" className="block text-xs text-gray-600 mb-1">
+                    Вариант 1
+                  </label>
                   <input
                     type="datetime-local"
                     id="slot1"
@@ -164,7 +172,9 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
                   />
                 </div>
                 <div>
-                  <label htmlFor="slot2" className="block text-xs text-gray-600 mb-1">Вариант 2</label>
+                  <label htmlFor="slot2" className="block text-xs text-gray-600 mb-1">
+                    Вариант 2
+                  </label>
                   <input
                     type="datetime-local"
                     id="slot2"
@@ -172,7 +182,9 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
                   />
                 </div>
               </div>
-              <p className="text-xs text-gray-500 mt-2">Мы отправим вам приглашение в ВКС на один из выбранных слотов</p>
+              <p className="text-xs text-gray-500 mt-2">
+                Мы отправим вам приглашение в ВКС на один из выбранных слотов
+              </p>
             </div>
 
             <div className="flex flex-col sm:flex-row items-center gap-4">
@@ -182,9 +194,7 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
               >
                 Отправить заявку
               </button>
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500">Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности</p>
-                Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
-              </p>
             </div>
           </form>
 
@@ -194,7 +204,10 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
               <Phone className="w-4 h-4" />
               <span>+7 (495) 123-45-67</span>
             </a>
-            <a href="mailto:info@softclick.ru" className="flex items-center gap-2 hover:text-blue-600 transition-colors">
+            <a
+              href="mailto:info@softclick.ru"
+              className="flex items-center gap-2 hover:text-blue-600 transition-colors"
+            >
               <Mail className="w-4 h-4" />
               <span>info@softclick.ru</span>
             </a>
@@ -210,7 +223,7 @@ export function ContactModal({ isOpen, onClose }: ContactModalProps) {
         </div>
       </div>
     </div>
-  );
+  )
 
-  return createPortal(modalContent, document.body);
+  return createPortal(modalContent, document.body)
 }

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { Mail, Phone, MapPin, Send, Hash, Code, Video } from 'lucide-react';
+import { Mail, Phone, MapPin, Send, Hash, Code, Video } from 'lucide-react'
 
 export function Footer() {
   return (
@@ -12,24 +12,38 @@ export function Footer() {
               </div>
               <span className="text-2xl text-white tracking-tight">SOFTCLICK</span>
             </div>
-            <p className="mb-6 leading-relaxed">
+            <p className="mb-6 leading-relaxed">Комплексные IT-решения для развития бизнеса</p>
-              Комплексные IT-решения для развития бизнеса
-            </p>
             <div className="flex gap-4">
-              <a href="#" className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600" title="Telegram">
+              <a
+                href="#"
+                className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
+                title="Telegram"
+              >
                 <Send className="w-5 h-5" />
               </a>
-              <a href="#" className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600" title="VK">
+              <a
+                href="#"
+                className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
+                title="VK"
+              >
                 <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12.785 16.241s.288-.032.436-.19c.136-.145.131-.419.131-.419s-.019-1.281.576-1.47c.586-.185 1.341 1.238 2.138 1.788.604.417 1.064.325 1.064.325l2.137-.03s1.117-.069.587-.948c-.043-.072-.309-.651-1.589-1.84-1.339-1.246-1.16-1.044.453-3.197.983-1.312 1.376-2.113 1.253-2.456-.117-.328-.84-.241-.84-.241l-2.406.015s-.178-.024-.31.055c-.129.077-.212.258-.212.258s-.381.987-.887 1.827c-1.063 1.766-1.497 1.86-1.668 1.748-.395-.259-.296-1.04-.296-1.595 0-1.734.263-2.456-.512-2.642-.258-.062-.447-.102-1.106-.109-.845-.009-1.56.003-1.964.201-.269.132-.476.426-.35.443.156.021.509.095.696.349.241.328.233 1.064.233 1.064s.139 2.042-.324 2.296c-.318.174-.754-.182-1.69-1.806-.479-.821-.841-1.729-.841-1.729s-.07-.171-.194-.263c-.151-.111-.362-.146-.362-.146l-2.286.015s-.343.01-.469.159c-.112.132-.009.405-.009.405s1.789 4.182 3.814 6.291c1.857 1.935 3.965 1.808 3.965 1.808h.955z" />
                 </svg>
               </a>
-              <a href="#" className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600" title="Habr">
+              <a
+                href="#"
+                className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
+                title="Habr"
+              >
                 <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.326 14.467H7.674v-1.652h8.652v1.652zm0-3.239H7.674V9.576h8.652v1.652z" />
                 </svg>
               </a>
-              <a href="#" className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600" title="VK Video">
+              <a
+                href="#"
+                className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
+                title="VK Video"
+              >
                 <Video className="w-5 h-5" />
               </a>
             </div>
@@ -38,20 +52,52 @@ export function Footer() {
           <div>
             <h4 className="text-white mb-6">Решения</h4>
             <ul className="space-y-3">
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Облачные решения</a></li>
+              <li>
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Кибербезопасность</a></li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Цифровая трансформация</a></li>
+                  Облачные решения
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Управление данными</a></li>
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Кибербезопасность
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Цифровая трансформация
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Управление данными
+                </a>
+              </li>
             </ul>
           </div>
 
           <div>
             <h4 className="text-white mb-6">Компания</h4>
             <ul className="space-y-3">
-              <li><a href="#" className="hover:text-blue-400 transition-colors">О нас</a></li>
+              <li>
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Карьера</a></li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Новости</a></li>
+                  О нас
-              <li><a href="#" className="hover:text-blue-400 transition-colors">Партнерам</a></li>
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Карьера
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Новости
+                </a>
+              </li>
+              <li>
+                <a href="#" className="hover:text-blue-400 transition-colors">
+                  Партнерам
+                </a>
+              </li>
             </ul>
           </div>
 
@@ -73,24 +119,24 @@ export function Footer() {
               </li>
               <li className="flex items-start gap-3">
                 <MapPin className="w-5 h-5 mt-1 flex-shrink-0 text-blue-400" />
-                <div>
+                <div>Москва, Пресненская наб., 12</div>
-                  Москва, Пресненская наб., 12
-                </div>
               </li>
             </ul>
           </div>
         </div>
 
         <div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
-          <div>
+          <div>&copy; 2025 SOFTCLICK. Все права защищены.</div>
-            &copy; 2025 SOFTCLICK. Все права защищены.
-          </div>
           <div className="flex gap-6">
-            <a href="#" className="hover:text-blue-400 transition-colors">Политика конфиденциальности</a>
+            <a href="#" className="hover:text-blue-400 transition-colors">
-            <a href="#" className="hover:text-blue-400 transition-colors">Условия использования</a>
+              Политика конфиденциальности
+            </a>
+            <a href="#" className="hover:text-blue-400 transition-colors">
+              Условия использования
+            </a>
           </div>
         </div>
       </div>
     </footer>
-  );
+  )
 }

src/components/Header.tsx

@@ -1,16 +1,16 @@
-import { Menu, X, ChevronDown } from 'lucide-react';
+import { Menu, X, ChevronDown } from 'lucide-react'
-import { useState } from 'react';
+import { useState } from 'react'
-import { ContactModal } from './ContactModal';
+import { ContactModal } from './ContactModal'
 
 interface HeaderProps {
-  onNavigate?: (page: string, section?: string) => void;
+  onNavigate?: (page: string, section?: string) => void
 }
 
 export function Header({ onNavigate }: HeaderProps) {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isSolutionsOpen, setIsSolutionsOpen] = useState(false);
+  const [isSolutionsOpen, setIsSolutionsOpen] = useState(false)
-  const [isServicesOpen, setIsServicesOpen] = useState(false);
+  const [isServicesOpen, setIsServicesOpen] = useState(false)
-  const [isContactModalOpen, setIsContactModalOpen] = useState(false);
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false)
 
   const solutions = [
     { name: 'Облако', path: 'cloud' },
@@ -23,7 +23,7 @@ export function Header({ onNavigate }: HeaderProps) {
     { name: 'Индустриальные решения', path: 'industrial-solutions' },
     { name: 'Для госсектора', path: 'government' },
     { name: 'Решения для бизнеса', path: 'business' },
-  ];
+  ]
 
   const services = [
     { name: 'Консалтинг и проектирование', path: 'consulting' },
@@ -33,21 +33,28 @@ export function Header({ onNavigate }: HeaderProps) {
     { name: 'Специализированные услуги по отраслям', path: 'specialized-services' },
     { name: 'Обслуживание и сопровождение', path: 'support' },
     { name: 'Услуги по подписке', path: 'subscription' },
-  ];
+  ]
 
   const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, sectionId: string) => {
-    e.preventDefault();
+    e.preventDefault()
-    console.log('Header: handleNavClick called with sectionId:', sectionId);
+    console.log('Header: handleNavClick called with sectionId:', sectionId)
-    onNavigate?.('home', sectionId);
+    onNavigate?.('home', sectionId)
-    setIsMenuOpen(false);
+    setIsMenuOpen(false)
-  };
+  }
 
   return (
     <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
       <nav className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16 py-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-12">
-            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate?.('home'); }} className="flex items-center gap-3 group">
+            <a
+              href="#"
+              onClick={e => {
+                e.preventDefault()
+                onNavigate?.('home')
+              }}
+              className="flex items-center gap-3 group"
+            >
               <span className="text-2xl text-gray-900 tracking-wide font-bold">SOFTCLICK</span>
             </a>
 
@@ -65,12 +72,12 @@ export function Header({ onNavigate }: HeaderProps) {
                 {isSolutionsOpen && (
                   <div className="absolute top-full left-0 pt-2">
                     <div className="w-80 bg-white rounded-xl shadow-xl border border-gray-100 py-3 animate-in fade-in slide-in-from-top-2 duration-200">
-                      {solutions.map((solution) => (
+                      {solutions.map(solution => (
                         <button
                           key={solution.path}
                           onClick={() => {
-                            onNavigate?.(solution.path);
+                            onNavigate?.(solution.path)
-                            setIsSolutionsOpen(false);
+                            setIsSolutionsOpen(false)
                           }}
                           className="w-full text-left px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
                         >
@@ -94,12 +101,12 @@ export function Header({ onNavigate }: HeaderProps) {
                 {isServicesOpen && (
                   <div className="absolute top-full left-0 pt-2">
                     <div className="w-80 bg-white rounded-xl shadow-xl border border-gray-100 py-3 animate-in fade-in slide-in-from-top-2 duration-200">
-                      {services.map((service) => (
+                      {services.map(service => (
                         <button
                           key={service.path}
                           onClick={() => {
-                            onNavigate?.(service.path);
+                            onNavigate?.(service.path)
-                            setIsServicesOpen(false);
+                            setIsServicesOpen(false)
                           }}
                           className="w-full text-left px-5 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
                         >
@@ -112,21 +119,21 @@ export function Header({ onNavigate }: HeaderProps) {
               </div>
               <a
                 href="#cases"
-                onClick={(e) => handleNavClick(e, 'cases')} 
+                onClick={e => handleNavClick(e, 'cases')}
                 className="text-gray-700 hover:text-blue-600 transition-colors whitespace-nowrap"
               >
                 Кейсы
               </a>
               <a
                 href="#about"
-                onClick={(e) => handleNavClick(e, 'about')} 
+                onClick={e => handleNavClick(e, 'about')}
                 className="text-gray-700 hover:text-blue-600 transition-colors whitespace-nowrap"
               >
                 О компании
               </a>
               <a
                 href="#contact"
-                onClick={(e) => handleNavClick(e, 'contact')} 
+                onClick={e => handleNavClick(e, 'contact')}
                 className="text-gray-700 hover:text-blue-600 transition-colors whitespace-nowrap"
               >
                 Контакты
@@ -135,15 +142,15 @@ export function Header({ onNavigate }: HeaderProps) {
           </div>
 
           <div className="hidden lg:flex items-center gap-4">
-            <button className="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-sm hover:shadow-md" onClick={() => setIsContactModalOpen(true)}>
+            <button
+              className="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-sm hover:shadow-md"
+              onClick={() => setIsContactModalOpen(true)}
+            >
               Связаться
             </button>
           </div>
 
-          <button
+          <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="lg:hidden p-2">
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="lg:hidden p-2"
-          >
             {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
           </button>
         </div>
@@ -161,13 +168,13 @@ export function Header({ onNavigate }: HeaderProps) {
                 </button>
                 {isSolutionsOpen && (
                   <div className="pl-4 mt-2 space-y-2">
-                    {solutions.map((solution) => (
+                    {solutions.map(solution => (
                       <button
                         key={solution.path}
                         onClick={() => {
-                          onNavigate?.(solution.path);
+                          onNavigate?.(solution.path)
-                          setIsMenuOpen(false);
+                          setIsMenuOpen(false)
-                          setIsSolutionsOpen(false);
+                          setIsSolutionsOpen(false)
                         }}
                         className="block w-full text-left text-sm text-gray-600 hover:text-blue-600 py-2"
                       >
@@ -187,14 +194,14 @@ export function Header({ onNavigate }: HeaderProps) {
                 </button>
                 {isServicesOpen && (
                   <div className="pl-4 mt-2 space-y-2">
-                    {services.map((service) => (
+                    {services.map(service => (
                       <button
                         key={service.path}
                         onClick={() => {
-                          onNavigate?.(service.path);
+                          onNavigate?.(service.path)
-                          setIsMenuOpen(false);
+                          setIsMenuOpen(false)
-                          setIsSolutionsOpen(false);
+                          setIsSolutionsOpen(false)
-                          setIsServicesOpen(false);
+                          setIsServicesOpen(false)
                         }}
                         className="block w-full text-left text-sm text-gray-600 hover:text-blue-600 py-2"
                       >
@@ -204,23 +211,15 @@ export function Header({ onNavigate }: HeaderProps) {
                   </div>
                 )}
               </div>
-              <a 
+              <a href="#cases" onClick={e => handleNavClick(e, 'cases')} className="text-gray-700 hover:text-blue-600">
-                href="#cases" 
-                onClick={(e) => handleNavClick(e, 'cases')} 
-                className="text-gray-700 hover:text-blue-600"
-              >
                 Кейсы
               </a>
-              <a 
+              <a href="#about" onClick={e => handleNavClick(e, 'about')} className="text-gray-700 hover:text-blue-600">
-                href="#about" 
-                onClick={(e) => handleNavClick(e, 'about')} 
-                className="text-gray-700 hover:text-blue-600"
-              >
                 О компании
               </a>
               <a
                 href="#contact"
-                onClick={(e) => handleNavClick(e, 'contact')} 
+                onClick={e => handleNavClick(e, 'contact')}
                 className="text-gray-700 hover:text-blue-600"
               >
                 Контакты
@@ -231,5 +230,5 @@ export function Header({ onNavigate }: HeaderProps) {
       </nav>
       <ContactModal isOpen={isContactModalOpen} onClose={() => setIsContactModalOpen(false)} />
     </header>
-  );
+  )
 }

src/components/Hero.tsx

@@ -1,13 +1,12 @@
-import { ArrowRight, Play, Cloud, Shield, Zap, Database, Code, Users } from 'lucide-react';
+import { ArrowRight, Play, Cloud, Shield, Zap, Database, Code, Users } from 'lucide-react'
 
 interface HeroProps {
-  onOpenContactModal?: () => void;
+  onOpenContactModal?: () => void
 }
 
 export function Hero({ onOpenContactModal }: HeroProps) {
   return (
     <section className="relative pt-32 pb-20 overflow-hidden bg-white">
-      
       <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           <div className="space-y-8">
@@ -16,17 +15,18 @@ export function Hero({ onOpenContactModal }: HeroProps) {
               <span>Надежный партнер с 2021 года</span>
             </div>
 
-            <h1 className="text-5xl lg:text-6xl text-gray-900 leading-tight">
+            <h1 className="text-5xl lg:text-6xl text-gray-900 leading-tight">IT-решения для роста вашего бизнеса</h1>
-              IT-решения для роста вашего бизнеса
-            </h1>
 
             <p className="text-xl text-gray-600 leading-relaxed">
-              Проектируем, внедряем и сопровождаем корпоративные IT-системы. 
+              Проектируем, внедряем и сопровождаем корпоративные IT-системы. Облачная инфраструктура, безопасность,
-              Облачная инфраструктура, безопасность, автоматизация процессов.
+              автоматизация процессов.
             </p>
 
             <div className="flex flex-wrap gap-4">
-              <button className="group flex items-center gap-2 px-8 py-4 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all" onClick={onOpenContactModal}>
+              <button
+                className="group flex items-center gap-2 px-8 py-4 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-all"
+                onClick={onOpenContactModal}
+              >
                 Обсудить проект
                 <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
               </button>
@@ -101,5 +101,5 @@ export function Hero({ onOpenContactModal }: HeroProps) {
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/Services.tsx

@@ -1,4 +1,4 @@
-import { Cloud, Shield, Cpu, Database, Server, Settings } from 'lucide-react';
+import { Cloud, Shield, Cpu, Database, Server, Settings } from 'lucide-react'
 
 const services = [
   {
@@ -7,7 +7,7 @@ const services = [
     description: 'Миграция и управление инфраструктурой на базе Яндекс.Облако и VK Cloud',
     gradient: 'from-blue-50 to-cyan-50',
     iconBg: 'bg-white',
-    iconColor: 'text-blue-600'
+    iconColor: 'text-blue-600',
   },
   {
     icon: Shield,
@@ -15,7 +15,7 @@ const services = [
     description: 'Комплексная защита периметра и данных с решениями Kaspersky',
     gradient: 'from-violet-50 to-purple-50',
     iconBg: 'bg-white',
-    iconColor: 'text-violet-600'
+    iconColor: 'text-violet-600',
   },
   {
     icon: Cpu,
@@ -23,7 +23,7 @@ const services = [
     description: 'Автоматизация процессов на платформах 1С и Галактика',
     gradient: 'from-emerald-50 to-teal-50',
     iconBg: 'bg-white',
-    iconColor: 'text-emerald-600'
+    iconColor: 'text-emerald-600',
   },
   {
     icon: Database,
@@ -31,7 +31,7 @@ const services = [
     description: 'Развертывание и поддержка СУБД Postgres Pro',
     gradient: 'from-orange-50 to-amber-50',
     iconBg: 'bg-white',
-    iconColor: 'text-orange-600'
+    iconColor: 'text-orange-600',
   },
   {
     icon: Server,
@@ -39,7 +39,7 @@ const services = [
     description: 'Поставка и настройка оборудования Kraftway',
     gradient: 'from-pink-50 to-rose-50',
     iconBg: 'bg-white',
-    iconColor: 'text-pink-600'
+    iconColor: 'text-pink-600',
   },
   {
     icon: Settings,
@@ -47,58 +47,52 @@ const services = [
     description: 'Построение корпоративной ИТ-архитектуры на Astra Linux',
     gradient: 'from-indigo-50 to-blue-50',
     iconBg: 'bg-white',
-    iconColor: 'text-indigo-600'
+    iconColor: 'text-indigo-600',
-  }
+  },
-];
+]
 
 export function Services() {
   return (
     <section id="services" className="py-24 bg-white">
       <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
         <div className="max-w-3xl mb-16">
-          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
+          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">Услуги</p>
-            Услуги
+          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">Комплексные IT-решения для вашего бизнеса</h2>
-          </p>
+          <p className="text-xl text-gray-600">Полный цикл: от стратегии до технической поддержки</p>
-          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">
-            Комплексные IT-решения для вашего бизнеса
-          </h2>
-          <p className="text-xl text-gray-600">
-            Полный цикл: от стратегии до технической поддержки
-          </p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           {services.map((service, index) => {
-            const Icon = service.icon;
+            const Icon = service.icon
             const floatClasses = [
               'animate-float',
               'animate-float-delay-1',
               'animate-float-delay-2',
               'animate-float-delay-3',
               'animate-float-delay-4',
-              'animate-float-delay-5'
+              'animate-float-delay-5',
-            ];
+            ]
-            const floatClass = floatClasses[index % 6];
+            const floatClass = floatClasses[index % 6]
 
             return (
               <div
                 key={index}
                 className="group bg-white rounded-2xl border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 overflow-hidden"
               >
-                <div className={`relative h-48 overflow-hidden bg-gradient-to-br ${service.gradient} flex items-center justify-center`}>
+                <div
-                  <div className={`w-20 h-20 ${service.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}>
+                  className={`relative h-48 overflow-hidden bg-gradient-to-br ${service.gradient} flex items-center justify-center`}
+                >
+                  <div
+                    className={`w-20 h-20 ${service.iconBg} rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}
+                  >
                     <Icon className={`w-10 h-10 ${service.iconColor}`} />
                   </div>
                 </div>
 
                 <div className="p-6">
-                  <h3 className="text-xl text-gray-900 mb-3">
+                  <h3 className="text-xl text-gray-900 mb-3">{service.title}</h3>
-                    {service.title}
-                  </h3>
 
-                  <p className="text-gray-600 mb-4 leading-relaxed">
+                  <p className="text-gray-600 mb-4 leading-relaxed">{service.description}</p>
-                    {service.description}
-                  </p>
 
                   <button className="text-blue-600 hover:text-blue-700 transition-colors inline-flex items-center gap-2">
                     Подробнее
@@ -106,10 +100,10 @@ export function Services() {
                   </button>
                 </div>
               </div>
-            );
+            )
           })}
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/Solutions.tsx

@@ -1,63 +1,57 @@
-import { Building2, ShoppingCart, Factory, Heart, GraduationCap, Landmark } from 'lucide-react';
+import { Building2, ShoppingCart, Factory, Heart, GraduationCap, Landmark } from 'lucide-react'
 
 const solutions = [
   {
     icon: Building2,
     title: 'Корпоративный сектор',
     description: 'ERP, CRM, автоматизация документооборота',
-    projects: '1200+ проектов'
+    projects: '1200+ проектов',
   },
   {
     icon: ShoppingCart,
     title: 'Ритейл и e-commerce',
     description: 'Омниканальные платформы продаж',
-    projects: '850+ проектов'
+    projects: '850+ проектов',
   },
   {
     icon: Factory,
     title: 'Производство',
     description: 'IoT, системы управления производством',
-    projects: '650+ проектов'
+    projects: '650+ проектов',
   },
   {
     icon: Heart,
     title: 'Здравоохранение',
     description: 'Медицинские информационные системы',
-    projects: '420+ проектов'
+    projects: '420+ проектов',
   },
   {
     icon: GraduationCap,
     title: 'Образование',
     description: 'Платформы дистанционного обучения',
-    projects: '380+ проектов'
+    projects: '380+ проектов',
   },
   {
     icon: Landmark,
     title: 'Государственный сектор',
     description: 'Цифровизация госуслуг',
-    projects: '500+ проектов'
+    projects: '500+ проектов',
-  }
+  },
-];
+]
 
 export function Solutions() {
   return (
     <section id="solutions" className="py-24 bg-gray-50">
       <div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
         <div className="max-w-3xl mb-16">
-          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">
+          <p className="text-sm uppercase tracking-wider text-gray-500 mb-4">Отраслевые решения</p>
-            Отраслевые решения
+          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">Решения под ключ для разных отраслей</h2>
-          </p>
+          <p className="text-xl text-gray-600">Глубокое понимание специфики бизнеса в каждой отрасли</p>
-          <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">
-            Решения под ключ для разных отраслей
-          </h2>
-          <p className="text-xl text-gray-600">
-            Глубокое понимание специфики бизнеса в каждой отрасли
-          </p>
         </div>
 
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
           {solutions.map((solution, index) => {
-            const Icon = solution.icon;
+            const Icon = solution.icon
             return (
               <div
                 key={index}
@@ -68,25 +62,19 @@ export function Solutions() {
                     <Icon className="w-6 h-6 text-white" />
                   </div>
                   <div className="flex-1">
-                    <h3 className="text-lg text-gray-900 mb-2">
+                    <h3 className="text-lg text-gray-900 mb-2">{solution.title}</h3>
-                      {solution.title}
+                    <p className="text-gray-600">{solution.description}</p>
-                    </h3>
-                    <p className="text-gray-600">
-                      {solution.description}
-                    </p>
                   </div>
                 </div>
 
                 <div className="pt-4 border-t border-gray-100">
-                  <span className="text-sm text-blue-600">
+                  <span className="text-sm text-blue-600">{solution.projects}</span>
-                    {solution.projects}
-                  </span>
                 </div>
               </div>
-            );
+            )
           })}
         </div>
       </div>
     </section>
-  );
+  )
 }

src/components/ui/accordion.tsx

@@ -1,42 +1,33 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Accordion({
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  ...props
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
 }
 
-function AccordionItem({
+function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
+      className={cn('border-b last:border-b-0', className)}
       {...props}
     />
-  );
+  )
 }
 
-function AccordionTrigger({
+function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
-          className,
+          className
         )}
         {...props}
       >
@@ -44,23 +35,19 @@ function AccordionTrigger({
         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
-  );
+  )
 }
 
-function AccordionContent({
+function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
     </AccordionPrimitive.Content>
-  );
+  )
 }
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -1,108 +1,80 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { buttonVariants } from "./button";
+import { buttonVariants } from './button'
 
-function AlertDialog({
+function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  ...props
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-function AlertDialogTrigger({
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  ...props
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  );
 }
 
-function AlertDialogPortal({
+function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  ...props
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  );
 }
 
-function AlertDialogOverlay({
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
-  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/50",
+        '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/50',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function AlertDialogContent({
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
-  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",
+          '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,
+          className
         )}
         {...props}
       />
     </AlertDialogPortal>
-  );
+  )
 }
 
-function AlertDialogHeader({
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  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)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
-  );
+  )
 }
 
-function AlertDialogFooter({
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-dialog-footer"
-      className={cn(
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function AlertDialogTitle({
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-lg font-semibold", className)}
+      className={cn('text-lg font-semibold', className)}
       {...props}
     />
-  );
+  )
 }
 
 function AlertDialogDescription({
@@ -112,34 +84,18 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
-function AlertDialogAction({
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  className,
+  return <AlertDialogPrimitive.Action className={cn(buttonVariants(), className)} {...props} />
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
-  return (
-    <AlertDialogPrimitive.Action
-      className={cn(buttonVariants(), className)}
-      {...props}
-    />
-  );
 }
 
-function AlertDialogCancel({
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  className,
+  return <AlertDialogPrimitive.Cancel className={cn(buttonVariants({ variant: 'outline' }), className)} {...props} />
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
-  return (
-    <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
-      {...props}
-    />
-  );
 }
 
 export {
@@ -154,4 +110,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-};
+}

src/components/ui/alert.tsx

@@ -1,66 +1,49 @@
-import * as React from "react";
+import * as React from 'react'
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
+        default: 'bg-card text-card-foreground',
         destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  },
+  }
-);
+)
 
-function Alert({
+function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
-  className,
+  return <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  );
 }
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-title"
-      className={cn(
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function AlertDescription({
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -1,11 +1,9 @@
-"use client";
+'use client'
 
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
 
-function AspectRatio({
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  ...props
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
 }
 
-export { AspectRatio };
+export { AspectRatio }

src/components/ui/avatar.tsx

@@ -1,53 +1,34 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Avatar({
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
-      className={cn(
+      className={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full', className)}
-        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function AvatarImage({
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
   return (
-    <AvatarPrimitive.Image
+    <AvatarPrimitive.Image data-slot="avatar-image" className={cn('aspect-square size-full', className)} {...props} />
-      data-slot="avatar-image"
+  )
-      className={cn("aspect-square size-full", className)}
-      {...props}
-    />
-  );
 }
 
-function AvatarFallback({
+function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
-      className={cn(
+      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -1,46 +1,36 @@
-import * as React from "react";
+import * as React from 'react'
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       variant: {
-        default:
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-        outline:
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  },
+  }
-);
+)
 
 function Badge({
   className,
   variant,
   asChild = false,
   ...props
-}: React.ComponentProps<"span"> &
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
-  const Comp = asChild ? Slot : "span";
 
-  return (
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.tsx

@@ -1,101 +1,84 @@
-import * as React from "react";
+import * as React from 'react'
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from '@radix-ui/react-slot'
-import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
 }
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
   return (
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
-  return (
+  return <li data-slot="breadcrumb-item" className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-    <li
-      data-slot="breadcrumb-item"
-      className={cn("inline-flex items-center gap-1.5", className)}
-      {...props}
-    />
-  );
 }
 
 function BreadcrumbLink({
   asChild,
   className,
   ...props
-}: React.ComponentProps<"a"> & {
+}: React.ComponentProps<'a'> & {
-  asChild?: boolean;
+  asChild?: boolean
 }) {
-  const Comp = asChild ? Slot : "a";
+  const Comp = asChild ? Slot : 'a'
 
   return (
-    <Comp
+    <Comp data-slot="breadcrumb-link" className={cn('hover:text-foreground transition-colors', className)} {...props} />
-      data-slot="breadcrumb-link"
+  )
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  );
 }
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       data-slot="breadcrumb-page"
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn('text-foreground font-normal', className)}
       {...props}
     />
-  );
+  )
 }
 
-function BreadcrumbSeparator({
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="breadcrumb-separator"
       role="presentation"
       aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+      className={cn('[&>svg]:size-3.5', className)}
       {...props}
     >
       {children ?? <ChevronRight />}
     </li>
-  );
+  )
 }
 
-function BreadcrumbEllipsis({
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="breadcrumb-ellipsis"
       role="presentation"
       aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
+      className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
       <MoreHorizontal className="size-4" />
       <span className="sr-only">More</span>
     </span>
-  );
+  )
 }
 
 export {
@@ -106,4 +89,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-};
+}

src/components/ui/button.tsx

@@ -1,38 +1,36 @@
-import * as React from "react";
+import * as React from 'react'
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          'border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary:
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-        ghost:
+        link: 'text-primary underline-offset-4 hover:underline',
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: "size-9 rounded-md",
+        icon: 'size-9 rounded-md',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
-  },
+  }
-);
+)
 
 function Button({
   className,
@@ -40,19 +38,13 @@ function Button({
   size,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> &
+}: React.ComponentProps<'button'> &
   VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
+    asChild?: boolean
   }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button'
 
-  return (
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
 }
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -1,75 +1,58 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { DayPicker } from "react-day-picker";
+import { DayPicker } from 'react-day-picker'
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { buttonVariants } from "./button";
+import { buttonVariants } from './button'
 
-function Calendar({
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: React.ComponentProps<typeof DayPicker>) {
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
-}: React.ComponentProps<typeof DayPicker>) {
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn('p-3', className)}
       classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
+        months: 'flex flex-col sm:flex-row gap-2',
-        month: "flex flex-col gap-4",
+        month: 'flex flex-col gap-4',
-        caption: "flex justify-center pt-1 relative items-center w-full",
+        caption: 'flex justify-center pt-1 relative items-center w-full',
-        caption_label: "text-sm font-medium",
+        caption_label: 'text-sm font-medium',
-        nav: "flex items-center gap-1",
+        nav: 'flex items-center gap-1',
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+          buttonVariants({ variant: 'outline' }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100'
         ),
-        nav_button_previous: "absolute left-1",
+        nav_button_previous: 'absolute left-1',
-        nav_button_next: "absolute right-1",
+        nav_button_next: 'absolute right-1',
-        table: "w-full border-collapse space-x-1",
+        table: 'w-full border-collapse space-x-1',
-        head_row: "flex",
+        head_row: 'flex',
-        head_cell:
+        head_cell: 'text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]',
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: 'flex w-full mt-2',
-        row: "flex w-full mt-2",
         cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
-          props.mode === "range"
+          props.mode === 'range'
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            ? '[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md'
-            : "[&:has([aria-selected])]:rounded-md",
+            : '[&:has([aria-selected])]:rounded-md'
         ),
-        day: cn(
+        day: cn(buttonVariants({ variant: 'ghost' }), 'size-8 p-0 font-normal aria-selected:opacity-100'),
-          buttonVariants({ variant: "ghost" }),
+        day_range_start: 'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
-          "size-8 p-0 font-normal aria-selected:opacity-100",
+        day_range_end: 'day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground',
-        ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
         day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        day_today: "bg-accent text-accent-foreground",
+        day_today: 'bg-accent text-accent-foreground',
-        day_outside:
+        day_outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
-          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
+        day_disabled: 'text-muted-foreground opacity-50',
-        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
-        day_range_middle:
+        day_hidden: 'invisible',
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
+        IconLeft: ({ className, ...props }) => <ChevronLeft className={cn('size-4', className)} {...props} />,
-          <ChevronLeft className={cn("size-4", className)} {...props} />
+        IconRight: ({ className, ...props }) => <ChevronRight className={cn('size-4', className)} {...props} />,
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
       }}
       {...props}
     />
-  );
+  )
 }
 
-export { Calendar };
+export { Calendar }

src/components/ui/card.tsx

@@ -1,92 +1,56 @@
-import * as React from "react";
+import * as React from 'react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card"
-      className={cn(
+      className={cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border', className)}
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-header"
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <h4 data-slot="card-title" className={cn('leading-none', className)} {...props} />
-    <h4
-      data-slot="card-title"
-      className={cn("leading-none", className)}
-      {...props}
-    />
-  );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <p data-slot="card-description" className={cn('text-muted-foreground', className)} {...props} />
-    <p
-      data-slot="card-description"
-      className={cn("text-muted-foreground", className)}
-      {...props}
-    />
-  );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-action"
-      className={cn(
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="card-content" className={cn('px-6 [&:last-child]:pb-6', className)} {...props} />
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div
+    <div data-slot="card-footer" className={cn('flex items-center px-6 pb-6 [.border-t]:pt-6', className)} {...props} />
-      data-slot="card-content"
+  )
-      className={cn("px-6 [&:last-child]:pb-6", className)}
-      {...props}
-    />
-  );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-};

src/components/ui/carousel.tsx

@@ -1,108 +1,106 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import useEmblaCarousel, {
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
-  type UseEmblaCarouselType,
+import { ArrowLeft, ArrowRight } from 'lucide-react'
-} from "embla-carousel-react";
-import { ArrowLeft, ArrowRight } from "lucide-react";
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { Button } from "./button";
+import { Button } from './button'
 
-type CarouselApi = UseEmblaCarouselType[1];
+type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0];
+type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1];
+type CarouselPlugin = UseCarouselParameters[1]
 
 type CarouselProps = {
-  opts?: CarouselOptions;
+  opts?: CarouselOptions
-  plugins?: CarouselPlugin;
+  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical";
+  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void;
+  setApi?: (api: CarouselApi) => void
-};
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext);
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
 }
 
-  return context;
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />')
+  }
+
+  return context
 }
 
 function Carousel({
-  orientation = "horizontal",
+  orientation = 'horizontal',
   opts,
   setApi,
   plugins,
   className,
   children,
   ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
+}: React.ComponentProps<'div'> & CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       ...opts,
-      axis: orientation === "horizontal" ? "x" : "y",
+      axis: orientation === 'horizontal' ? 'x' : 'y',
     },
-    plugins,
+    plugins
-  );
+  )
-  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
 
   const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return;
+    if (!api) return
-    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollPrev(api.canScrollPrev())
-    setCanScrollNext(api.canScrollNext());
+    setCanScrollNext(api.canScrollNext())
-  }, []);
+  }, [])
 
   const scrollPrev = React.useCallback(() => {
-    api?.scrollPrev();
+    api?.scrollPrev()
-  }, [api]);
+  }, [api])
 
   const scrollNext = React.useCallback(() => {
-    api?.scrollNext();
+    api?.scrollNext()
-  }, [api]);
+  }, [api])
 
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "ArrowLeft") {
+      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
+        event.preventDefault()
-        scrollPrev();
+        scrollPrev()
-      } else if (event.key === "ArrowRight") {
+      } else if (event.key === 'ArrowRight') {
-        event.preventDefault();
+        event.preventDefault()
-        scrollNext();
+        scrollNext()
       }
     },
-    [scrollPrev, scrollNext],
+    [scrollPrev, scrollNext]
-  );
+  )
 
   React.useEffect(() => {
-    if (!api || !setApi) return;
+    if (!api || !setApi) return
-    setApi(api);
+    setApi(api)
-  }, [api, setApi]);
+  }, [api, setApi])
 
   React.useEffect(() => {
-    if (!api) return;
+    if (!api) return
-    onSelect(api);
+    onSelect(api)
-    api.on("reInit", onSelect);
+    api.on('reInit', onSelect)
-    api.on("select", onSelect);
+    api.on('select', onSelect)
 
     return () => {
-      api?.off("select", onSelect);
+      api?.off('select', onSelect)
-    };
+    }
-  }, [api, onSelect]);
+  }, [api, onSelect])
 
   return (
     <CarouselContext.Provider
@@ -110,8 +108,7 @@ function Carousel({
         carouselRef,
         api: api,
         opts,
-        orientation:
+        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
         scrollPrev,
         scrollNext,
         canScrollPrev,
@@ -120,7 +117,7 @@ function Carousel({
     >
       <div
         onKeyDownCapture={handleKeyDown}
-        className={cn("relative", className)}
+        className={cn('relative', className)}
         role="region"
         aria-roledescription="carousel"
         data-slot="carousel"
@@ -129,55 +126,40 @@ function Carousel({
         {children}
       </div>
     </CarouselContext.Provider>
-  );
+  )
 }
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
-      ref={carouselRef}
+      <div className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)} {...props} />
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
     </div>
-  );
+  )
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const { orientation } = useCarousel();
+  const { orientation } = useCarousel()
 
   return (
     <div
       role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
-      className={cn(
+      className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
 function CarouselPrevious({
   className,
-  variant = "outline",
+  variant = 'outline',
-  size = "icon",
+  size = 'icon',
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
@@ -185,11 +167,11 @@ function CarouselPrevious({
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        'absolute size-8 rounded-full',
-        orientation === "horizontal"
+        orientation === 'horizontal'
-          ? "top-1/2 -left-12 -translate-y-1/2"
+          ? 'top-1/2 -left-12 -translate-y-1/2'
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
+        className
       )}
       disabled={!canScrollPrev}
       onClick={scrollPrev}
@@ -198,16 +180,16 @@ function CarouselPrevious({
       <ArrowLeft />
       <span className="sr-only">Previous slide</span>
     </Button>
-  );
+  )
 }
 
 function CarouselNext({
   className,
-  variant = "outline",
+  variant = 'outline',
-  size = "icon",
+  size = 'icon',
   ...props
 }: React.ComponentProps<typeof Button>) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
@@ -215,11 +197,11 @@ function CarouselNext({
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        'absolute size-8 rounded-full',
-        orientation === "horizontal"
+        orientation === 'horizontal'
-          ? "top-1/2 -right-12 -translate-y-1/2"
+          ? 'top-1/2 -right-12 -translate-y-1/2'
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
+        className
       )}
       disabled={!canScrollNext}
       onClick={scrollNext}
@@ -228,14 +210,7 @@ function CarouselNext({
       <ArrowRight />
       <span className="sr-only">Next slide</span>
     </Button>
-  );
+  )
 }
 
-export {
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-};

src/components/ui/chart.tsx

@@ -1,37 +1,34 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as RechartsPrimitive from "recharts";
+import * as RechartsPrimitive from 'recharts'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const;
+const THEMES = { light: '', dark: '.dark' } as const
 
 export type ChartConfig = {
   [k in string]: {
-    label?: React.ReactNode;
+    label?: React.ReactNode
-    icon?: React.ComponentType;
+    icon?: React.ComponentType
-  } & (
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-};
-
-type ChartContextProps = {
-  config: ChartConfig;
-};
-
-const ChartContext = React.createContext<ChartContextProps | null>(null);
-
-function useChart() {
-  const context = React.useContext(ChartContext);
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
 }
 
-  return context;
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />')
+  }
+
+  return context
 }
 
 function ChartContainer({
@@ -40,14 +37,12 @@ function ChartContainer({
   children,
   config,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
-  config: ChartConfig;
+  config: ChartConfig
-  children: React.ComponentProps<
+  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"];
 }) {
-  const uniqueId = React.useId();
+  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -56,26 +51,22 @@ function ChartContainer({
         data-chart={chartId}
         className={cn(
           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
+          className
         )}
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  );
+  )
 }
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
-    ([, config]) => config.theme || config.color,
-  );
 
   if (!colorConfig.length) {
-    return null;
+    return null
   }
 
   return (
@@ -87,28 +78,26 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color =
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+    return color ? `  --color-${key}: ${color};` : null
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
   })
-  .join("\n")}
+  .join('\n')}
 }
-`,
+`
           )
-          .join("\n"),
+          .join('\n'),
       }}
     />
-  );
+  )
-};
+}
 
-const ChartTooltip = RechartsPrimitive.Tooltip;
+const ChartTooltip = RechartsPrimitive.Tooltip
 
 function ChartTooltipContent({
   active,
   payload,
   className,
-  indicator = "dot",
+  indicator = 'dot',
   hideLabel = false,
   hideIndicator = false,
   label,
@@ -119,77 +108,63 @@ function ChartTooltipContent({
   nameKey,
   labelKey,
 }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
-    hideLabel?: boolean;
+    hideLabel?: boolean
-    hideIndicator?: boolean;
+    hideIndicator?: boolean
-    indicator?: "line" | "dot" | "dashed";
+    indicator?: 'line' | 'dot' | 'dashed'
-    nameKey?: string;
+    nameKey?: string
-    labelKey?: string;
+    labelKey?: string
   }) {
-  const { config } = useChart();
+  const { config } = useChart()
 
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
-      return null;
+      return null
     }
 
-    const [item] = payload;
+    const [item] = payload
-    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const key = `${labelKey || item?.dataKey || item?.name || 'value'}`
-    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
     const value =
-      !labelKey && typeof label === "string"
+      !labelKey && typeof label === 'string' ? config[label as keyof typeof config]?.label || label : itemConfig?.label
-        ? config[label as keyof typeof config]?.label || label
-        : itemConfig?.label;
 
     if (labelFormatter) {
-      return (
+      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
-        <div className={cn("font-medium", labelClassName)}>
-          {labelFormatter(value, payload)}
-        </div>
-      );
     }
 
     if (!value) {
-      return null;
+      return null
     }
 
-    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
-  }, [
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
-    label,
-    labelFormatter,
-    payload,
-    hideLabel,
-    labelClassName,
-    config,
-    labelKey,
-  ]);
 
   if (!active || !payload?.length) {
-    return null;
+    return null
   }
 
-  const nestLabel = payload.length === 1 && indicator !== "dot";
+  const nestLabel = payload.length === 1 && indicator !== 'dot'
 
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
-        className,
+        className
       )}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
         {payload.map((item, index) => {
-          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const key = `${nameKey || item.name || item.dataKey || 'value'}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-          const indicatorColor = color || item.payload.fill || item.color;
+          const indicatorColor = color || item.payload.fill || item.color
 
           return (
             <div
               key={item.dataKey}
               className={cn(
-                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
-                indicator === "dot" && "items-center",
+                indicator === 'dot' && 'items-center'
               )}
             >
               {formatter && item?.value !== undefined && item.name ? (
@@ -201,36 +176,27 @@ function ChartTooltipContent({
                   ) : (
                     !hideIndicator && (
                       <div
-                        className={cn(
+                        className={cn('shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)', {
-                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          'h-2.5 w-2.5': indicator === 'dot',
-                          {
+                          'w-1': indicator === 'line',
-                            "h-2.5 w-2.5": indicator === "dot",
+                          'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',
-                            "w-1": indicator === "line",
+                          'my-0.5': nestLabel && indicator === 'dashed',
-                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                        })}
-                              indicator === "dashed",
-                            "my-0.5": nestLabel && indicator === "dashed",
-                          },
-                        )}
                         style={
                           {
-                            "--color-bg": indicatorColor,
+                            '--color-bg': indicatorColor,
-                            "--color-border": indicatorColor,
+                            '--color-border': indicatorColor,
                           } as React.CSSProperties
                         }
                       />
                     )
                   )}
                   <div
-                    className={cn(
+                    className={cn('flex flex-1 justify-between leading-none', nestLabel ? 'items-end' : 'items-center')}
-                      "flex flex-1 justify-between leading-none",
-                      nestLabel ? "items-end" : "items-center",
-                    )}
                   >
                     <div className="grid gap-1.5">
                       {nestLabel ? tooltipLabel : null}
-                      <span className="text-muted-foreground">
+                      <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
-                        {itemConfig?.label || item.name}
-                      </span>
                     </div>
                     {item.value && (
                       <span className="text-foreground font-mono font-medium tabular-nums">
@@ -241,50 +207,42 @@ function ChartTooltipContent({
                 </>
               )}
             </div>
-          );
+          )
         })}
       </div>
     </div>
-  );
+  )
 }
 
-const ChartLegend = RechartsPrimitive.Legend;
+const ChartLegend = RechartsPrimitive.Legend
 
 function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
-  verticalAlign = "bottom",
+  verticalAlign = 'bottom',
   nameKey,
-}: React.ComponentProps<"div"> &
+}: React.ComponentProps<'div'> &
-  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+  Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-    hideIcon?: boolean;
+    hideIcon?: boolean
-    nameKey?: string;
+    nameKey?: string
   }) {
-  const { config } = useChart();
+  const { config } = useChart()
 
   if (!payload?.length) {
-    return null;
+    return null
   }
 
   return (
-    <div
+    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>
-      className={cn(
+      {payload.map(item => {
-        "flex items-center justify-center gap-4",
+        const key = `${nameKey || item.dataKey || 'value'}`
-        verticalAlign === "top" ? "pb-3" : "pt-3",
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
-        className,
-      )}
-    >
-      {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
         return (
           <div
             key={item.value}
-            className={cn(
+            className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')}
-              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
-            )}
           >
             {itemConfig?.icon && !hideIcon ? (
               <itemConfig.icon />
@@ -298,56 +256,36 @@ function ChartLegendContent({
             )}
             {itemConfig?.label}
           </div>
-        );
+        )
       })}
     </div>
-  );
+  )
 }
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
-  config: ChartConfig,
+  if (typeof payload !== 'object' || payload === null) {
-  payload: unknown,
+    return undefined
-  key: string,
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload &&
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
-    typeof payload.payload === "object" &&
-    payload.payload !== null
       ? payload.payload
-      : undefined;
+      : undefined
 
-  let configLabelKey: string = key;
+  let configLabelKey: string = key
 
-  if (
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
-    key in payload &&
+    configLabelKey = payload[key as keyof typeof payload] as string
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
   ) {
-    configLabelKey = payloadPayload[
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
-      key as keyof typeof payloadPayload
-    ] as string;
   }
 
-  return configLabelKey in config
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
 }
 
-export {
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-};

src/components/ui/checkbox.tsx

@@ -1,21 +1,18 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from "lucide-react";
+import { CheckIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Checkbox({
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        'peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
+        className
       )}
       {...props}
     >
@@ -26,7 +23,7 @@ function Checkbox({
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
-  );
+  )
 }
 
-export { Checkbox };
+export { Checkbox }

src/components/ui/collapsible.tsx

@@ -1,33 +1,17 @@
-"use client";
+'use client'
 
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
-function Collapsible({
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  ...props
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
-function CollapsibleTrigger({
+function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  ...props
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  );
 }
 
-function CollapsibleContent({
+function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  ...props
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  );
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

@@ -1,42 +1,33 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { Command as CommandPrimitive } from "cmdk";
+import { Command as CommandPrimitive } from 'cmdk'
-import { SearchIcon } from "lucide-react";
+import { SearchIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import {
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog'
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
 
-function Command({
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive>) {
   return (
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function CommandDialog({
-  title = "Command Palette",
+  title = 'Command Palette',
-  description = "Search for a command to run...",
+  description = 'Search for a command to run...',
   children,
   ...props
 }: React.ComponentProps<typeof Dialog> & {
-  title?: string;
+  title?: string
-  description?: string;
+  description?: string
 }) {
   return (
     <Dialog {...props}>
@@ -50,118 +41,83 @@ function CommandDialog({
         </Command>
       </DialogContent>
     </Dialog>
-  );
+  )
 }
 
-function CommandInput({
+function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
       <SearchIcon className="size-4 shrink-0 opacity-50" />
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-          className,
+          className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
-function CommandList({
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
   return (
     <CommandPrimitive.List
       data-slot="command-list"
-      className={cn(
+      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function CommandEmpty({
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  ...props
+  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className="py-6 text-center text-sm"
-      {...props}
-    />
-  );
 }
 
-function CommandGroup({
+function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
   return (
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CommandSeparator({
+function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn('bg-border -mx-1 h-px', className)}
       {...props}
     />
-  );
+  )
 }
 
-function CommandItem({
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
   return (
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
         "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function CommandShortcut({
+function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="command-shortcut"
-      className={cn(
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -174,4 +130,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-};
+}

src/components/ui/context-menu.tsx

@@ -1,56 +1,33 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function ContextMenu({
+function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  ...props
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
-function ContextMenuTrigger({
+function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  ...props
+  return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  );
 }
 
-function ContextMenuGroup({
+function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  ...props
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  );
 }
 
-function ContextMenuPortal({
+function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  ...props
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  );
 }
 
-function ContextMenuSub({
+function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  ...props
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
 }
 
-function ContextMenuRadioGroup({
+function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  ...props
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  );
 }
 
 function ContextMenuSubTrigger({
@@ -59,7 +36,7 @@ function ContextMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <ContextMenuPrimitive.SubTrigger
@@ -67,58 +44,52 @@ function ContextMenuSubTrigger({
       data-inset={inset}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto" />
     </ContextMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
-function ContextMenuSubContent({
+function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
   return (
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function ContextMenuContent({
+function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
   return (
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
+          className
         )}
         {...props}
       />
     </ContextMenuPrimitive.Portal>
-  );
+  )
 }
 
 function ContextMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-  inset?: boolean;
+  inset?: boolean
-  variant?: "default" | "destructive";
+  variant?: 'default' | 'destructive'
 }) {
   return (
     <ContextMenuPrimitive.Item
@@ -127,11 +98,11 @@ function ContextMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function ContextMenuCheckboxItem({
@@ -145,7 +116,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -157,7 +128,7 @@ function ContextMenuCheckboxItem({
       </span>
       {children}
     </ContextMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
 function ContextMenuRadioItem({
@@ -170,7 +141,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -181,7 +152,7 @@ function ContextMenuRadioItem({
       </span>
       {children}
     </ContextMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function ContextMenuLabel({
@@ -189,48 +160,36 @@ function ContextMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <ContextMenuPrimitive.Label
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
+      className={cn('text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function ContextMenuSeparator({
+function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  );
+  )
 }
 
-function ContextMenuShortcut({
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="context-menu-shortcut"
-      className={cn(
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -249,4 +208,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-};
+}

src/components/ui/dialog.tsx

@@ -1,64 +1,49 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from "lucide-react";
+import { XIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Dialog({
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  ...props
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
-function DialogTrigger({
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  ...props
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
-function DialogPortal({
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  ...props
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
-function DialogClose({
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  ...props
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="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/50",
+        '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/50',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function DialogContent({
+function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content>) {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
       <DialogPrimitive.Content
         data-slot="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",
+          '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,
+          className
         )}
         {...props}
       >
@@ -69,56 +54,47 @@ function DialogContent({
         </DialogPrimitive.Close>
       </DialogPrimitive.Content>
     </DialogPortal>
-  );
+  )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
       {...props}
     />
-  );
+  )
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="dialog-footer"
-      className={cn(
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function DialogTitle({
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
+      className={cn('text-lg leading-none font-semibold', className)}
       {...props}
     />
-  );
+  )
 }
 
-function DialogDescription({
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -132,4 +108,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-};
+}

src/components/ui/drawer.tsx

@@ -1,67 +1,52 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { Drawer as DrawerPrimitive } from "vaul";
+import { Drawer as DrawerPrimitive } from 'vaul'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Drawer({
+function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  ...props
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
 }
 
-function DrawerTrigger({
+function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  ...props
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
 }
 
-function DrawerPortal({
+function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  ...props
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
 }
 
-function DrawerClose({
+function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  ...props
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
 }
 
-function DrawerOverlay({
+function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
   return (
     <DrawerPrimitive.Overlay
       data-slot="drawer-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/50",
+        '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/50',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function DrawerContent({
+function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
   return (
     <DrawerPortal data-slot="drawer-portal">
       <DrawerOverlay />
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
-          className,
+          className
         )}
         {...props}
       >
@@ -69,53 +54,35 @@ function DrawerContent({
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
-  );
+  )
 }
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="drawer-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
-    <div
-      data-slot="drawer-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  );
 }
 
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="drawer-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
-    <div
-      data-slot="drawer-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  );
 }
 
-function DrawerTitle({
+function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn('text-foreground font-semibold', className)}
       {...props}
     />
-  );
+  )
 }
 
-function DrawerDescription({
+function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -129,4 +96,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-};
+}

src/components/ui/dropdown-menu.tsx

@@ -1,34 +1,21 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function DropdownMenu({
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  ...props
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
-function DropdownMenuPortal({
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  ...props
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
 }
 
-function DropdownMenuTrigger({
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  ...props
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  );
 }
 
 function DropdownMenuContent({
@@ -42,31 +29,27 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
+          className
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
-function DropdownMenuGroup({
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  ...props
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
+  inset?: boolean
-  variant?: "default" | "destructive";
+  variant?: 'default' | 'destructive'
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -75,11 +58,11 @@ function DropdownMenuItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DropdownMenuCheckboxItem({
@@ -93,7 +76,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -105,18 +88,11 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
-function DropdownMenuRadioGroup({
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  ...props
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
 }
 
 function DropdownMenuRadioItem({
@@ -129,7 +105,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -140,7 +116,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -148,54 +124,40 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
+      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuSeparator({
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuShortcut({
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
-      className={cn(
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuSub({
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  ...props
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,22 +166,22 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
 function DropdownMenuSubContent({
@@ -230,12 +192,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -254,4 +216,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-};
+}

src/components/ui/form.tsx

@@ -1,8 +1,8 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as LabelPrimitive from "@radix-ui/react-label";
+import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from '@radix-ui/react-slot'
 import {
   Controller,
   FormProvider,
@@ -11,23 +11,21 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form";
+} from 'react-hook-form'
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { Label } from "./label";
+import { Label } from './label'
 
-const Form = FormProvider;
+const Form = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName;
+  name: TName
-};
+}
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue)
-  {} as FormFieldContextValue,
-);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -39,21 +37,21 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  );
+  )
-};
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState } = useFormContext();
-  const formState = useFormState({ name: fieldContext.name });
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
 }
 
-  const { id } = itemContext;
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
 
   return {
     id,
@@ -62,107 +60,79 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  };
+  }
-};
+}
 
 type FormItemContextValue = {
-  id: string;
+  id: string
-};
+}
 
-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue)
-  {} as FormItemContextValue,
-);
 
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
-  const id = React.useId();
+  const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
+      <div data-slot="form-item" className={cn('grid gap-2', className)} {...props} />
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
     </FormItemContext.Provider>
-  );
+  )
 }
 
-function FormLabel({
+function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  className,
+  const { error, formItemId } = useFormField()
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
 
   return (
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn("data-[error=true]:text-destructive", className)}
+      className={cn('data-[error=true]:text-destructive', className)}
       htmlFor={formItemId}
       {...props}
     />
-  );
+  )
 }
 
 function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-    useFormField();
 
   return (
     <Slot
       data-slot="form-control"
       id={formItemId}
-      aria-describedby={
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
       aria-invalid={!!error}
       {...props}
     />
-  );
+  )
 }
 
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  const { formDescriptionId } = useFormField();
+  const { formDescriptionId } = useFormField()
 
   return (
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
-  const { error, formMessageId } = useFormField();
+  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children;
+  const body = error ? String(error?.message ?? '') : props.children
 
   if (!body) {
-    return null;
+    return null
   }
 
   return (
-    <p
+    <p data-slot="form-message" id={formMessageId} className={cn('text-destructive text-sm', className)} {...props}>
-      data-slot="form-message"
-      id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
-      {...props}
-    >
       {body}
     </p>
-  );
+  )
 }
 
-export {
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-};

src/components/ui/hover-card.tsx

@@ -1,27 +1,21 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function HoverCard({
+function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  ...props
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
 }
 
-function HoverCardTrigger({
+function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  ...props
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  );
 }
 
 function HoverCardContent({
   className,
-  align = "center",
+  align = 'center',
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
@@ -32,13 +26,13 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
+          className
         )}
         {...props}
       />
     </HoverCardPrimitive.Portal>
-  );
+  )
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/input-otp.tsx

@@ -1,58 +1,49 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { OTPInput, OTPInputContext } from "input-otp";
+import { OTPInput, OTPInputContext } from 'input-otp'
-import { MinusIcon } from "lucide-react";
+import { MinusIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 function InputOTP({
   className,
   containerClassName,
   ...props
 }: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string;
+  containerClassName?: string
 }) {
   return (
     <OTPInput
       data-slot="input-otp"
-      containerClassName={cn(
+      containerClassName={cn('flex items-center gap-2 has-disabled:opacity-50', containerClassName)}
-        "flex items-center gap-2 has-disabled:opacity-50",
+      className={cn('disabled:cursor-not-allowed', className)}
-        containerClassName,
-      )}
-      className={cn("disabled:cursor-not-allowed", className)}
       {...props}
     />
-  );
+  )
 }
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="input-otp-group" className={cn('flex items-center gap-1', className)} {...props} />
-    <div
-      data-slot="input-otp-group"
-      className={cn("flex items-center gap-1", className)}
-      {...props}
-    />
-  );
 }
 
 function InputOTPSlot({
   index,
   className,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
-  index: number;
+  index: number
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext);
+  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
 
   return (
     <div
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm bg-input-background transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
-        className,
+        className
       )}
       {...props}
     >
@@ -63,15 +54,15 @@ function InputOTPSlot({
         </div>
       )}
     </div>
-  );
+  )
 }
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
     <div data-slot="input-otp-separator" role="separator" {...props}>
       <MinusIcon />
     </div>
-  );
+  )
 }
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

src/components/ui/input.tsx

@@ -1,21 +1,21 @@
-import * as React from "react";
+import * as React from 'react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Input };
+export { Input }

src/components/ui/label.tsx

@@ -1,24 +1,21 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as LabelPrimitive from "@radix-ui/react-label";
+import * as LabelPrimitive from '@radix-ui/react-label'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Label({
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
   return (
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Label };
+export { Label }

src/components/ui/menubar.tsx

@@ -1,72 +1,53 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Menubar({
+function Menubar({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
   return (
     <MenubarPrimitive.Root
       data-slot="menubar"
-      className={cn(
+      className={cn('bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs', className)}
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function MenubarMenu({
+function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  ...props
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
-}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
 }
 
-function MenubarGroup({
+function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  ...props
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
-}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
 }
 
-function MenubarPortal({
+function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  ...props
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
-}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
 }
 
-function MenubarRadioGroup({
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  ...props
+  return <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  );
 }
 
-function MenubarTrigger({
+function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
   return (
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarContent({
   className,
-  align = "start",
+  align = 'start',
   alignOffset = -4,
   sideOffset = 8,
   ...props
@@ -79,23 +60,23 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md',
-          className,
+          className
         )}
         {...props}
       />
     </MenubarPortal>
-  );
+  )
 }
 
 function MenubarItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean;
+  inset?: boolean
-  variant?: "default" | "destructive";
+  variant?: 'default' | 'destructive'
 }) {
   return (
     <MenubarPrimitive.Item
@@ -104,11 +85,11 @@ function MenubarItem({
       data-variant={variant}
       className={cn(
         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function MenubarCheckboxItem({
@@ -122,7 +103,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       checked={checked}
       {...props}
@@ -134,20 +115,16 @@ function MenubarCheckboxItem({
       </span>
       {children}
     </MenubarPrimitive.CheckboxItem>
-  );
+  )
 }
 
-function MenubarRadioItem({
+function MenubarRadioItem({ className, children, ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
   return (
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -158,7 +135,7 @@ function MenubarRadioItem({
       </span>
       {children}
     </MenubarPrimitive.RadioItem>
-  );
+  )
 }
 
 function MenubarLabel({
@@ -166,54 +143,40 @@ function MenubarLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenubarPrimitive.Label
       data-slot="menubar-label"
       data-inset={inset}
-      className={cn(
+      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function MenubarSeparator({
+function MenubarSeparator({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
       {...props}
     />
-  );
+  )
 }
 
-function MenubarShortcut({
+function MenubarShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="menubar-shortcut"
-      className={cn(
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function MenubarSub({
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  ...props
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
-}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
-  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
 }
 
 function MenubarSubTrigger({
@@ -222,38 +185,35 @@ function MenubarSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <MenubarPrimitive.SubTrigger
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
-        className,
+        className
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto h-4 w-4" />
     </MenubarPrimitive.SubTrigger>
-  );
+  )
 }
 
-function MenubarSubContent({
+function MenubarSubContent({ className, ...props }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
   return (
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -273,4 +233,4 @@ export {
   MenubarSub,
   MenubarSubTrigger,
   MenubarSubContent,
-};
+}

src/components/ui/navigation-menu.tsx

@@ -1,9 +1,9 @@
-import * as React from "react";
+import * as React from 'react'
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
-import { ChevronDownIcon } from "lucide-react";
+import { ChevronDownIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 function NavigationMenu({
   className,
@@ -11,56 +11,40 @@ function NavigationMenu({
   viewport = true,
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean;
+  viewport?: boolean
 }) {
   return (
     <NavigationMenuPrimitive.Root
       data-slot="navigation-menu"
       data-viewport={viewport}
-      className={cn(
+      className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
-        className,
-      )}
       {...props}
     >
       {children}
       {viewport && <NavigationMenuViewport />}
     </NavigationMenuPrimitive.Root>
-  );
+  )
 }
 
-function NavigationMenuList({
+function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
   return (
     <NavigationMenuPrimitive.List
       data-slot="navigation-menu-list"
-      className={cn(
+      className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
-        "group flex flex-1 list-none items-center justify-center gap-1",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function NavigationMenuItem({
+function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
   return (
-    <NavigationMenuPrimitive.Item
+    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn('relative', className)} {...props} />
-      data-slot="navigation-menu-item"
+  )
-      className={cn("relative", className)}
-      {...props}
-    />
-  );
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1'
-);
+)
 
 function NavigationMenuTrigger({
   className,
@@ -70,33 +54,30 @@ function NavigationMenuTrigger({
   return (
     <NavigationMenuPrimitive.Trigger
       data-slot="navigation-menu-trigger"
-      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
       {...props}
     >
-      {children}{" "}
+      {children}{' '}
       <ChevronDownIcon
         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
-  );
+  )
 }
 
-function NavigationMenuContent({
+function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
   return (
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function NavigationMenuViewport({
@@ -104,37 +85,30 @@ function NavigationMenuViewport({
   ...props
 }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
   return (
-    <div
+    <div className={cn('absolute top-full left-0 isolate z-50 flex justify-center')}>
-      className={cn(
-        "absolute top-full left-0 isolate z-50 flex justify-center",
-      )}
-    >
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
-          className,
+          className
         )}
         {...props}
       />
     </div>
-  );
+  )
 }
 
-function NavigationMenuLink({
+function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
   return (
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
         "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function NavigationMenuIndicator({
@@ -145,14 +119,14 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
-        className,
+        className
       )}
       {...props}
     >
       <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
     </NavigationMenuPrimitive.Indicator>
-  );
+  )
 }
 
 export {
@@ -165,4 +139,4 @@ export {
   NavigationMenuIndicator,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
-};
+}

src/components/ui/pagination.tsx

@@ -1,119 +1,92 @@
-import * as React from "react";
+import * as React from 'react'
-import {
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react";
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { Button, buttonVariants } from "./button";
+import { Button, buttonVariants } from './button'
 
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
     <nav
       role="navigation"
       aria-label="pagination"
       data-slot="pagination"
-      className={cn("mx-auto flex w-full justify-center", className)}
+      className={cn('mx-auto flex w-full justify-center', className)}
       {...props}
     />
-  );
+  )
 }
 
-function PaginationContent({
+function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>) {
-  className,
+  return <ul data-slot="pagination-content" className={cn('flex flex-row items-center gap-1', className)} {...props} />
-  ...props
-}: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="pagination-content"
-      className={cn("flex flex-row items-center gap-1", className)}
-      {...props}
-    />
-  );
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+function PaginationItem({ ...props }: React.ComponentProps<'li'>) {
-  return <li data-slot="pagination-item" {...props} />;
+  return <li data-slot="pagination-item" {...props} />
 }
 
 type PaginationLinkProps = {
-  isActive?: boolean;
+  isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
+} & Pick<React.ComponentProps<typeof Button>, 'size'> &
-  React.ComponentProps<"a">;
+  React.ComponentProps<'a'>
 
-function PaginationLink({
+function PaginationLink({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) {
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: PaginationLinkProps) {
   return (
     <a
-      aria-current={isActive ? "page" : undefined}
+      aria-current={isActive ? 'page' : undefined}
       data-slot="pagination-link"
       data-active={isActive}
       className={cn(
         buttonVariants({
-          variant: isActive ? "outline" : "ghost",
+          variant: isActive ? 'outline' : 'ghost',
           size,
         }),
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function PaginationPrevious({
+function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
       size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
       {...props}
     >
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  );
+  )
 }
 
-function PaginationNext({
+function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to next page"
       size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
       {...props}
     >
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  );
+  )
 }
 
-function PaginationEllipsis({
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
   return (
     <span
       aria-hidden
       data-slot="pagination-ellipsis"
-      className={cn("flex size-9 items-center justify-center", className)}
+      className={cn('flex size-9 items-center justify-center', className)}
       {...props}
     >
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  );
+  )
 }
 
 export {
@@ -124,4 +97,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-};
+}

src/components/ui/popover.tsx

@@ -1,25 +1,21 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Popover({
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  ...props
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  ...props
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
   className,
-  align = "center",
+  align = 'center',
   sideOffset = 4,
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
@@ -30,19 +26,17 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
-          className,
+          className
         )}
         {...props}
       />
     </PopoverPrimitive.Portal>
-  );
+  )
 }
 
-function PopoverAnchor({
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  ...props
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/progress.tsx

@@ -1,22 +1,15 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as ProgressPrimitive from '@radix-ui/react-progress'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Progress({
+function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
   return (
     <ProgressPrimitive.Root
       data-slot="progress"
-      className={cn(
+      className={cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className)}
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-        className,
-      )}
       {...props}
     >
       <ProgressPrimitive.Indicator
@@ -25,7 +18,7 @@ function Progress({
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
-  );
+  )
 }
 
-export { Progress };
+export { Progress }

src/components/ui/radio-group.tsx

@@ -1,34 +1,22 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { CircleIcon } from "lucide-react";
+import { CircleIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function RadioGroup({
+function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  className,
+  return <RadioGroupPrimitive.Root data-slot="radio-group" className={cn('grid gap-3', className)} {...props} />
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn("grid gap-3", className)}
-      {...props}
-    />
-  );
 }
 
-function RadioGroupItem({
+function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
   return (
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
+        className
       )}
       {...props}
     >
@@ -39,7 +27,7 @@ function RadioGroupItem({
         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  );
+  )
 }
 
-export { RadioGroup, RadioGroupItem };
+export { RadioGroup, RadioGroupItem }

src/components/ui/resizable.tsx

@@ -1,31 +1,23 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { GripVerticalIcon } from "lucide-react";
+import { GripVerticalIcon } from 'lucide-react'
-import * as ResizablePrimitive from "react-resizable-panels";
+import * as ResizablePrimitive from 'react-resizable-panels'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function ResizablePanelGroup({
+function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
   return (
     <ResizablePrimitive.PanelGroup
       data-slot="resizable-panel-group"
-      className={cn(
+      className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function ResizablePanel({
+function ResizablePanel({ ...props }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  ...props
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
 }
 
 function ResizableHandle({
@@ -33,14 +25,14 @@ function ResizableHandle({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
+  withHandle?: boolean
 }) {
   return (
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
-        className,
+        className
       )}
       {...props}
     >
@@ -50,7 +42,7 @@ function ResizableHandle({
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>
-  );
+  )
 }
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/components/ui/scroll-area.tsx

@@ -1,21 +1,13 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function ScrollArea({
+function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
   return (
-    <ScrollAreaPrimitive.Root
+    <ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
@@ -25,12 +17,12 @@ function ScrollArea({
       <ScrollBar />
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
-  );
+  )
 }
 
 function ScrollBar({
   className,
-  orientation = "vertical",
+  orientation = 'vertical',
   ...props
 }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
   return (
@@ -38,12 +30,10 @@ function ScrollBar({
       data-slot="scroll-area-scrollbar"
       orientation={orientation}
       className={cn(
-        "flex touch-none p-px transition-colors select-none",
+        'flex touch-none p-px transition-colors select-none',
-        orientation === "vertical" &&
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
-          "h-full w-2.5 border-l border-l-transparent",
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
-        orientation === "horizontal" &&
+        className
-          "h-2.5 flex-col border-t border-t-transparent",
-        className,
       )}
       {...props}
     >
@@ -52,7 +42,7 @@ function ScrollBar({
         className="bg-border relative flex-1 rounded-full"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
+  )
 }
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }

src/components/ui/select.tsx

@@ -1,40 +1,30 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as SelectPrimitive from "@radix-ui/react-select";
+import * as SelectPrimitive from '@radix-ui/react-select'
-import {
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "lucide-react";
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Select({
+function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  ...props
+  return <SelectPrimitive.Root data-slot="select" {...props} />
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
-function SelectGroup({
+function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  ...props
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
-function SelectValue({
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  ...props
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
 function SelectTrigger({
   className,
-  size = "default",
+  size = 'default',
   children,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default";
+  size?: 'sm' | 'default'
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -42,7 +32,7 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     >
@@ -51,13 +41,13 @@ function SelectTrigger({
         <ChevronDownIcon className="size-4 opacity-50" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
-  );
+  )
 }
 
 function SelectContent({
   className,
   children,
-  position = "popper",
+  position = 'popper',
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
   return (
@@ -65,10 +55,10 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
-          position === "popper" &&
+          position === 'popper' &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-          className,
+          className
         )}
         position={position}
         {...props}
@@ -76,9 +66,9 @@ function SelectContent({
         <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
-            "p-1",
+            'p-1',
-            position === "popper" &&
+            position === 'popper' &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'
           )}
         >
           {children}
@@ -86,33 +76,26 @@ function SelectContent({
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
-  );
+  )
 }
 
-function SelectLabel({
+function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SelectItem({
+function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className,
+        className
       )}
       {...props}
     >
@@ -123,38 +106,29 @@ function SelectItem({
       </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
-  );
+  )
 }
 
-function SelectSeparator({
+function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SelectScrollUpButton({
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
-      className={cn(
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
       {...props}
     >
       <ChevronUpIcon className="size-4" />
     </SelectPrimitive.ScrollUpButton>
-  );
+  )
 }
 
 function SelectScrollDownButton({
@@ -164,15 +138,12 @@ function SelectScrollDownButton({
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
-      className={cn(
+      className={cn('flex cursor-default items-center justify-center py-1', className)}
-        "flex cursor-default items-center justify-center py-1",
-        className,
-      )}
       {...props}
     >
       <ChevronDownIcon className="size-4" />
     </SelectPrimitive.ScrollDownButton>
-  );
+  )
 }
 
 export {
@@ -186,4 +157,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-};
+}

src/components/ui/separator.tsx

@@ -1,13 +1,13 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 function Separator({
   className,
-  orientation = "horizontal",
+  orientation = 'horizontal',
   decorative = true,
   ...props
 }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
@@ -17,12 +17,12 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Separator };
+export { Separator }

src/components/ui/sheet.tsx

@@ -1,56 +1,47 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { XIcon } from "lucide-react";
+import { XIcon } from 'lucide-react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
 }
 
-function SheetTrigger({
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  ...props
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
-function SheetClose({
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  ...props
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
-function SheetPortal({
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  ...props
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
-function SheetOverlay({
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
   return (
     <SheetPrimitive.Overlay
       data-slot="sheet-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/50",
+        '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/50',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SheetContent({
   className,
   children,
-  side = "right",
+  side = 'right',
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left";
+  side?: 'top' | 'right' | 'bottom' | 'left'
 }) {
   return (
     <SheetPortal>
@@ -58,16 +49,16 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
-          side === "right" &&
+          side === 'right' &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
-          side === "left" &&
+          side === 'left' &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
-          side === "top" &&
+          side === 'top' &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
-          side === "bottom" &&
+          side === 'bottom' &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
-          className,
+          className
         )}
         {...props}
       >
@@ -78,62 +69,35 @@ function SheetContent({
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
     </SheetPortal>
-  );
+  )
 }
 
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="sheet-header" className={cn('flex flex-col gap-1.5 p-4', className)} {...props} />
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
-    />
-  );
 }
 
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="sheet-footer" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  );
 }
 
-function SheetTitle({
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn('text-foreground font-semibold', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SheetDescription({
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
-export {
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }
-  Sheet,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-};

src/components/ui/sidebar.tsx

@@ -1,56 +1,45 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from '@radix-ui/react-slot'
-import { VariantProps, cva } from "class-variance-authority";
+import { VariantProps, cva } from 'class-variance-authority'
-import { PanelLeftIcon } from "lucide-react";
+import { PanelLeftIcon } from 'lucide-react'
 
-import { useIsMobile } from "./use-mobile";
+import { useIsMobile } from './use-mobile'
-import { cn } from "./utils";
+import { cn } from './utils'
-import { Button } from "./button";
+import { Button } from './button'
-import { Input } from "./input";
+import { Input } from './input'
-import { Separator } from "./separator";
+import { Separator } from './separator'
-import {
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from './sheet'
-  Sheet,
+import { Skeleton } from './skeleton'
-  SheetContent,
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "./sheet";
-import { Skeleton } from "./skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "./tooltip";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed";
+  state: 'expanded' | 'collapsed'
-  open: boolean;
+  open: boolean
-  setOpen: (open: boolean) => void;
+  setOpen: (open: boolean) => void
-  openMobile: boolean;
+  openMobile: boolean
-  setOpenMobile: (open: boolean) => void;
+  setOpenMobile: (open: boolean) => void
-  isMobile: boolean;
+  isMobile: boolean
-  toggleSidebar: () => void;
+  toggleSidebar: () => void
-};
-
-const SidebarContext = React.createContext<SidebarContextProps | null>(null);
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.");
 }
 
-  return context;
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
 }
 
 function SidebarProvider({
@@ -61,57 +50,54 @@ function SidebarProvider({
   style,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
-  defaultOpen?: boolean;
+  defaultOpen?: boolean
-  open?: boolean;
+  open?: boolean
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean) => void
 }) {
-  const isMobile = useIsMobile();
+  const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false);
+  const [openMobile, setOpenMobile] = React.useState(false)
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen);
+  const [_open, _setOpen] = React.useState(defaultOpen)
-  const open = openProp ?? _open;
+  const open = openProp ?? _open
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {
-      const openState = typeof value === "function" ? value(open) : value;
+      const openState = typeof value === 'function' ? value(open) : value
       if (setOpenProp) {
-        setOpenProp(openState);
+        setOpenProp(openState)
       } else {
-        _setOpen(openState);
+        _setOpen(openState)
       }
 
       // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
-    [setOpenProp, open],
+    [setOpenProp, open]
-  );
+  )
 
   // Helper to toggle the sidebar.
   const toggleSidebar = React.useCallback(() => {
-    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open)
-  }, [isMobile, setOpen, setOpenMobile]);
+  }, [isMobile, setOpen, setOpenMobile])
 
   // Adds a keyboard shortcut to toggle the sidebar.
   React.useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        event.preventDefault()
-        (event.metaKey || event.ctrlKey)
+        toggleSidebar()
-      ) {
+      }
-        event.preventDefault();
-        toggleSidebar();
     }
-    };
 
-    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener('keydown', handleKeyDown)
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [toggleSidebar]);
+  }, [toggleSidebar])
 
   // We add a state so that we can do data-state="expanded" or "collapsed".
   // This makes it easier to style the sidebar with Tailwind classes.
-  const state = open ? "expanded" : "collapsed";
+  const state = open ? 'expanded' : 'collapsed'
 
   const contextValue = React.useMemo<SidebarContextProps>(
     () => ({
@@ -123,8 +109,8 @@ function SidebarProvider({
       setOpenMobile,
       toggleSidebar,
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-  );
+  )
 
   return (
     <SidebarContext.Provider value={contextValue}>
@@ -133,51 +119,45 @@ function SidebarProvider({
           data-slot="sidebar-wrapper"
           style={
             {
-              "--sidebar-width": SIDEBAR_WIDTH,
+              '--sidebar-width': SIDEBAR_WIDTH,
-              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
               ...style,
             } as React.CSSProperties
           }
-          className={cn(
+          className={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
-            className,
-          )}
           {...props}
         >
           {children}
         </div>
       </TooltipProvider>
     </SidebarContext.Provider>
-  );
+  )
 }
 
 function Sidebar({
-  side = "left",
+  side = 'left',
-  variant = "sidebar",
+  variant = 'sidebar',
-  collapsible = "offcanvas",
+  collapsible = 'offcanvas',
   className,
   children,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
-  side?: "left" | "right";
+  side?: 'left' | 'right'
-  variant?: "sidebar" | "floating" | "inset";
+  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: "offcanvas" | "icon" | "none";
+  collapsible?: 'offcanvas' | 'icon' | 'none'
 }) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-  if (collapsible === "none") {
+  if (collapsible === 'none') {
     return (
       <div
         data-slot="sidebar"
-        className={cn(
+        className={cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
-          className,
-        )}
         {...props}
       >
         {children}
       </div>
-    );
+    )
   }
 
   if (isMobile) {
@@ -190,7 +170,7 @@ function Sidebar({
           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
           style={
             {
-              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
             } as React.CSSProperties
           }
           side={side}
@@ -202,14 +182,14 @@ function Sidebar({
           <div className="flex h-full w-full flex-col">{children}</div>
         </SheetContent>
       </Sheet>
-    );
+    )
   }
 
   return (
     <div
       className="group peer text-sidebar-foreground hidden md:block"
       data-state={state}
-      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
       data-variant={variant}
       data-side={side}
       data-slot="sidebar"
@@ -218,26 +198,26 @@ function Sidebar({
       <div
         data-slot="sidebar-gap"
         className={cn(
-          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          "group-data-[collapsible=offcanvas]:w-0",
+          'group-data-[collapsible=offcanvas]:w-0',
-          "group-data-[side=right]:rotate-180",
+          'group-data-[side=right]:rotate-180',
-          variant === "floating" || variant === "inset"
+          variant === 'floating' || variant === 'inset'
-            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
         )}
       />
       <div
         data-slot="sidebar-container"
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
-          side === "left"
+          side === 'left'
-            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
           // Adjust the padding for floating and inset variants.
-          variant === "floating" || variant === "inset"
+          variant === 'floating' || variant === 'inset'
-            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
+          className
         )}
         {...props}
       >
@@ -250,15 +230,11 @@ function Sidebar({
         </div>
       </div>
     </div>
-  );
+  )
 }
 
-function SidebarTrigger({
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
-  className,
+  const { toggleSidebar } = useSidebar()
-  onClick,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar } = useSidebar();
 
   return (
     <Button
@@ -266,21 +242,21 @@ function SidebarTrigger({
       data-slot="sidebar-trigger"
       variant="ghost"
       size="icon"
-      className={cn("size-7", className)}
+      className={cn('size-7', className)}
-      onClick={(event) => {
+      onClick={event => {
-        onClick?.(event);
+        onClick?.(event)
-        toggleSidebar();
+        toggleSidebar()
       }}
       {...props}
     >
       <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
-  );
+  )
 }
 
-function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
-  const { toggleSidebar } = useSidebar();
+  const { toggleSidebar } = useSidebar()
 
   return (
     <button
@@ -291,225 +267,216 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
-        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
   return (
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        'bg-background relative flex w-full flex-1 flex-col',
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarInput({
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof Input>) {
   return (
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn('bg-background h-8 w-full shadow-none', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn('flex flex-col gap-2 p-2', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
+      className={cn('flex flex-col gap-2 p-2', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarSeparator({
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="sidebar-group"
       data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarGroupLabel({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "div";
+  const Comp = asChild ? Slot : 'div'
 
   return (
     <Comp
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarGroupAction({
   className,
   asChild = false,
   ...props
-}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button'
 
   return (
     <Comp
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
+        'after:absolute after:-inset-2 md:after:hidden',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarGroupContent({
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-group-content"
       data-sidebar="group-content"
-      className={cn("w-full text-sm", className)}
+      className={cn('w-full text-sm', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
   return (
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
   return (
     <li
       data-slot="sidebar-menu-item"
       data-sidebar="menu-item"
-      className={cn("group/menu-item relative", className)}
+      className={cn('group/menu-item relative', className)}
       {...props}
     />
-  );
+  )
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: "h-8 text-sm",
+        default: 'h-8 text-sm',
-        sm: "h-7 text-xs",
+        sm: 'h-7 text-xs',
-        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
-  },
+  }
-);
+)
 
 function SidebarMenuButton({
   asChild = false,
   isActive = false,
-  variant = "default",
+  variant = 'default',
-  size = "default",
+  size = 'default',
   tooltip,
   className,
   ...props
-}: React.ComponentProps<"button"> & {
+}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
+  asChild?: boolean
-  isActive?: boolean;
+  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
 } & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button'
-  const { isMobile, state } = useSidebar();
+  const { isMobile, state } = useSidebar()
 
   const button = (
     <Comp
@@ -520,29 +487,24 @@ function SidebarMenuButton({
       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
       {...props}
     />
-  );
+  )
 
   if (!tooltip) {
-    return button;
+    return button
   }
 
-  if (typeof tooltip === "string") {
+  if (typeof tooltip === 'string') {
     tooltip = {
       children: tooltip,
-    };
+    }
   }
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
+      <TooltipContent side="right" align="center" hidden={state !== 'collapsed' || isMobile} {...tooltip} />
-        side="right"
-        align="center"
-        hidden={state !== "collapsed" || isMobile}
-        {...tooltip}
-      />
     </Tooltip>
-  );
+  )
 }
 
 function SidebarMenuAction({
@@ -550,134 +512,123 @@ function SidebarMenuAction({
   asChild = false,
   showOnHover = false,
   ...props
-}: React.ComponentProps<"button"> & {
+}: React.ComponentProps<'button'> & {
-  asChild?: boolean;
+  asChild?: boolean
-  showOnHover?: boolean;
+  showOnHover?: boolean
 }) {
-  const Comp = asChild ? Slot : "button";
+  const Comp = asChild ? Slot : 'button'
 
   return (
     <Comp
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 md:after:hidden",
+        'after:absolute after:-inset-2 md:after:hidden',
-        "peer-data-[size=sm]/menu-button:top-1",
+        'peer-data-[size=sm]/menu-button:top-1',
-        "peer-data-[size=default]/menu-button:top-1.5",
+        'peer-data-[size=default]/menu-button:top-1.5',
-        "peer-data-[size=lg]/menu-button:top-2.5",
+        'peer-data-[size=lg]/menu-button:top-2.5',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenuBadge({
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
-        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-        "peer-data-[size=sm]/menu-button:top-1",
+        'peer-data-[size=sm]/menu-button:top-1',
-        "peer-data-[size=default]/menu-button:top-1.5",
+        'peer-data-[size=default]/menu-button:top-1.5',
-        "peer-data-[size=lg]/menu-button:top-2.5",
+        'peer-data-[size=lg]/menu-button:top-2.5',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuSkeleton({
   className,
   showIcon = false,
   ...props
-}: React.ComponentProps<"div"> & {
+}: React.ComponentProps<'div'> & {
-  showIcon?: boolean;
+  showIcon?: boolean
 }) {
   // Random width between 50 to 90%.
   const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`;
+    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, []);
+  }, [])
 
   return (
     <div
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
       {...props}
     >
-      {showIcon && (
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
       <Skeleton
         className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
-            "--skeleton-width": width,
+            '--skeleton-width': width,
           } as React.CSSProperties
         }
       />
     </div>
-  );
+  )
 }
 
-function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
   return (
     <ul
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function SidebarMenuSubItem({
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
-  className,
-  ...props
-}: React.ComponentProps<"li">) {
   return (
     <li
       data-slot="sidebar-menu-sub-item"
       data-sidebar="menu-sub-item"
-      className={cn("group/menu-sub-item relative", className)}
+      className={cn('group/menu-sub-item relative', className)}
       {...props}
     />
-  );
+  )
 }
 
 function SidebarMenuSubButton({
   asChild = false,
-  size = "md",
+  size = 'md',
   isActive = false,
   className,
   ...props
-}: React.ComponentProps<"a"> & {
+}: React.ComponentProps<'a'> & {
-  asChild?: boolean;
+  asChild?: boolean
-  size?: "sm" | "md";
+  size?: 'sm' | 'md'
-  isActive?: boolean;
+  isActive?: boolean
 }) {
-  const Comp = asChild ? Slot : "a";
+  const Comp = asChild ? Slot : 'a'
 
   return (
     <Comp
@@ -686,16 +637,16 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === "sm" && "text-xs",
+        size === 'sm' && 'text-xs',
-        size === "md" && "text-sm",
+        size === 'md' && 'text-sm',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -723,4 +674,4 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
-};
+}

src/components/ui/skeleton.tsx

@@ -1,13 +1,7 @@
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
+  return <div data-slot="skeleton" className={cn('bg-accent animate-pulse rounded-md', className)} {...props} />
-    <div
-      data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
 }
 
-export { Skeleton };
+export { Skeleton }

src/components/ui/slider.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as SliderPrimitive from '@radix-ui/react-slider'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 function Slider({
   className,
@@ -14,14 +14,9 @@ function Slider({
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
-    () =>
+    () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]),
-      Array.isArray(value)
+    [value, defaultValue, min, max]
-        ? value
+  )
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max],
-  );
 
   return (
     <SliderPrimitive.Root
@@ -31,22 +26,20 @@ function Slider({
       min={min}
       max={max}
       className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
-        className,
+        className
       )}
       {...props}
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+          'bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5'
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
-          className={cn(
+          className={cn('bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full')}
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-          )}
         />
       </SliderPrimitive.Track>
       {Array.from({ length: _values.length }, (_, index) => (
@@ -57,7 +50,7 @@ function Slider({
         />
       ))}
     </SliderPrimitive.Root>
-  );
+  )
 }
 
-export { Slider };
+export { Slider }

src/components/ui/sonner.tsx

@@ -1,25 +1,25 @@
-"use client";
+'use client'
 
-import { useTheme } from "next-themes";
+import { useTheme } from 'next-themes'
-import { Toaster as Sonner, ToasterProps } from "sonner";
+import { Toaster as Sonner, ToasterProps } from 'sonner'
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+  const { theme = 'system' } = useTheme()
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={theme as ToasterProps['theme']}
       className="toaster group"
       style={
         {
-          "--normal-bg": "var(--popover)",
+          '--normal-bg': 'var(--popover)',
-          "--normal-text": "var(--popover-foreground)",
+          '--normal-text': 'var(--popover-foreground)',
-          "--normal-border": "var(--border)",
+          '--normal-border': 'var(--border)',
         } as React.CSSProperties
       }
       {...props}
     />
-  );
+  )
-};
+}
 
-export { Toaster };
+export { Toaster }

src/components/ui/switch.tsx

@@ -1,31 +1,28 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as SwitchPrimitive from '@radix-ui/react-switch'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Switch({
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-background focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className,
+        className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+          'bg-card dark:data-[state=unchecked]:bg-card-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
         )}
       />
     </SwitchPrimitive.Root>
-  );
+  )
 }
 
-export { Switch };
+export { Switch }

src/components/ui/table.tsx

@@ -1,116 +1,75 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
   return (
-    <div
+    <div data-slot="table-container" className="relative w-full overflow-x-auto">
-      data-slot="table-container"
+      <table data-slot="table" className={cn('w-full caption-bottom text-sm', className)} {...props} />
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
     </div>
-  );
+  )
 }
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
-  return (
+  return <thead data-slot="table-header" className={cn('[&_tr]:border-b', className)} {...props} />
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  );
 }
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
-  return (
+  return <tbody data-slot="table-body" className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  );
 }
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn(
+      className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
   return (
     <tr
       data-slot="table-row"
-      className={cn(
+      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className,
-      )}
       {...props}
     />
-  );
+  )
 }
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
   return (
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
   return (
     <td
       data-slot="table-cell"
       className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function TableCaption({
+function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
   return (
-    <caption
+    <caption data-slot="table-caption" className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
-      data-slot="table-caption"
+  )
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  );
 }
 
-export {
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-};

src/components/ui/tabs.tsx

@@ -1,66 +1,42 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as TabsPrimitive from '@radix-ui/react-tabs'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Tabs({
+function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  className,
+  return <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  );
 }
 
-function TabsList({
+function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex",
+        'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-xl p-[3px] flex',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function TabsTrigger({
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
         "data-[state=active]:bg-card dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-function TabsContent({
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  className,
+  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
-      {...props}
-    />
-  );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/textarea.tsx

@@ -1,18 +1,18 @@
-import * as React from "react";
+import * as React from 'react'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        "resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        'resize-none border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-input-background px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        className,
+        className
       )}
       {...props}
     />
-  );
+  )
 }
 
-export { Textarea };
+export { Textarea }

src/components/ui/toggle-group.tsx

@@ -1,18 +1,16 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
-import { type VariantProps } from "class-variance-authority";
+import { type VariantProps } from 'class-variance-authority'
 
-import { cn } from "./utils";
+import { cn } from './utils'
-import { toggleVariants } from "./toggle";
+import { toggleVariants } from './toggle'
 
-const ToggleGroupContext = React.createContext<
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  VariantProps<typeof toggleVariants>
+  size: 'default',
->({
+  variant: 'default',
-  size: "default",
+})
-  variant: "default",
-});
 
 function ToggleGroup({
   className,
@@ -20,24 +18,21 @@ function ToggleGroup({
   size,
   children,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  VariantProps<typeof toggleVariants>) {
   return (
     <ToggleGroupPrimitive.Root
       data-slot="toggle-group"
       data-variant={variant}
       data-size={size}
       className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
-        className,
+        className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-        {children}
-      </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
-  );
+  )
 }
 
 function ToggleGroupItem({
@@ -46,9 +41,8 @@ function ToggleGroupItem({
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
-  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
-  const context = React.useContext(ToggleGroupContext);
 
   return (
     <ToggleGroupPrimitive.Item
@@ -60,14 +54,14 @@ function ToggleGroupItem({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-        className,
+        className
       )}
       {...props}
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  );
+  )
 }
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }

src/components/ui/toggle.tsx

@@ -1,47 +1,41 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as TogglePrimitive from "@radix-ui/react-toggle";
+import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { cva, type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from 'class-variance-authority'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
 const toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
-        outline:
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
+        default: 'h-9 px-2 min-w-9',
-        sm: "h-8 px-1.5 min-w-8",
+        sm: 'h-8 px-1.5 min-w-8',
-        lg: "h-10 px-2.5 min-w-10",
+        lg: 'h-10 px-2.5 min-w-10',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
-  },
+  }
-);
+)
 
 function Toggle({
   className,
   variant,
   size,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
-  VariantProps<typeof toggleVariants>) {
   return (
-    <TogglePrimitive.Root
+    <TogglePrimitive.Root data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
-      data-slot="toggle"
+  )
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }

src/components/ui/tooltip.tsx

@@ -1,37 +1,24 @@
-"use client";
+'use client'
 
-import * as React from "react";
+import * as React from 'react'
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import { cn } from "./utils";
+import { cn } from './utils'
 
-function TooltipProvider({
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  delayDuration = 0,
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
 }
 
-function Tooltip({
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return (
     <TooltipProvider>
       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
     </TooltipProvider>
-  );
+  )
 }
 
-function TooltipTrigger({
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  ...props
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
@@ -46,8 +33,8 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          'bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className,
+          className
         )}
         {...props}
       >
@@ -55,7 +42,7 @@ function TooltipContent({
         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
-  );
+  )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/components/ui/use-mobile.ts

@@ -1,21 +1,19 @@
-import * as React from "react";
+import * as React from 'react'
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-    undefined,
-  );
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    };
+    }
-    mql.addEventListener("change", onChange);
+    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange);
+    return () => mql.removeEventListener('change', onChange)
-  }, []);
+  }, [])
-
+
-  return !!isMobile;
+  return !!isMobile
 }

src/components/ui/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
+import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from "tailwind-merge";
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }

src/main.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom/client';
+import ReactDOM from 'react-dom/client'
-import App from './App';
+import App from './App'
-import './styles/globals.css';
+import './styles/globals.css'
-import './styles/animations.css';
+import './styles/animations.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
-);
+)

src/pages/AISolutionsPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface AISolutionsPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function AISolutionsPage({ onBack }: AISolutionsPageProps) {
@@ -9,49 +9,49 @@ export function AISolutionsPage({ onBack }: AISolutionsPageProps) {
     {
       name: 'Яндекс AI',
       description: 'Платформа машинного обучения и искусственного интеллекта от Яндекса.',
-      products: ['YandexGPT', 'SpeechKit', 'Vision', 'Translate']
+      products: ['YandexGPT', 'SpeechKit', 'Vision', 'Translate'],
     },
     {
       name: 'Сбер AI',
       description: 'Экосистема AI-решений Сбера для бизнеса и разработчиков.',
-      products: ['GigaChat', 'SaluteSpeech', 'Vision', 'SmartSearch']
+      products: ['GigaChat', 'SaluteSpeech', 'Vision', 'SmartSearch'],
     },
     {
       name: 'VK AI',
       description: 'AI-платформа VK с решениями для распознавания, синтеза и анализа.',
-      products: ['Маруся', 'Vision API', 'ML Platform', 'Рекомендательные системы']
+      products: ['Маруся', 'Vision API', 'ML Platform', 'Рекомендательные системы'],
     },
     {
       name: 'АйТеко AI',
       description: 'Российские решения на базе искусственного интеллекта для промышленности.',
-      products: ['Компьютерное зрение', 'Прогнозная аналитика', 'NLP']
+      products: ['Компьютерное зрение', 'Прогнозная аналитика', 'NLP'],
     },
     {
       name: 'Cognitive Technologies',
       description: 'Разработчик систем компьютерного зрения и автономного транспорта.',
-      products: ['C-Pilot', 'ALPR', 'Видеоаналитика']
+      products: ['C-Pilot', 'ALPR', 'Видеоаналитика'],
     },
     {
       name: 'NTechLab',
       description: 'Технологии распознавания лиц и видеоаналитики на базе AI.',
-      products: ['FindFace', 'FindFace Multi', 'VideoAnalytics']
+      products: ['FindFace', 'FindFace Multi', 'VideoAnalytics'],
     },
     {
       name: 'Neuro.net',
       description: 'Платформа для создания и внедрения AI-решений в бизнес-процессы.',
-      products: ['ML Studio', 'Чат-боты', 'Предиктивная аналитика']
+      products: ['ML Studio', 'Чат-боты', 'Предиктивная аналитика'],
     },
     {
       name: 'Just AI',
       description: 'Платформа для создания голосовых ассистентов и чат-ботов.',
-      products: ['JAICP', 'Conversational AI', 'Voice AI']
+      products: ['JAICP', 'Conversational AI', 'Voice AI'],
     },
     {
       name: 'ЦРТ',
       description: 'Центр речевых технологий - решения для распознавания и синтеза речи.',
-      products: ['ASR', 'TTS', 'Голосовая биометрия', 'Диктофон']
+      products: ['ASR', 'TTS', 'Голосовая биометрия', 'Диктофон'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function AISolutionsPage({ onBack }: AISolutionsPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/BusinessPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface BusinessPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function BusinessPage({ onBack }: BusinessPageProps) {
@@ -9,49 +9,49 @@ export function BusinessPage({ onBack }: BusinessPageProps) {
     {
       name: 'SAP',
       description: 'Мировой лидер в области корпоративных приложений для управления бизнесом.',
-      products: ['SAP S/4HANA', 'SAP SuccessFactors', 'SAP Ariba']
+      products: ['SAP S/4HANA', 'SAP SuccessFactors', 'SAP Ariba'],
     },
     {
       name: '1С',
       description: 'Комплексные решения для автоматизации бизнес-процессов российских компаний.',
-      products: ['1С:ERP', '1С:CRM', '1С:Документооборот', '1С:WMS']
+      products: ['1С:ERP', '1С:CRM', '1С:Документооборот', '1С:WMS'],
     },
     {
       name: 'Битрикс24',
       description: 'Единая платформа для управления бизнесом, CRM и коммуникаций.',
-      products: ['CRM', 'Задачи и проекты', 'Сайты', 'Интернет-магазин']
+      products: ['CRM', 'Задачи и проекты', 'Сайты', 'Интернет-магазин'],
     },
     {
       name: 'ELMA365',
       description: 'Low-code платформа для цифровой трансформации бизнеса.',
-      products: ['BPM', 'CRM', 'ECM', 'Low-code разработка']
+      products: ['BPM', 'CRM', 'ECM', 'Low-code разработка'],
     },
     {
       name: 'Мегаплан',
       description: 'Система управления проектами и CRM для малого и среднего бизнеса.',
-      products: ['CRM', 'Управление задачами', 'Отчеты']
+      products: ['CRM', 'Управление задачами', 'Отчеты'],
     },
     {
       name: 'amoCRM',
       description: 'CRM-система для автоматизации продаж и работы с клиентами.',
-      products: ['Воронка продаж', 'Мессенджеры', 'IP-телефония']
+      products: ['Воронка продаж', 'Мессенджеры', 'IP-телефония'],
     },
     {
       name: 'Terrsoft',
       description: 'Low-code платформа Creatio для автоматизации бизнес-процессов.',
-      products: ['Creatio CRM', 'Creatio Marketing', 'BPM']
+      products: ['Creatio CRM', 'Creatio Marketing', 'BPM'],
     },
     {
       name: 'Мой Склад',
       description: 'Облачный сервис для управления торговлей и складом.',
-      products: ['Складской учет', 'Интернет-магазин', 'Товароучет']
+      products: ['Складской учет', 'Интернет-магазин', 'Товароучет'],
     },
     {
       name: 'Контур',
       description: 'Экосистема сервисов для автоматизации бухгалтерии и бизнес-процессов.',
-      products: ['Контур.Бухгалтерия', 'Контур.Диадок', 'Контур.Экстерн']
+      products: ['Контур.Бухгалтерия', 'Контур.Диадок', 'Контур.Экстерн'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function BusinessPage({ onBack }: BusinessPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/CADandGISPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface CADandGISPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function CADandGISPage({ onBack }: CADandGISPageProps) {
@@ -9,49 +9,49 @@ export function CADandGISPage({ onBack }: CADandGISPageProps) {
     {
       name: 'АСКОН',
       description: 'Крупнейший российский разработчик инженерного ПО и САПР систем.',
-      products: ['КОМПАС-3D', 'КОМПАС-График', 'Renga', 'Pilot-ICE']
+      products: ['КОМПАС-3D', 'КОМПАС-График', 'Renga', 'Pilot-ICE'],
     },
     {
       name: 'Nanosoft',
       description: 'Разработка САПР и ГИС решений для проектирования и строительства.',
-      products: ['nanoCAD', 'GeoniCS', 'ТОПОПЛАН']
+      products: ['nanoCAD', 'GeoniCS', 'ТОПОПЛАН'],
     },
     {
       name: 'ГИС Панорама',
       description: 'Российская ГИС платформа для работы с пространственными данными.',
-      products: ['ГИС Карта 2011', 'GIS WebServer', 'Панорама АГРО']
+      products: ['ГИС Карта 2011', 'GIS WebServer', 'Панорама АГРО'],
     },
     {
       name: 'NextGIS',
       description: 'Облачная ГИС платформа и геопространственные решения.',
-      products: ['NextGIS Web', 'NextGIS Mobile', 'NextGIS QGIS']
+      products: ['NextGIS Web', 'NextGIS Mobile', 'NextGIS QGIS'],
     },
     {
       name: 'ZWSOFT',
       description: 'Универсальная САПР платформа для 2D и 3D проектирования.',
-      products: ['ZWCAD', 'ZW3D']
+      products: ['ZWCAD', 'ZW3D'],
     },
     {
       name: 'ЛОЦМАН',
       description: 'PLM и САПР решения для управления жизненным циклом изделий.',
-      products: ['ЛОЦМАН:PLM', 'ЛОЦМАН:CAD']
+      products: ['ЛОЦМАН:PLM', 'ЛОЦМАН:CAD'],
     },
     {
       name: 'CGS Labs',
       description: 'Разработка систем инженерного анализа и моделирования.',
-      products: ['CGS Модельер', 'CGS Эксперт']
+      products: ['CGS Модельер', 'CGS Эксперт'],
     },
     {
       name: 'CADLib',
       description: 'Библиотеки и компоненты для разработки САПР приложений.',
-      products: ['Библиотеки DWG', 'Форматы CAD']
+      products: ['Библиотеки DWG', 'Форматы CAD'],
     },
     {
       name: 'IndorSoft',
       description: 'САПР для проектирования автомобильных дорог и инфраструктуры.',
-      products: ['IndorCAD', 'IndorRoad', 'IndorTrafficPlan']
+      products: ['IndorCAD', 'IndorRoad', 'IndorTrafficPlan'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function CADandGISPage({ onBack }: CADandGISPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/CloudPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface CloudPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function CloudPage({ onBack }: CloudPageProps) {
@@ -9,34 +9,34 @@ export function CloudPage({ onBack }: CloudPageProps) {
     {
       name: 'Яндекс.Облако',
       description: 'Полный спектр облачных сервисов: вычисления, хранение данных, машинное обучение, базы данных.',
-      products: ['Compute Cloud', 'Object Storage', 'Managed Kubernetes', 'DataLens']
+      products: ['Compute Cloud', 'Object Storage', 'Managed Kubernetes', 'DataLens'],
     },
     {
       name: 'VK Cloud',
       description: 'Облачная платформа VK с IaaS, PaaS и SaaS решениями для бизнеса любого масштаба.',
-      products: ['Облачные серверы', 'Kubernetes', 'CDN', 'ML Platform']
+      products: ['Облачные серверы', 'Kubernetes', 'CDN', 'ML Platform'],
     },
     {
       name: 'Cloud.ru',
       description: 'Российская мультиоблачная платформа от Ростелекома с высоким уровнем безопасности.',
-      products: ['IaaS', 'PaaS', 'DBaaS', 'Backup']
+      products: ['IaaS', 'PaaS', 'DBaaS', 'Backup'],
     },
     {
       name: 'SberCloud',
       description: 'Облачные решения от Сбера для корпоративных клиентов с интеграцией AI и ML.',
-      products: ['Виртуальные машины', 'Kubernetes', 'AI Services', 'CDN']
+      products: ['Виртуальные машины', 'Kubernetes', 'AI Services', 'CDN'],
     },
     {
       name: 'МТС Cloud',
       description: 'Облачная инфраструктура МТС с широким спектром сервисов и российской локализацией.',
-      products: ['Cloud Server', 'Object Storage', 'Big Data', 'IoT']
+      products: ['Cloud Server', 'Object Storage', 'Big Data', 'IoT'],
     },
     {
       name: 'Selectel',
       description: 'Один из крупнейших провайдеров облачных услуг в России с собственными ЦОД.',
-      products: ['Облачная платформа', 'Dedicated серверы', 'CDN', 'Storage']
+      products: ['Облачная платформа', 'Dedicated серверы', 'CDN', 'Storage'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +45,5 @@ export function CloudPage({ onBack }: CloudPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/ConsultingPage.tsx

@@ -1,42 +1,46 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface ConsultingPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function ConsultingPage({ onBack }: ConsultingPageProps) {
   const services = [
     {
       name: 'IT-стратегия и архитектура',
-      description: 'Разработка IT-стратегии, целевой архитектуры и дорожной карты цифровой трансформации с учетом специфики российского рынка.',
+      description:
-      products: ['IT-аудит', 'Архитектура решений', 'Стратегия']
+        'Разработка IT-стратегии, целевой архитектуры и дорожной карты цифровой трансформации с учетом специфики российского рынка.',
+      products: ['IT-аудит', 'Архитектура решений', 'Стратегия'],
     },
     {
       name: 'Миграция на российское ПО',
-      description: 'Комплексный анализ текущей инфраструктуры и разработка плана перехода на отечественные решения с минимальными рисками.',
+      description:
-      products: ['Аудит', 'План миграции', 'Управление рисками']
+        'Комплексный анализ текущей инфраструктуры и разработка плана перехода на отечественные решения с минимальными рисками.',
+      products: ['Аудит', 'План миграции', 'Управление рисками'],
     },
     {
       name: 'Оптимизация IT-инфраструктуры',
       description: 'Анализ и оптимизация существующей инфраструктуры для повышения эффективности и снижения затрат.',
-      products: ['Аудит инфраструктуры', 'Оптимизация', 'TCO анализ']
+      products: ['Аудит инфраструктуры', 'Оптимизация', 'TCO анализ'],
     },
     {
       name: 'Проектирование ЦОД',
-      description: 'Разработка концепции и детальное проектирование центров обработки данных на базе российского оборудования.',
+      description:
-      products: ['Концепция ЦОД', 'Техническое задание', 'ПОС']
+        'Разработка концепции и детальное проектирование центров обработки данных на базе российского оборудования.',
+      products: ['Концепция ЦОД', 'Техническое задание', 'ПОС'],
     },
     {
       name: 'Импортозамещение',
-      description: 'Разработка стратегии замены зарубежных решений на российские аналоги с сохранением функциональности.',
+      description:
-      products: ['Анализ решений', 'Подбор аналогов', 'План внедрения']
+        'Разработка стратегии замены зарубежных решений на российские аналоги с сохранением функциональности.',
+      products: ['Анализ решений', 'Подбор аналогов', 'План внедрения'],
     },
     {
       name: 'Бизнес-анализ и процессы',
       description: 'Анализ бизнес-процессов и разработка требований к информационным системам для их автоматизации.',
-      products: ['Анализ процессов', 'Требования', 'BPMN']
+      products: ['Анализ процессов', 'Требования', 'BPMN'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +49,5 @@ export function ConsultingPage({ onBack }: ConsultingPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/CybersecurityPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface CybersecurityPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function CybersecurityPage({ onBack }: CybersecurityPageProps) {
@@ -9,49 +9,49 @@ export function CybersecurityPage({ onBack }: CybersecurityPageProps) {
     {
       name: 'Лаборатория Касперского',
       description: 'Мировой лидер в области кибербезопасности с комплексными решениями защиты.',
-      products: ['Kaspersky Endpoint Security', 'Kaspersky Security Center', 'Anti-Targeted Attack']
+      products: ['Kaspersky Endpoint Security', 'Kaspersky Security Center', 'Anti-Targeted Attack'],
     },
     {
       name: 'Positive Technologies',
       description: 'Разработчик решений по информационной безопасности и защите от киберугроз.',
-      products: ['MaxPatrol', 'PT Network Attack Discovery', 'PT Application Inspector']
+      products: ['MaxPatrol', 'PT Network Attack Discovery', 'PT Application Inspector'],
     },
     {
       name: 'InfoWatch',
       description: 'Российский разработчик систем защиты от утечек конфиденциальной информации.',
-      products: ['InfoWatch Traffic Monitor', 'InfoWatch Device Monitor', 'Appercut']
+      products: ['InfoWatch Traffic Monitor', 'InfoWatch Device Monitor', 'Appercut'],
     },
     {
       name: 'SearchInform',
       description: 'Системы информационной безопасности и предотвращения утечек данных.',
-      products: ['SearchInform DLP', 'FileAuditor', 'SIEM']
+      products: ['SearchInform DLP', 'FileAuditor', 'SIEM'],
     },
     {
       name: 'Гарда',
       description: 'Решения для защиты периметра, веб-приложений и управления доступом.',
-      products: ['Гарда WAF', 'Гарда VPN', 'Гарда Firewall', 'Гарда БД']
+      products: ['Гарда WAF', 'Гарда VPN', 'Гарда Firewall', 'Гарда БД'],
     },
     {
       name: 'DeviceLock',
       description: 'Контроль внешних устройств и каналов передачи данных для защиты от утечек.',
-      products: ['DeviceLock DLP', 'DeviceLock Enterprise Server', 'ContentLock']
+      products: ['DeviceLock DLP', 'DeviceLock Enterprise Server', 'ContentLock'],
     },
     {
       name: 'КриптоПро',
       description: 'Средства криптографической защиты информации и электронной подписи.',
-      products: ['КриптоПро CSP', 'КриптоПро ЭЦП Browser', 'КриптоПро JCP']
+      products: ['КриптоПро CSP', 'КриптоПро ЭЦП Browser', 'КриптоПро JCP'],
     },
     {
       name: 'Код Безопасности',
       description: 'Российский вендор решений по информационной безопасности.',
-      products: ['Secret Net Studio', 'Dallas Lock', 'Континент']
+      products: ['Secret Net Studio', 'Dallas Lock', 'Континент'],
     },
     {
       name: 'Аладдин Р.Д.',
       description: 'Разработчик средств аутентификации и защиты информации.',
-      products: ['JaCarta', 'eToken', 'Аладдин Office Security']
+      products: ['JaCarta', 'eToken', 'Аладдин Office Security'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function CybersecurityPage({ onBack }: CybersecurityPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/GovernmentPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface GovernmentPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function GovernmentPage({ onBack }: GovernmentPageProps) {
@@ -9,49 +9,49 @@ export function GovernmentPage({ onBack }: GovernmentPageProps) {
     {
       name: 'Astra Linux',
       description: 'Защищенная операционная система для государственных организаций.',
-      products: ['Astra Linux Special Edition', 'Сертификация ФСТЭК', 'Защита информации']
+      products: ['Astra Linux Special Edition', 'Сертификация ФСТЭК', 'Защита информации'],
     },
     {
       name: 'ИнфоТеКС',
       description: 'Защищенные системы связи и криптографическая защита для госсектора.',
-      products: ['ViPNet', 'КриптоПро', 'VPN', 'СКЗИ']
+      products: ['ViPNet', 'КриптоПро', 'VPN', 'СКЗИ'],
     },
     {
       name: 'НПО Эшелон',
       description: 'Системы защиты информации для критической инфраструктуры.',
-      products: ['Сертифицированные решения', 'СКЗИ', 'Межсетевые экраны']
+      products: ['Сертифицированные решения', 'СКЗИ', 'Межсетевые экраны'],
     },
     {
       name: 'Код Безопасности',
       description: 'Средства защиты информации для государственных информационных систем.',
-      products: ['Secret Net Studio', 'Dallas Lock', 'Соболь']
+      products: ['Secret Net Studio', 'Dallas Lock', 'Соболь'],
     },
     {
       name: 'Газинформсервис',
       description: 'Автоматизированные системы для государственного управления.',
-      products: ['ГИС', 'Системы документооборота', 'Межведомственное взаимодействие']
+      products: ['ГИС', 'Системы документооборота', 'Межведомственное взаимодействие'],
     },
     {
       name: 'Крок',
       description: 'Интеграционные решения для цифровизации государственных услуг.',
-      products: ['Цифровые платформы', 'Интеграция систем', 'Консалтинг']
+      products: ['Цифровые платформы', 'Интеграция систем', 'Консалтинг'],
     },
     {
       name: 'Ростелеком-Солар',
       description: 'Кибербезопасность для государственных и критически важных объектов.',
-      products: ['Solar JSOC', 'PT ISIM', 'Мониторинг безопасности']
+      products: ['Solar JSOC', 'PT ISIM', 'Мониторинг безопасности'],
     },
     {
       name: 'ФГУП НТЦ «Атлас»',
       description: 'Разработка защищенных АС для органов государственной власти.',
-      products: ['Защищенные АС', 'ГосСОПКА', 'Сертифицированное ПО']
+      products: ['Защищенные АС', 'ГосСОПКА', 'Сертифицированное ПО'],
     },
     {
       name: 'Электронное Правительство',
       description: 'Платформы для предоставления государственных услуг в электронном виде.',
-      products: ['Госуслуги', 'СМЭВ', 'Электронные сервисы']
+      products: ['Госуслуги', 'СМЭВ', 'Электронные сервисы'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function GovernmentPage({ onBack }: GovernmentPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/HardwareSolutionsPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface HardwareSolutionsPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function HardwareSolutionsPage({ onBack }: HardwareSolutionsPageProps) {
@@ -9,49 +9,49 @@ export function HardwareSolutionsPage({ onBack }: HardwareSolutionsPageProps) {
     {
       name: 'YADRO',
       description: 'Российские системы хранения данных и серверные платформы корпоративного уровня.',
-      products: ['СХД TATLIN', 'Серверы Vegman', 'JBOD', 'Процессоры']
+      products: ['СХД TATLIN', 'Серверы Vegman', 'JBOD', 'Процессоры'],
     },
     {
       name: 'Kraftway Storage',
       description: 'Системы хранения и резервного копирования данных.',
-      products: ['СХД', 'Backup системы', 'Дисковые массивы']
+      products: ['СХД', 'Backup системы', 'Дисковые массивы'],
     },
     {
       name: 'Eltex',
       description: 'Российский производитель телекоммуникационного оборудования.',
-      products: ['Маршрутизаторы', 'Коммутаторы', 'VoIP', 'WiFi']
+      products: ['Маршрутизаторы', 'Коммутаторы', 'VoIP', 'WiFi'],
     },
     {
       name: 'Таврида Электрик',
       description: 'Российские процессоры и микроэлектронные компоненты.',
-      products: ['Процессоры Baikal', 'Микропроцессоры']
+      products: ['Процессоры Baikal', 'Микропроцессоры'],
     },
     {
       name: 'ЭЛВИС-НеоТек',
       description: 'Разработка и производство микроэлектронных компонентов.',
-      products: ['Микроконтроллеры', 'Процессоры', 'ПЛИС']
+      products: ['Микроконтроллеры', 'Процессоры', 'ПЛИС'],
     },
     {
       name: 'Kraftway Network',
       description: 'Сетевое оборудование и решения для построения ЦОД.',
-      products: ['Коммутаторы', 'Серверные шкафы', 'СКС']
+      products: ['Коммутаторы', 'Серверные шкафы', 'СКС'],
     },
     {
       name: 'ЗАО НТЦ ЭЛИНС',
       description: 'Производство систем бесперебойного питания.',
-      products: ['ИБП', 'Стабилизаторы', 'Источники питания']
+      products: ['ИБП', 'Стабилизаторы', 'Источники питания'],
     },
     {
       name: 'Аквариус СХД',
       description: 'Системы хранения данных для корпоративного сектора.',
-      products: ['СХД', 'Дисковые массивы', 'Backup']
+      products: ['СХД', 'Дисковые массивы', 'Backup'],
     },
     {
       name: 'РЗЭП',
       description: 'Рязанский завод электронных приборов - производство электронных компонентов.',
-      products: ['Электронные компоненты', 'Платы', 'Модули']
+      products: ['Электронные компоненты', 'Платы', 'Модули'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function HardwareSolutionsPage({ onBack }: HardwareSolutionsPageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/HomePage.tsx

@@ -1,12 +1,12 @@
-import { Hero } from '../components/Hero';
+import { Hero } from '../components/Hero'
-import { Services } from '../components/Services';
+import { Services } from '../components/Services'
-import { Solutions } from '../components/Solutions';
+import { Solutions } from '../components/Solutions'
-import { Cases } from '../components/Cases';
+import { Cases } from '../components/Cases'
-import { About } from '../components/About';
+import { About } from '../components/About'
-import { Contact } from '../components/Contact';
+import { Contact } from '../components/Contact'
 
 interface HomePageProps {
-  onOpenContactModal?: () => void;
+  onOpenContactModal?: () => void
 }
 
 export function HomePage({ onOpenContactModal }: HomePageProps) {
@@ -25,5 +25,5 @@ export function HomePage({ onOpenContactModal }: HomePageProps) {
         <Contact />
       </div>
     </>
-  );
+  )
 }

src/pages/ImplementationPage.tsx

@@ -1,42 +1,43 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface ImplementationPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function ImplementationPage({ onBack }: ImplementationPageProps) {
   const services = [
     {
       name: 'Внедрение облачных платформ',
-      description: 'Комплексное внедрение облачных решений на базе Яндекс.Облако, VK Cloud и других российских провайдеров.',
+      description:
-      products: ['IaaS', 'PaaS', 'Миграция', 'Настройка']
+        'Комплексное внедрение облачных решений на базе Яндекс.Облако, VK Cloud и других российских провайдеров.',
+      products: ['IaaS', 'PaaS', 'Миграция', 'Настройка'],
     },
     {
       name: 'Развертывание ОС и базового ПО',
       description: 'Установка и настройка операционных систем Astra Linux, РЕД ОС и базового программного обеспечения.',
-      products: ['Astra Linux', 'РЕД ОС', 'Alt Linux', 'Настройка']
+      products: ['Astra Linux', 'РЕД ОС', 'Alt Linux', 'Настройка'],
     },
     {
       name: 'Внедрение систем безопасности',
       description: 'Поставка и внедрение комплексных решений по кибербезопасности от ведущих российских вендоров.',
-      products: ['Kaspersky', 'Positive Technologies', 'Solar', 'UserGate']
+      products: ['Kaspersky', 'Positive Technologies', 'Solar', 'UserGate'],
     },
     {
       name: 'Внедрение ERP и CRM систем',
       description: 'Развертывание и настройка корпоративных систем управления: 1С, Галактика, Мой Офис.',
-      products: ['1С', 'Галактика', 'БИТ.CRM', 'Интеграция']
+      products: ['1С', 'Галактика', 'БИТ.CRM', 'Интеграция'],
     },
     {
       name: 'Поставка серверного оборудования',
       description: 'Подбор, поставка и ввод в эксплуатацию серверов и СХД российского производства.',
-      products: ['Kraftway', 'Aquarius', 'Depo', 'Настройка']
+      products: ['Kraftway', 'Aquarius', 'Depo', 'Настройка'],
     },
     {
       name: 'Системы хранения данных',
       description: 'Внедрение российских систем хранения данных с настройкой репликации и резервного копирования.',
-      products: ['RAIDIX', 'Huawei OceanStor', 'СХД', 'Бэкап']
+      products: ['RAIDIX', 'Huawei OceanStor', 'СХД', 'Бэкап'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +46,5 @@ export function ImplementationPage({ onBack }: ImplementationPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/IndustrialSolutionsPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface IndustrialSolutionsPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function IndustrialSolutionsPage({ onBack }: IndustrialSolutionsPageProps) {
@@ -9,49 +9,49 @@ export function IndustrialSolutionsPage({ onBack }: IndustrialSolutionsPageProps
     {
       name: 'ОВЕН',
       description: 'Разработка и производство средств промышленной автоматизации.',
-      products: ['ПЛК', 'HMI панели', 'SCADA', 'Датчики']
+      products: ['ПЛК', 'HMI панели', 'SCADA', 'Датчики'],
     },
     {
       name: 'ИнСАТ',
       description: 'Автоматизированные системы управления технологическими процессами.',
-      products: ['SCADA InTouch', 'MES системы', 'Диспетчеризация']
+      products: ['SCADA InTouch', 'MES системы', 'Диспетчеризация'],
     },
     {
       name: 'ТЕСИС',
       description: 'Системы автоматизации для энергетики и промышленности.',
-      products: ['АСУТП', 'Энергомониторинг', 'Диспетчеризация']
+      products: ['АСУТП', 'Энергомониторинг', 'Диспетчеризация'],
     },
     {
       name: 'Danfoss',
       description: 'Решения для промышленной автоматизации и энергоэффективности.',
-      products: ['Частотные преобразователи', 'Приводы', 'Автоматика']
+      products: ['Частотные преобразователи', 'Приводы', 'Автоматика'],
     },
     {
       name: 'МЗТА',
       description: 'Московский завод тепловой автоматики - промышленные контроллеры.',
-      products: ['ПЛК', 'Регуляторы', 'Датчики']
+      products: ['ПЛК', 'Регуляторы', 'Датчики'],
     },
     {
       name: 'Текон',
       description: 'Автоматизация технологических процессов в промышленности.',
-      products: ['SCADA', 'Контроллеры', 'Системы телемеханики']
+      products: ['SCADA', 'Контроллеры', 'Системы телемеханики'],
     },
     {
       name: 'АйТи Энерджи',
       description: 'Системы мониторинга и управления для энергетики.',
-      products: ['АСКУЭ', 'Мониторинг', 'Smart Grid']
+      products: ['АСКУЭ', 'Мониторинг', 'Smart Grid'],
     },
     {
       name: 'Schneider Electric',
       description: 'Индустриальная автоматизация и управление энергией.',
-      products: ['ПЛК', 'SCADA', 'HMI', 'Приводы']
+      products: ['ПЛК', 'SCADA', 'HMI', 'Приводы'],
     },
     {
       name: 'АСУ ТП Проект',
       description: 'Проектирование и внедрение автоматизированных систем управления.',
-      products: ['АСУТП', 'MES', 'Диспетчеризация']
+      products: ['АСУТП', 'MES', 'Диспетчеризация'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function IndustrialSolutionsPage({ onBack }: IndustrialSolutionsPageProps
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/IntegrationPage.tsx

@@ -1,42 +1,44 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface IntegrationPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function IntegrationPage({ onBack }: IntegrationPageProps) {
   const services = [
     {
       name: 'Интеграция корпоративных систем',
-      description: 'Интеграция ERP, CRM, HRM и других корпоративных систем для обеспечения единого информационного пространства.',
+      description:
-      products: ['ESB', 'API', 'ETL', 'Интеграционная шина']
+        'Интеграция ERP, CRM, HRM и других корпоративных систем для обеспечения единого информационного пространства.',
+      products: ['ESB', 'API', 'ETL', 'Интеграционная шина'],
     },
     {
       name: 'Разработка на заказ',
       description: 'Создание индивидуальных программных решений под специфические задачи бизнеса.',
-      products: ['Backend', 'Frontend', 'Mobile', 'Desktop']
+      products: ['Backend', 'Frontend', 'Mobile', 'Desktop'],
     },
     {
       name: 'Автоматизация бизнес-процессов',
       description: 'Разработка и внедрение систем автоматизации с использованием BPM-платформ и RPA.',
-      products: ['BPM', 'RPA', 'Workflow', 'Low-code']
+      products: ['BPM', 'RPA', 'Workflow', 'Low-code'],
     },
     {
       name: 'Разработка микросервисов',
       description: 'Проектирование и разработка микросервисной архитектуры для масштабируемых решений.',
-      products: ['Kubernetes', 'Docker', 'API Gateway', 'Service Mesh']
+      products: ['Kubernetes', 'Docker', 'API Gateway', 'Service Mesh'],
     },
     {
       name: 'DevOps и CI/CD',
-      description: 'Построение процессов непрерывной интеграции и доставки на базе российских и opensource инструментов.',
+      description:
-      products: ['GitLab', 'Jenkins', 'Ansible', 'Terraform']
+        'Построение процессов непрерывной интеграции и доставки на базе российских и opensource инструментов.',
+      products: ['GitLab', 'Jenkins', 'Ansible', 'Terraform'],
     },
     {
       name: 'Интеграция с государственными системами',
       description: 'Подключение к СМЭВ, ГИС, ЕГИС и другим государственным информационным системам.',
-      products: ['СМЭВ', 'ГИС ЖКХ', 'ЕГИСЗ', 'ФИС ФРДО']
+      products: ['СМЭВ', 'ГИС ЖКХ', 'ЕГИСЗ', 'ФИС ФРДО'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +47,5 @@ export function IntegrationPage({ onBack }: IntegrationPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/ManagedServicesPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface ManagedServicesPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function ManagedServicesPage({ onBack }: ManagedServicesPageProps) {
@@ -9,34 +9,35 @@ export function ManagedServicesPage({ onBack }: ManagedServicesPageProps) {
     {
       name: 'Управление инфраструктурой',
       description: 'Полное управление IT-инфраструктурой 24/7: мониторинг, обслуживание, оптимизация и развитие.',
-      products: ['Мониторинг 24/7', 'Управление', 'Отчетность', 'SLA']
+      products: ['Мониторинг 24/7', 'Управление', 'Отчетность', 'SLA'],
     },
     {
       name: 'Управление облачными ресурсами',
       description: 'Администрирование и оптимизация облачной инфраструктуры на российских платформах.',
-      products: ['Cloud Management', 'Оптимизация', 'Безопасность']
+      products: ['Cloud Management', 'Оптимизация', 'Безопасность'],
     },
     {
       name: 'Управление безопасностью',
-      description: 'Комплексное управление информационной безопасностью: SOC, мониторинг угроз, реагирование на инциденты.',
+      description:
-      products: ['SOC', 'SIEM', 'Анализ угроз', 'Реагирование']
+        'Комплексное управление информационной безопасностью: SOC, мониторинг угроз, реагирование на инциденты.',
+      products: ['SOC', 'SIEM', 'Анализ угроз', 'Реагирование'],
     },
     {
       name: 'Backup as a Service',
       description: 'Управляемое резервное копирование с гарантией сохранности данных и быстрого восстановления.',
-      products: ['Резервное копирование', 'Репликация', 'DR']
+      products: ['Резервное копирование', 'Репликация', 'DR'],
     },
     {
       name: 'DRaaS (Disaster Recovery)',
       description: 'Услуга аварийного восстановления IT-систем с гарантированным RTO и RPO.',
-      products: ['Аварийное восстановление', 'Репликация', 'Тестирование']
+      products: ['Аварийное восстановление', 'Репликация', 'Тестирование'],
     },
     {
       name: 'Helpdesk и Service Desk',
       description: 'Профессиональная техническая поддержка пользователей и администрирование IT-систем.',
-      products: ['1-3 линии поддержки', 'ITIL', 'Service Catalog']
+      products: ['1-3 линии поддержки', 'ITIL', 'Service Catalog'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +46,5 @@ export function ManagedServicesPage({ onBack }: ManagedServicesPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/RussianHardwarePage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface RussianHardwarePageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function RussianHardwarePage({ onBack }: RussianHardwarePageProps) {
@@ -9,49 +9,49 @@ export function RussianHardwarePage({ onBack }: RussianHardwarePageProps) {
     {
       name: 'Kraftway',
       description: 'Ведущий российский производитель серверов, рабочих станций и систем хранения.',
-      products: ['Серверы Express', 'Рабочие станции', 'СХД', 'Тонкие клиенты']
+      products: ['Серверы Express', 'Рабочие станции', 'СХД', 'Тонкие клиенты'],
     },
     {
       name: 'Aquarius',
       description: 'Российский производитель компьютеров и серверного оборудования.',
-      products: ['Серверы', 'Ноутбуки', 'ПК', 'Моноблоки']
+      products: ['Серверы', 'Ноутбуки', 'ПК', 'Моноблоки'],
     },
     {
       name: 'iRU',
       description: 'Производство компьютеров, серверов и комплектующих под российским брендом.',
-      products: ['Серверы iRU Rock', 'ПК', 'Ноутбуки', 'Рабочие станции']
+      products: ['Серверы iRU Rock', 'ПК', 'Ноутбуки', 'Рабочие станции'],
     },
     {
       name: 'Аквариус',
       description: 'Российская компания по производству вычислительной техники.',
-      products: ['Компьютеры', 'Серверы', 'Ноутбуки']
+      products: ['Компьютеры', 'Серверы', 'Ноутбуки'],
     },
     {
       name: 'Depo',
       description: 'Разработка и производство серверного и сетевого оборудования.',
-      products: ['Серверы Depo Storm', 'СХД', 'Рабочие станции']
+      products: ['Серверы Depo Storm', 'СХД', 'Рабочие станции'],
     },
     {
       name: 'YADRO',
       description: 'Российский разработчик серверных платформ и систем хранения данных.',
-      products: ['Серверы Vegman', 'СХД TATLIN', 'Процессоры']
+      products: ['Серверы Vegman', 'СХД TATLIN', 'Процессоры'],
     },
     {
       name: 'РСК Технологии',
       description: 'Производство высокопроизводительных вычислительных систем.',
-      products: ['Суперкомпьютеры', 'Серверы', 'Кластерные системы']
+      products: ['Суперкомпьютеры', 'Серверы', 'Кластерные системы'],
     },
     {
       name: 'GS Group',
       description: 'Производство электроники и вычислительной техники.',
-      products: ['Планшеты', 'Ноутбуки', 'Смартфоны']
+      products: ['Планшеты', 'Ноутбуки', 'Смартфоны'],
     },
     {
       name: 'Kraftway Graviton',
       description: 'Серверные решения на базе российских процессоров.',
-      products: ['Серверы Graviton', 'Микросерверы']
+      products: ['Серверы Graviton', 'Микросерверы'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function RussianHardwarePage({ onBack }: RussianHardwarePageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/RussianSoftwarePage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface RussianSoftwarePageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function RussianSoftwarePage({ onBack }: RussianSoftwarePageProps) {
@@ -9,49 +9,49 @@ export function RussianSoftwarePage({ onBack }: RussianSoftwarePageProps) {
     {
       name: 'МойОфис',
       description: 'Российский офисный пакет для работы с документами, таблицами и презентациями.',
-      products: ['Текст', 'Таблица', 'Презентация', 'Почта']
+      products: ['Текст', 'Таблица', 'Презентация', 'Почта'],
     },
     {
       name: '1С',
       description: 'Ведущий российский разработчик программного обеспечения для автоматизации бизнеса.',
-      products: ['1С:Бухгалтерия', '1С:ERP', '1С:Управление торговлей', '1С:Зарплата']
+      products: ['1С:Бухгалтерия', '1С:ERP', '1С:Управление торговлей', '1С:Зарплата'],
     },
     {
       name: 'Галактика',
       description: 'ERP-система для управления предприятием и бизнес-процессами.',
-      products: ['Галактика ERP', 'Управление производством', 'Финансы', 'Логистика']
+      products: ['Галактика ERP', 'Управление производством', 'Финансы', 'Логистика'],
     },
     {
       name: 'Р7-Офис',
       description: 'Офисный пакет и платформа для совместной работы с документами.',
-      products: ['Редакторы документов', 'Совместная работа', 'Корпоративный портал']
+      products: ['Редакторы документов', 'Совместная работа', 'Корпоративный портал'],
     },
     {
       name: 'Postgres Pro',
       description: 'Российская СУБД на базе PostgreSQL с расширенной функциональностью.',
-      products: ['Postgres Pro Standard', 'Postgres Pro Enterprise', 'Кластер']
+      products: ['Postgres Pro Standard', 'Postgres Pro Enterprise', 'Кластер'],
     },
     {
       name: 'Astra Linux',
       description: 'Защищенная операционная система для госструктур и коммерческих организаций.',
-      products: ['Astra Linux Special Edition', 'Astra Linux Common Edition']
+      products: ['Astra Linux Special Edition', 'Astra Linux Common Edition'],
     },
     {
       name: 'РедСофт',
       description: 'Разработчик ОС РЕД и решений для цифровой трансформации.',
-      products: ['РЕД ОС', 'РЕД СУБД', 'РЕД Виртуализация']
+      products: ['РЕД ОС', 'РЕД СУБД', 'РЕД Виртуализация'],
     },
     {
       name: 'BaseALT',
       description: 'Разработчик дистрибутивов ALT Linux для различных сегментов рынка.',
-      products: ['ALT Education', 'ALT Server', 'ALT Workstation']
+      products: ['ALT Education', 'ALT Server', 'ALT Workstation'],
     },
     {
       name: 'ELMA',
       description: 'Low-code платформа для автоматизации и управления бизнес-процессами.',
-      products: ['ELMA365', 'BPM', 'ECM', 'CRM']
+      products: ['ELMA365', 'BPM', 'ECM', 'CRM'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -60,5 +60,5 @@ export function RussianSoftwarePage({ onBack }: RussianSoftwarePageProps) {
       vendors={vendors}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/SpecializedServicesPage.tsx

@@ -1,42 +1,43 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface SpecializedServicesPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function SpecializedServicesPage({ onBack }: SpecializedServicesPageProps) {
   const services = [
     {
       name: 'Решения для финансового сектора',
-      description: 'Специализированные IT-решения для банков, страховых компаний и финансовых организаций с учетом требований регуляторов.',
+      description:
-      products: ['АБС', 'ДБО', 'Процессинг', 'Комплаенс']
+        'Специализированные IT-решения для банков, страховых компаний и финансовых организаций с учетом требований регуляторов.',
+      products: ['АБС', 'ДБО', 'Процессинг', 'Комплаенс'],
     },
     {
       name: 'Промышленные решения',
       description: 'Автоматизация производства, АСУТП, MES-системы и промышленный IoT на базе российских технологий.',
-      products: ['MES', 'АСУТП', 'IIoT', 'SCADA']
+      products: ['MES', 'АСУТП', 'IIoT', 'SCADA'],
     },
     {
       name: 'Здравоохранение',
       description: 'МИС, ПАКС, лабораторные системы и телемедицина с интеграцией в ЕГИСЗ.',
-      products: ['МИС', 'ПАКС', 'ЛИС', 'Телемедицина']
+      products: ['МИС', 'ПАКС', 'ЛИС', 'Телемедицина'],
     },
     {
       name: 'Образование',
       description: 'Цифровизация образовательного процесса: LMS, электронные библиотеки, системы тестирования.',
-      products: ['LMS', 'Электронная библиотека', 'Вебинары']
+      products: ['LMS', 'Электронная библиотека', 'Вебинары'],
     },
     {
       name: 'Ритейл и e-commerce',
       description: 'Решения для розничной торговли: кассовые системы, управление складом, интернет-магазины.',
-      products: ['E-commerce', 'POS', 'WMS', 'Омниканальность']
+      products: ['E-commerce', 'POS', 'WMS', 'Омниканальность'],
     },
     {
       name: 'Телеком и медиа',
       description: 'Биллинговые системы, OSS/BSS, потоковое видео и CDN на российских платформах.',
-      products: ['Биллинг', 'OSS/BSS', 'CDN', 'Streaming']
+      products: ['Биллинг', 'OSS/BSS', 'CDN', 'Streaming'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +46,5 @@ export function SpecializedServicesPage({ onBack }: SpecializedServicesPageProps
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/SubscriptionPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface SubscriptionPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function SubscriptionPage({ onBack }: SubscriptionPageProps) {
@@ -9,34 +9,34 @@ export function SubscriptionPage({ onBack }: SubscriptionPageProps) {
     {
       name: 'Облачная инфраструктура по подписке',
       description: 'Аренда виртуальных серверов, хранилищ и сетевых ресурсов на российских облачных платформах.',
-      products: ['Виртуальные серверы', 'Хранилища', 'Сети', 'Балансировка']
+      products: ['Виртуальные серверы', 'Хранилища', 'Сети', 'Балансировка'],
     },
     {
       name: 'Лицензии на российское ПО',
       description: 'Предоставление лицензий на отечественное программное обеспечение по модели подписки.',
-      products: ['ОС', 'Офисные пакеты', 'СУБД', 'Средства защиты']
+      products: ['ОС', 'Офисные пакеты', 'СУБД', 'Средства защиты'],
     },
     {
       name: 'SaaS решения',
       description: 'Доступ к корпоративным приложениям в облаке: CRM, ERP, документооборот, коммуникации.',
-      products: ['CRM', 'ERP', 'ECM', 'Collaboration']
+      products: ['CRM', 'ERP', 'ECM', 'Collaboration'],
     },
     {
       name: 'Безопасность как сервис',
       description: 'Подписка на облачные сервисы безопасности: антивирус, DLP, email-защита, веб-фильтрация.',
-      products: ['Cloud Антивирус', 'Email Security', 'DLP', 'WAF']
+      products: ['Cloud Антивирус', 'Email Security', 'DLP', 'WAF'],
     },
     {
       name: 'Мониторинг и аналитика',
       description: 'Платформы мониторинга инфраструктуры, сбор метрик и бизнес-аналитика по подписке.',
-      products: ['APM', 'Логирование', 'Метрики', 'BI']
+      products: ['APM', 'Логирование', 'Метрики', 'BI'],
     },
     {
       name: 'Рабочие места как сервис',
       description: 'Виртуальные рабочие столы (VDI) с предустановленным ПО и поддержкой.',
-      products: ['VDI', 'DaaS', 'Приложения', 'Поддержка']
+      products: ['VDI', 'DaaS', 'Приложения', 'Поддержка'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +45,5 @@ export function SubscriptionPage({ onBack }: SubscriptionPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/pages/SupportPage.tsx

@@ -1,7 +1,7 @@
-import { CategoryPage } from '../components/CategoryPage';
+import { CategoryPage } from '../components/CategoryPage'
 
 interface SupportPageProps {
-  onBack: () => void;
+  onBack: () => void
 }
 
 export function SupportPage({ onBack }: SupportPageProps) {
@@ -9,34 +9,34 @@ export function SupportPage({ onBack }: SupportPageProps) {
     {
       name: 'Техническая поддержка 24/7',
       description: 'Круглосуточная поддержка IT-инфраструктуры с гарантированным временем реакции и решения проблем.',
-      products: ['L1-L3 поддержка', 'Hotline', 'Удаленная помощь']
+      products: ['L1-L3 поддержка', 'Hotline', 'Удаленная помощь'],
     },
     {
       name: 'Сопровождение ПО',
       description: 'Обслуживание и поддержка корпоративных информационных систем, обновления и доработки.',
-      products: ['Обновления', 'Патчи', 'Доработки', 'Консультации']
+      products: ['Обновления', 'Патчи', 'Доработки', 'Консультации'],
     },
     {
       name: 'Обслуживание серверов и СХД',
       description: 'Регулярное обслуживание, мониторинг и замена оборудования по договору.',
-      products: ['Профилактика', 'Ремонт', 'Замена', 'Апгрейд']
+      products: ['Профилактика', 'Ремонт', 'Замена', 'Апгрейд'],
     },
     {
       name: 'Обслуживание сетевой инфраструктуры',
       description: 'Поддержка сетевого оборудования, настройка, мониторинг и устранение неисправностей.',
-      products: ['Сети', 'Wi-Fi', 'VPN', 'Диагностика']
+      products: ['Сети', 'Wi-Fi', 'VPN', 'Диагностика'],
     },
     {
       name: 'Обслуживание систем безопасности',
       description: 'Сопровождение средств защиты информации: обновление баз, настройка правил, анализ инцидентов.',
-      products: ['Антивирус', 'NGFW', 'IDS/IPS', 'Обновления']
+      products: ['Антивирус', 'NGFW', 'IDS/IPS', 'Обновления'],
     },
     {
       name: 'Абонентское обслуживание',
       description: 'Комплексная IT-поддержка по модели абонентского обслуживания с фиксированной стоимостью.',
-      products: ['Фиксированная цена', 'SLA', 'Приоритет', 'Отчеты']
+      products: ['Фиксированная цена', 'SLA', 'Приоритет', 'Отчеты'],
-    }
+    },
-  ];
+  ]
 
   return (
     <CategoryPage
@@ -45,5 +45,5 @@ export function SupportPage({ onBack }: SupportPageProps) {
       vendors={services}
       onBack={onBack}
     />
-  );
+  )
 }

src/styles/animations.css

@@ -1,7 +1,8 @@
 /* Общие анимации для всего приложения */
 
 @keyframes float {
-  0%, 100% { 
+  0%,
+  100% {
     transform: translateY(0px);
   }
   50% {

src/styles/globals.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @custom-variant dark (&:is(.dark *));