S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(timeline): Simplify timeline component layout and remove commented-out code

Browse Source
This commit is contained in:
web@ppanel 2025-03-14 23:21:17 +07:00
parent e551232564
commit fbad3b0e51
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/ui/src/components/timeline.tsx
View File

@ -28,25 +28,25 @@ export const Timeline = ({ data }: { data: TimelineEntry[] }) => {
const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
return (
<div className='w-full bg-white font-sans md:px-10 dark:bg-neutral-950' ref={containerRef}>
<div className='mx-auto max-w-7xl px-4 py-20 md:px-8 lg:px-10'>
<h2 className='mb-4 max-w-4xl text-lg text-black md:text-4xl dark:text-white'>
<div className='w-full font-sans md:px-10' ref={containerRef}>
<div className='mx-auto max-w-7xl px-4 py-10 md:px-8 lg:px-10'>
{/* <h2 className='mb-4 max-w-4xl text-lg text-black md:text-4xl dark:text-white'>
Changelog from my journey
</h2>
<p className='max-w-sm text-sm text-neutral-700 md:text-base dark:text-neutral-300'>
I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s a timeline of my
journey.
</p>
</p> */}
</div>
<div ref={ref} className='relative mx-auto max-w-7xl pb-20'>
{data.map((item, index) => (
<div key={index} className='flex justify-start pt-10 md:gap-10 md:pt-40'>
<div className='sticky top-40 z-40 flex max-w-xs flex-col items-center self-start md:w-full md:flex-row lg:max-w-sm'>
<div className='sticky top-40 z-40 flex max-w-xs flex-col items-center self-start whitespace-nowrap md:w-auto md:flex-row lg:max-w-sm'>
<div className='absolute left-3 flex h-10 w-10 items-center justify-center rounded-full bg-white md:left-3 dark:bg-black'>
<div className='h-4 w-4 rounded-full border border-neutral-300 bg-neutral-200 p-2 dark:border-neutral-700 dark:bg-neutral-800' />
</div>
<h3 className='hidden text-xl font-bold text-neutral-500 md:block md:pl-20 md:text-5xl dark:text-neutral-500'>
<h3 className='hidden text-xl font-bold text-neutral-500 md:block md:pl-20 md:text-xl dark:text-neutral-500'>
{item.title}
</h3>
</div>