From b3d27baaadaccbca68af07a67cdebb986534d956 Mon Sep 17 00:00:00 2001 From: Adam Plesnik <adam.plesnik@gmail.com> Date: Thu, 14 Nov 2024 22:44:17 +0100 Subject: [PATCH] Finish chart --- src/content/Chart.tsx | 6 ++++-- src/content/ChartItem.tsx | 38 ++++++++++++++++++++++++++++++++------ 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/src/content/Chart.tsx b/src/content/Chart.tsx index e10f387..d1ccbeb 100644 --- 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 index f9a78b2..ba8d0cc 100644 --- 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> ) }