Updated: Component updated.

StaticMania · Oct 9, 2024 · 5d4ea1c · 5d4ea1c
1 parent 9fcac55
commit 5d4ea1c
Show file tree

Hide file tree

Showing 217 changed files with 6,199 additions and 4,354 deletions.
diff --git a/app/components/CodeHighlight.tsx b/app/components/CodeHighlight.tsx
@@ -4,7 +4,7 @@ import { FC, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '~/hooks/useCopy'
-import { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { toast } from '../src'
 import { cn } from '../src/utils/cn'
 
 interface CodeHighlightProps {
@@ -33,20 +33,14 @@ const CodeHighlight: FC<CodeHighlightProps> = ({ code }) => {
           ))}
         </div>
         <div>
-          <Tooltip placement="top">
-            <TooltipAction asChild>
-              <button onClick={() => copyToClipboard(Object.values(code)[codeType])} className="mx-6 my-2.5">
-                {copy ? (
-                  <Check size={20} weight="light" color="#fff" />
-                ) : (
-                  <Copy size={20} weight="light" color="#fff" />
-                )}
-              </button>
-            </TooltipAction>
-            <TooltipContent>
-              <p className="text-body-5 font-medium text-white dark:text-metal-900">{copy ? 'Copied' : 'Copy Code'}</p>
-            </TooltipContent>
-          </Tooltip>
+          <button
+            onClick={() => {
+              copyToClipboard(Object.values(code)[codeType])
+              toast.info('Copied to clipboard')
+            }}
+            className="mx-6 my-2.5">
+            {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}
+          </button>
         </div>
       </div>
       <div>

diff --git a/app/components/CodeHighlightPreview.tsx b/app/components/CodeHighlightPreview.tsx
@@ -4,7 +4,7 @@ import { forwardRef, HTMLAttributes, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '~/hooks/useCopy'
-import { Tooltip, TooltipAction, TooltipContent } from '../src'
+import { toast } from '../src'
 import { cn } from '../src/utils/cn'
 
 interface CodeHighlightPreviewProps extends HTMLAttributes<HTMLDivElement> {
@@ -55,22 +55,14 @@ const CodeHighlightPreview = forwardRef<HTMLDivElement, CodeHighlightPreviewProp
             ))}
           </div>
           <div>
-            <Tooltip placement="top">
-              <TooltipAction asChild>
-                <button
-                  onClick={() => copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])}
-                  className="mx-6 my-2.5">
-                  {copy ? (
-                    <Check size={20} weight="light" color="#fff" />
-                  ) : (
-                    <Copy size={20} weight="light" color="#fff" />
-                  )}
-                </button>
-              </TooltipAction>
-              <TooltipContent>
-                <p className="text-body-5 font-medium text-white dark:text-white">{copy ? 'Copied' : 'Copy Code'}</p>
-              </TooltipContent>
-            </Tooltip>
+            <button
+              onClick={() => {
+                copyToClipboard(Object.values(code)[active === 0 ? 0 : active - 1])
+                toast.info('Copied to clipboard')
+              }}
+              className="mx-6 my-2.5">
+              {copy ? <Check size={20} weight="light" color="#fff" /> : <Copy size={20} weight="light" color="#fff" />}
+            </button>
           </div>
         </div>
 

diff --git a/app/components/Community.tsx b/app/components/Community.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import { ArrowLineUpRight } from 'phosphor-react'
 import { useEffect, useState } from 'react'
-import { Avatar, AvatarGroup, AvatarImage } from '../src'
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from '../src'
 
 interface Contributor {
   login: string
@@ -32,6 +32,7 @@ const Community = () => {
       ignore = true
     }
   }, [])
