From 0d06591130586246700ade4b0db768400c55fb49 Mon Sep 17 00:00:00 2001
From: Benji Trosch <benjitrosch@gmail.com>
Date: Fri, 15 Apr 2022 12:41:23 -0400
Subject: [PATCH] chore(Countdown): added stories

---
 src/Countdown/Countdown.stories.tsx | 105 +++++++++++++++++++++++++++-
 1 file changed, 103 insertions(+), 2 deletions(-)

diff --git a/src/Countdown/Countdown.stories.tsx b/src/Countdown/Countdown.stories.tsx
index dd775ed2..860c0c78 100644
--- a/src/Countdown/Countdown.stories.tsx
+++ b/src/Countdown/Countdown.stories.tsx
@@ -13,7 +13,7 @@ export const Default: Story<CountdownProps> = (args) => {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      setValue(value - 1)
+      setValue((v) => v <= 0 ? args.value : v - 1)
     }, 1000)
 
     return () => {
@@ -21,8 +21,109 @@ export const Default: Story<CountdownProps> = (args) => {
     }
   }, [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,
+}
\ No newline at end of file