Client/ppanel-web
5
0
Fork 0
mirror of https://github.com/perfect-panel/ppanel-web.git synced 2026-02-15 04:41:10 -05:00
Code Issues 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]); const opacityTransform = useTransform(scrollYProgress, [0, 0.1], [0, 1]);
return ( return (
<div className='w-full bg-white font-sans md:px-10 dark:bg-neutral-950' ref={containerRef}> <div className='w-full font-sans md:px-10' ref={containerRef}>
<div className='mx-auto max-w-7xl px-4 py-20 md:px-8 lg:px-10'> <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'> {/* <h2 className='mb-4 max-w-4xl text-lg text-black md:text-4xl dark:text-white'>
Changelog from my journey Changelog from my journey
</h2> </h2>
<p className='max-w-sm text-sm text-neutral-700 md:text-base dark:text-neutral-300'> <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 I&apos;ve been working on Aceternity for the past 2 years. Here&apos;s a timeline of my
journey. journey.
</p> </p> */}
</div> </div>
<div ref={ref} className='relative mx-auto max-w-7xl pb-20'> <div ref={ref} className='relative mx-auto max-w-7xl pb-20'>
{data.map((item, index) => ( {data.map((item, index) => (
<div key={index} className='flex justify-start pt-10 md:gap-10 md:pt-40'> <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='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 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> </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} {item.title}
</h3> </h3>
</div> </div>