chore(website): improve animation section - closes #17 (#19)

suyalcinkaya · May 9, 2024 · 0c52be9 · 0c52be9
1 parent 643475a
commit 0c52be9
Show file tree

Hide file tree

Showing 8 changed files with 97 additions and 26 deletions.
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -38,6 +38,8 @@
     "next": "14.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^5.2.1",
+    "react-intersection-observer": "^9.10.2",
     "sonner": "^1.4.41",
     "sugar-high": "^0.6.1",
     "tailwind-merge": "^2.3.0",

diff --git a/apps/website/src/components/code-block.tsx b/apps/website/src/components/code-block.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { toast } from 'sonner'
 import { highlight } from 'sugar-high'
-import { CopyIcon, CheckIcon, ChevronDownIcon, ChevronRightIcon } from 'lucide-react'
+import { LuCopy, LuCheck, LuChevronDown, LuChevronRight } from 'react-icons/lu'
 
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
@@ -70,7 +70,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
             'invisible absolute right-4 top-4 z-10 size-8 p-0 opacity-0 transition-opacity group-hover/code-block:visible group-hover/code-block:opacity-100'
           )}
         >
-          {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+          {copied ? <LuCheck size={14} /> : <LuCopy size={14} />}
         </Button>
       </div>
     )
@@ -91,7 +91,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = ({
                 className="flex cursor-pointer select-none items-center gap-2 bg-gray-50 px-4 py-3 text-sm text-gray-600"
                 onClick={() => setIsOpened(!isOpened)}
               >
-                {isOpened ? <ChevronDownIcon size={14} /> : <ChevronRightIcon size={14} />}
+                {isOpened ? <LuChevronDown size={14} /> : <LuChevronRight size={14} />}
                 {isOpened ? 'Hide code' : 'Show code'}
               </div>
               {isOpened && <Code />}

diff --git a/apps/website/src/components/hero/sections/animation.tsx b/apps/website/src/components/hero/sections/animation.tsx
@@ -1,27 +1,65 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { Gauge } from '@suyalcinkaya/gauge'
+import { useInView } from 'react-intersection-observer'
 
 import { CodeBlock } from '@/components/code-block'
+
 import { Button } from '@/components/ui/button'
 
+const initialGauges = [
+  { value: 18, showAnimation: true, showValue: true },
+  { value: 18, showAnimation: true, showValue: true, variant: 'descending' as const },
+  { value: 81, showAnimation: true, showValue: true },
+  { value: 81, showAnimation: true, showValue: true, variant: 'descending' as const }
+]
+
 export const Animation = () => {
+  const [gauges, setGauges] = useState(initialGauges)
+  const [isAnimationPlaying, setIsAnimationPlaying] = useState(false)
+  const { ref, inView } = useInView({ threshold: 0, triggerOnce: true })
+
+  const playAnimation = () => {
+    if (isAnimationPlaying) return
+
+    setIsAnimationPlaying(true)
+    setGauges(
+      gauges.map((gauge) => ({
+        ...gauge,
+        value: gauge.variant === 'descending' ? 100 : 0,
+        showAnimation: false
+      }))
+    )
+
+    setTimeout(() => {
+      setGauges(initialGauges)
+
+      setTimeout(() => {
+        // Animation transition duration is 1s
+        setIsAnimationPlaying(false)
+      }, 1000)
+    }, 500)
+  }
+
+  // Play animation when the component is in view
+  useEffect(() => {
+    if (inView) {
+      playAnimation()
+    }
+  }, [inView])
+
   return (
     <>
       <h2>Animation</h2>
       <p className="subtitle">
         On initial render, the <code className="inline-code">showAnimation</code> prop animates the Gauge from 0 to the
         value for the <code className="inline-code">ascending</code> variant, and from 100 to the value for the{' '}
-        <code className="inline-code">descending</code> variant.{' '}
-        <Button
-          variant="link"
-          className="inline h-fit whitespace-pre-line p-0 text-base"
-          onClick={() => window.location.reload()}
-        >
-          Refresh the page
-        </Button>{' '}
-        to see the animation.
+        <code className="inline-code">descending</code> variant.
       </p>
+      <Button onClick={playAnimation} disabled={isAnimationPlaying} className="mb-8">
+        Replay animation
+      </Button>
       <CodeBlock
         code={`import { Gauge } from '@suyalcinkaya/gauge'
 
@@ -36,11 +74,10 @@ export function Component(): JSX.Element {
   )
 }`}
         component={
-          <div className="flex items-center gap-8">
-            <Gauge value={18} showAnimation showValue />
-            <Gauge value={18} showAnimation showValue variant="descending" />
-            <Gauge value={81} showAnimation showValue />
-            <Gauge value={81} showAnimation showValue variant="descending" />
+          <div className="flex items-center gap-8" ref={ref}>
+            {gauges.map((gauge, gaugeIndex) => (
+              <Gauge key={`gauge_${gaugeIndex}`} {...gauge} value={gauge.value} showAnimation={gauge.showAnimation} />
+            ))}
           </div>
         }
       />

diff --git a/apps/website/src/components/hero/sections/introduction.tsx b/apps/website/src/components/hero/sections/introduction.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { FaGithub } from 'react-icons/fa'
 
 import { Button } from '@/components/ui/button'
 import { playgroundSectionId } from '@/lib/constants'
@@ -18,6 +19,7 @@ export const Introduction = () => {
         </Button>
         <Button variant="secondary" asChild>
           <a href="https://github.com/suyalcinkaya/gauge" target="_blank" rel="noopener noreferrer">
+            <FaGithub className="mr-2" />
             GitHub
           </a>
         </Button>

diff --git a/apps/website/src/components/hero/sections/playground.tsx b/apps/website/src/components/hero/sections/playground.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react'
 import { Gauge } from '@suyalcinkaya/gauge'
 import { toast } from 'sonner'
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { LuCopy, LuCheck } from 'react-icons/lu'
 
 import { CodeBlock } from '@/components/code-block'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
@@ -200,7 +200,7 @@ export const Playground = () => {
             </CardContent>
             <CardFooter className="px-4 pb-4 md:px-6 md:pb-6">
               <Button onClick={onCopy} disabled={copied} className="flex w-full items-center gap-1.5">
-                {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+                {copied ? <LuCheck size={14} /> : <LuCopy size={14} />}
                 {copied ? 'Copied' : 'Copy'}
               </Button>
             </CardFooter>

diff --git a/apps/website/src/components/snippet.tsx b/apps/website/src/components/snippet.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
-import { CopyIcon, CheckIcon } from 'lucide-react'
+import { LuCopy, LuCheck } from 'react-icons/lu'
 
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
@@ -40,7 +40,7 @@ export const Snippet: React.FC<SnippetProps> = ({ code, wrapperClassName }) => {
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
         <Button variant="ghost" size="icon" className="ml-2 size-7 shrink-0">
-          {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
+          {copied ? <LuCheck size={14} /> : <LuCopy size={14} />}
         </Button>
       </div>
     </div>

diff --git a/apps/website/src/components/ui/select.tsx b/apps/website/src/components/ui/select.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { ChevronsUpDownIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import { LuChevronsUpDown, LuCheck, LuChevronDown, LuChevronUp } from 'react-icons/lu'
 import * as SelectPrimitive from '@radix-ui/react-select'
 
 import { cn } from '@/lib/utils'
@@ -26,7 +26,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronsUpDownIcon className="h-4 w-4 opacity-50" />
+      <LuChevronsUpDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -41,7 +41,7 @@ const SelectScrollUpButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronUpIcon />
+    <LuChevronUp />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -55,7 +55,7 @@ const SelectScrollDownButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronDownIcon />
+    <LuChevronDown />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
@@ -114,7 +114,7 @@ const SelectItem = React.forwardRef<
   >
     <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
+        <LuCheck className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml