add icons page

apps/docs/content/getting-started/icons.md

@@ -0,0 +1,7 @@
+---
+title: Icon
+---
+
+> Icons are based on <a href="https://fonts.google.com/icons" target="_blank">Material Icons</a>
+
+<icon></icon>

apps/docs/src/app/template.tsx

@@ -4,6 +4,7 @@ import App from '@/components/App'
 import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import { ThemeProvider } from 'next-themes'
+import { Toaster } from 'sonner'
 
 export default function Template({ children }: { children: React.ReactNode }) {
   return (
@@ -12,6 +13,7 @@ export default function Template({ children }: { children: React.ReactNode }) {
         <Header />
         <>{children}</>
         <Footer />
+        <Toaster richColors position="top-center" />
       </App>
     </ThemeProvider>
   )

apps/docs/src/components/Aside.tsx

@@ -2,6 +2,7 @@
 
 import { List, ListGroup, ListItem } from 'actify'
 
+import GettingStarted from './GettingStarted'
 import NavLink from './NavLink'
 import { tv } from 'tailwind-variants'
 
@@ -183,24 +184,7 @@ export default function Aside({ open, className }: AsideProps) {
   return (
     <aside className={base({ open, className })}>
       <List>
-        <ListGroup label="Getting started">
-          <NavLink
-            href="/getting-started/installation"
-            className={({ isActive }) =>
-              isActive ? 'block text-primary bg-surface-container-high' : ''
-            }
-          >
-            <ListItem>Installation</ListItem>
-          </NavLink>
-          <NavLink
-            href="/getting-started/theme"
-            className={({ isActive }) =>
-              isActive ? 'block text-primary bg-surface-container-high' : ''
-            }
-          >
-            <ListItem>Theme</ListItem>
-          </NavLink>
-        </ListGroup>
+        <GettingStarted />
         {components.map((component, index) =>
           component.children ? (
             <ListGroup key={index} label={component.label}>

apps/docs/src/components/GettingStarted.tsx

@@ -0,0 +1,36 @@
+import { ListGroup, ListItem } from 'actify'
+
+import NavLink from './NavLink'
+
+const GettingStarted = () => {
+  return (
+    <ListGroup label="Getting started">
+      <NavLink
+        href="/getting-started/installation"
+        className={({ isActive }) =>
+          isActive ? 'block text-primary bg-surface-container-high' : ''
+        }
+      >
+        <ListItem>Installation</ListItem>
+      </NavLink>
+      <NavLink
+        href="/getting-started/theme"
+        className={({ isActive }) =>
+          isActive ? 'block text-primary bg-surface-container-high' : ''
+        }
+      >
+        <ListItem>Theme</ListItem>
+      </NavLink>
+      <NavLink
+        href="/getting-started/icons"
+        className={({ isActive }) =>
+          isActive ? 'block text-primary bg-surface-container-high' : ''
+        }
+      >
+        <ListItem>Icon</ListItem>
+      </NavLink>
+    </ListGroup>
+  )
+}
+
+export default GettingStarted

apps/docs/src/components/Markdown.tsx

@@ -1,6 +1,7 @@
 import DocPreview from '@/components/DocPreview'
 import DocTabs from '@/components/DocTabs'
 import DocUsage from '@/components/DocUsage'
+import Icon from '@/views/icon'
 import ReactMarkdown from 'react-markdown'
 import SyntaxHighlighter from '@/components/SyntaxHighlighter'
 import Theme from '@/views/theme'
@@ -62,7 +63,8 @@ export default function Markdown({ docs, usage }: MarkdownProps) {
         ),
         // @ts-ignore
         preview: ({ node, children, ...rest }) => <DocPreview {...rest} />,
-        theme: () => <Theme />
+        theme: () => <Theme />,
+        icon: () => <Icon />
       }}
     >
       {`# ${docs.title} ${docs.description ? '\r\n>' + docs.description : ''}\r\n` +

apps/docs/src/views/icon.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Icon, LinearProgress, TextField } from 'actify'
+import { useEffect, useRef, useState, useTransition } from 'react'
+
+import icons from './icons.json'
+import { toast } from 'sonner'
+import { useInView } from 'framer-motion'
+
+const IconWrapper = ({ children }: { children: string }) => {
+  const ref = useRef(null)
+  const isInView = useInView(ref)
+
+  const copy = (icon: string) => {
+    navigator.clipboard.writeText(icon).then(
+      () => {
+        toast.success(`Icon ${icon} Copied!`)
+      },
+      () => {
+        toast.error('Copy Failed!')
+      }
+    )
+  }
+
+  return (
+    <div
+      ref={ref}
+      title={children}
+      className="flex items-center justify-center cursor-pointer p-2 bg-inverse-surface-variant rounded"
+    >
+      {isInView ? (
+        <Icon
+          className="text-primary [--md-icon-size:36px]"
+          onClick={() => copy(children)}
+        >
+          {children}
+        </Icon>
+      ) : (
+        <div className="size-9 p-2 animate-pulse" />
+      )}
+    </div>
+  )
+}
+
+export default () => {
+  const [isPending, startTransition] = useTransition()
+  const [filterIcons, setFilterIcons] = useState<string[]>([])
+
+  useEffect(() => {
+    setFilterIcons(icons)
+  }, [])
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target
+    const reg = new RegExp(value, 'i')
+    startTransition(() => {
+      setFilterIcons(icons.filter((icon) => reg.test(icon)))
+    })
+  }
+
+  return (
+    <div>
+      <TextField
+        className="w-full mb-2"
+        onChange={handleChange}
+        label={`Search ${filterIcons.length} icons`}
+      />
+      <LinearProgress indeterminate={isPending} value={0} />
+      <div className="mt-2 gap-2 grid grid-cols-[repeat(auto-fill,minmax(52px,1fr))]">
+        {filterIcons.map((icon) => (
+          <IconWrapper key={icon}>{icon}</IconWrapper>
+        ))}
+      </div>
+    </div>
+  )
+}