+
   return (
     <section className="community py-20">
       <div className="mx-auto max-w-7xl px-6 py-6 2xl:px-0">
@@ -53,6 +54,7 @@ const Community = () => {
                       {contributors?.map((user) => (
                         <Avatar key={user?.id} className="size-14">
                           <AvatarImage src={user?.avatar_url} />
+                          <AvatarFallback>CB</AvatarFallback>
                         </Avatar>
                       ))}
                     </AvatarGroup>

diff --git a/app/components/ComponentApi.tsx b/app/components/ComponentApi.tsx
@@ -1,5 +1,4 @@
 'use client'
-import { Space_Mono } from 'next/font/google'
 import { FC } from 'react'
 
 interface ComponentApiProps {
@@ -14,11 +13,9 @@ interface ComponentProps {
   data: ComponentApiProps[]
 }
 
-const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400'] })
-
 const ComponentApi: FC<ComponentProps> = ({ data }) => {
   return (
-    <div className={spaceMono.className + 'mx-auto w-full overflow-auto'}>
+    <div className="mx-auto w-full overflow-auto">
       <table className="whitespace-no-wrap z-50 mt-10 min-w-max table-auto overflow-hidden rounded-xl bg-white text-left md:w-full lg:min-w-min dark:bg-metal-900">
         <thead>
           <tr>

diff --git a/app/components/DocSidebar.tsx b/app/components/DocSidebar.tsx
@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { gettingStartedRoutes, layoutRoutes, routes } from '../../routes/routes'
-import { Accordion, AccordionContainer, AccordionContent, AccordionPanel, AccordionTitle } from '../src'
+import { Accordion, AccordionAction, AccordionContent, AccordionItem, AccordionTitle } from '../src'
 
 const DocSidebar = () => {
   const pathname = usePathname()
@@ -17,13 +17,13 @@ const DocSidebar = () => {
       <aside
         id="componentListSidebar"
         className="sticky top-28 h-[75vh] space-y-5 overflow-auto 2xl:top-56 2xl:py-6 2xl:pl-8">
-        <Accordion flush openFirstPanel>
-          <AccordionPanel className="!border-b-0">
-            <AccordionContainer className="p-0">
-              <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900 dark:text-white dark:first-letter:!text-white">
+        <Accordion collapsible type="single" flush defaultValue="getting-started">
+          <AccordionItem value="getting-started" className="border-b-0">
+            <AccordionAction className="px-0 py-0">
+              <AccordionTitle className="text-body-4 font-semibold text-metal-900 dark:text-white">
                 Getting Started
               </AccordionTitle>
-            </AccordionContainer>
+            </AccordionAction>
             <AccordionContent className="p-0">
               <ul className="mt-3 space-y-1.5 border-l border-l-metal-100 dark:border-l-metal-800">
                 {gettingStartedRoutes.map((route) => (
@@ -41,15 +41,15 @@ const DocSidebar = () => {
                 ))}
               </ul>
             </AccordionContent>
-          </AccordionPanel>
+          </AccordionItem>
         </Accordion>
-        <Accordion flush openFirstPanel>
-          <AccordionPanel className="!border-b-0">
-            <AccordionContainer className="p-0">
-              <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900 dark:text-white dark:first-letter:!text-white">
+        <Accordion collapsible type="single" flush defaultValue="layout">
+          <AccordionItem className="border-b-0" value="layout">
+            <AccordionAction className="px-0 py-0">
+              <AccordionTitle className="text-body-4 font-semibold text-metal-900 dark:text-white">
                 Layout
               </AccordionTitle>
-            </AccordionContainer>
+            </AccordionAction>
             <AccordionContent className="p-0">
               <ul className="mt-3 space-y-1.5 border-l border-l-metal-100 dark:border-l-metal-800">
                 {layoutRoutes.map((route) => (
@@ -67,15 +67,15 @@ const DocSidebar = () => {
                 ))}
               </ul>
             </AccordionContent>
-          </AccordionPanel>
+          </AccordionItem>
         </Accordion>
-        <Accordion openFirstPanel flush>
-          <AccordionPanel className="!border-b-0">
-            <AccordionContainer className="p-0">
-              <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900 dark:text-white dark:first-letter:!text-white">
+        <Accordion collapsible type="single" flush defaultValue="components">
+          <AccordionItem className="border-b-0" value="components">
+            <AccordionAction className="px-0 py-0">
+              <AccordionTitle className="text-body-4 font-semibold text-metal-900 dark:text-white">
                 Components
               </AccordionTitle>
-            </AccordionContainer>
+            </AccordionAction>
             <AccordionContent className="p-0">
               <ul className="mt-3 space-y-1.5 border-l border-l-metal-100 dark:border-l-metal-800">
                 {routes.map((route) => (
@@ -93,7 +93,7 @@ const DocSidebar = () => {
                 ))}
               </ul>
             </AccordionContent>
-          </AccordionPanel>
+          </AccordionItem>
         </Accordion>
       </aside>
     </div>

diff --git a/app/components/Faq.tsx b/app/components/Faq.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { Accordion, AccordionContainer, AccordionContent, AccordionIcon, AccordionPanel, AccordionTitle } from '../src'
+import { Accordion, AccordionAction, AccordionContent, AccordionIcon, AccordionItem, AccordionTitle } from '../src'
 
 const Faq = () => {
   const faqs = [
@@ -50,28 +50,28 @@ const Faq = () => {
         </div>
         <div className="mx-auto mt-12 grid grid-cols-1 items-start gap-5 lg:grid-cols-2">
           <div className="w-full lg:col-span-1">
-            <Accordion className="space-y-3">
+            <Accordion type="single" collapsible>
               {faqs.slice(0, 3).map((faq) => (
-                <AccordionPanel key={faq.id} className="border-metal-200">
-                  <AccordionContainer>
+                <AccordionItem value={faq.id.toString()} key={faq.id} className="border-metal-200">
+                  <AccordionAction>
                     <AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
                     <AccordionIcon />
-                  </AccordionContainer>
+                  </AccordionAction>
                   <AccordionContent>{faq.answer}</AccordionContent>
-                </AccordionPanel>
+                </AccordionItem>
               ))}
             </Accordion>
           </div>
           <div className="w-full lg:col-span-1">
-            <Accordion className="space-y-3">
+            <Accordion type="single" collapsible>
               {faqs.slice(3).map((faq) => (
-                <AccordionPanel key={faq.id} className="border-metal-200">
-                  <AccordionContainer>
+                <AccordionItem value={faq.id.toString()} key={faq.id} className="border-metal-200">
+                  <AccordionAction>
                     <AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
                     <AccordionIcon />
-                  </AccordionContainer>
+                  </AccordionAction>
                   <AccordionContent>{faq.answer}</AccordionContent>
-                </AccordionPanel>
+                </AccordionItem>
               ))}
             </Accordion>
           </div>

diff --git a/app/components/KeepPortal.tsx b/app/components/KeepPortal.tsx