Finish chart

adamplesnik · Nov 14, 2024 · b3d27ba · b3d27ba
1 parent 3f25c7c
commit b3d27ba
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
diff --git a/src/content/Chart.tsx b/src/content/Chart.tsx
@@ -107,8 +107,10 @@ const Chart = () => {
               <div
                 key={`circle_${i}`}
                 className={clsx(
-                  'absolute scale-75 rounded-full sm:scale-90 md:scale-100 lg:scale-110',
-                  isActive ? 'opacity-80' : 'opacity-0'
+                  'absolute -translate-x-1/3 rounded-full transition-[opacity,transform] duration-700 ease-in-out sm:-translate-x-1/4',
+                  isActive
+                    ? 'scale-75 opacity-80 sm:scale-90 md:scale-100 lg:scale-110'
+                    : 'scale-50 opacity-0'
                 )}
                 style={{
                   width: circle.size,

diff --git a/src/content/ChartItem.tsx b/src/content/ChartItem.tsx
@@ -1,5 +1,6 @@
 import Heading from '@/components/Heading'
 import Paragraph from '@/components/Paragraph'
+import clsx from 'clsx'
 
 const ChartItem = ({
   title,
@@ -13,12 +14,37 @@ const ChartItem = ({
   onClick: () => void
 }) => {
   return (
-    <div className="flex-1" onClick={onClick}>
-      <Heading size={2} className="pb-2">
-        {title}
-        {isActive && '/'}
-      </Heading>
-      <Paragraph>{desc}</Paragraph>
+    <div
+      className={clsx(
+        'group flex-1 transition-opacity',
+        !isActive && 'opacity-70 hover:opacity-95'
+      )}
+    >
+      <div onClick={onClick} className="inline-block cursor-pointer">
+        <Heading size={2} className="relative mb-2 inline-block text-nowrap">
+          {title}
+          <div
+            className={clsx(
+              'absolute left-0 top-1/2 h-px w-full bg-black transition-[max-width] duration-300 ease-in-out',
+              isActive ? 'max-w-0' : 'max-w-full delay-500'
+            )}
+          />
+          <div
+            className={clsx(
+              'absolute bottom-1 left-0 h-px w-full bg-black transition-[max-width] duration-300 ease-in-out',
+              isActive ? 'max-w-full delay-500' : 'max-w-0'
+            )}
+          />
+        </Heading>
+      </div>
+      <Paragraph
+        className={clsx(
+          'transition-opacity delay-150 duration-300',
+          !isActive && 'pointer-events-none opacity-0'
+        )}
+      >
+        {desc}
+      </Paragraph>
     </div>
   )
 }