chore(Countdown): added stories

daisyui · Apr 15, 2022 · 0d06591 · 0d06591
1 parent 506cbe5
commit 0d06591
Showing 1 changed file with 103 additions and 2 deletions.
diff --git a/src/Countdown/Countdown.stories.tsx b/src/Countdown/Countdown.stories.tsx
@@ -13,16 +13,117 @@ export const Default: Story<CountdownProps> = (args) => {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setValue(value - 1)
+      setValue((v) => v <= 0 ? args.value : v - 1)
     }, 1000)
 
     return () => {
       clearTimeout(timer)
     }
   }, [value])
 
-  return <Countdown value={value} />
+  return <Countdown className='text-2xl' value={value} />
 }
 Default.args = {
   value: 50,
 }
+
+export const Clock: Story<CountdownProps> = (args) => {
+  const [value, setValue] = useState<number>(args.value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setValue((v) => v <= 0 ? args.value : v - 1)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value])
+
+  return (
+    <span className='font-mono text-2xl'>
+      <Countdown value={10} />:
+      <Countdown value={24} />:
+      <Countdown value={value} />
+    </span>
+  )
+}
+Clock.args = {
+  value: 34,
+}
+
+export const WithLabels: Story<CountdownProps> = (args) => {
+  const [value, setValue] = useState<number>(args.value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setValue((v) => v <= 0 ? args.value : v - 1)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value])
+
+  return (
+    <div className='grid grid-flow-col gap-5 text-center auto-cols-max'>
+      <div className='flex flex-col'>
+        <Countdown className='font-mono text-5xl' value={15} />
+        days
+      </div>
+      <div className='flex flex-col'>
+        <Countdown className='font-mono text-5xl' value={10} />
+        hours
+      </div>
+      <div className='flex flex-col'>
+        <Countdown className='font-mono text-5xl' value={24} />
+        min
+      </div>
+      <div className='flex flex-col'>
+        <Countdown className='font-mono text-5xl' value={value} />
+        sec
+      </div>
+    </div>
+  )
+}
+WithLabels.args = {
+  value: 37,
+}
+
+export const WithBoxes: Story<CountdownProps> = (args) => {
+  const [value, setValue] = useState<number>(args.value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setValue((v) => v <= 0 ? args.value : v - 1)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value])
+
+  return (
+    <div className='grid grid-flow-col gap-5 text-center auto-cols-max'>
+      <div className='flex flex-col p-2 bg-neutral rounded-box text-neutral-content'>
+        <Countdown className='font-mono text-5xl' value={15} />
+        days
+      </div>
+      <div className='flex flex-col p-2 bg-neutral rounded-box text-neutral-content'>
+        <Countdown className='font-mono text-5xl' value={10} />
+        hours
+      </div>
+      <div className='flex flex-col p-2 bg-neutral rounded-box text-neutral-content'>
+        <Countdown className='font-mono text-5xl' value={24} />
+        min
+      </div>
+      <div className='flex flex-col p-2 bg-neutral rounded-box text-neutral-content'>
+        <Countdown className='font-mono text-5xl' value={value} />
+        sec
+      </div>
+    </div>
+  )
+}
+WithBoxes.args = {
+  value: 26,
+}