Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 04:35:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

🐛 fix: refactoring repetitive properties

Browse Source
This commit is contained in:
eshanized
2025-01-09 20:01:26 +05:30
parent 5b6800367d
commit 83764b3372
1 changed files with 51 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/about/Timeline.tsx
View File

@@ -3,66 +3,68 @@ import { Calendar } from 'lucide-react';
const releases = [ const releases = [
{ version: '2024.1', date: '2024', description: 'Latest release with enhanced cloud support' }, { version: '2024.1', date: '2024', description: 'Latest release with enhanced cloud support' },
{ version: '2023.4', date: '2023', description: 'Major UI overhaul and tool updates' },
{ version: '2023.1', date: '2023', description: 'Introduced new wireless testing tools' },
{ version: '2022.4', date: '2022', description: 'Added ARM64 support improvements' },
{ version: '2022.1', date: '2022', description: 'Enhanced container support' },
]; ];
export function Timeline() { export function Timeline() {
return ( return (
<div className="relative"> <div className="relative">
{/* Vertical timeline line */} {/* Vertical timeline line */}
<div className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded" aria-hidden="true" /> <div
className="absolute left-4 top-0 bottom-0 w-1 bg-gray-300 rounded"
aria-hidden="true"
/>
{/* Timeline items */} {/* Timeline items */}
{releases.map((release, index) => ( <div>
<motion.div {releases.map((release, index) => (
key={release.version} <motion.div
initial={{ opacity: 0, x: -20 }} key={release.version}
whileInView={{ opacity: 1, x: 0 }} initial={{ opacity: 0, x: -20 }}
viewport={{ once: true }} whileInView={{ opacity: 1, x: 0 }}
transition={{ delay: index * 0.15, duration: 0.7 }} viewport={{ once: true }}
className="relative pl-12 pb-12" transition={{ delay: index * 0.2, duration: 0.6, ease: 'easeOut' }}
> className="relative pl-12 pb-12"
{/* Timeline point */}
<div
className="absolute left-0 top-0 p-2 bg-blue-600 rounded-full border-2 border-white shadow-lg"
role="img"
aria-label={`Release date: ${release.date}`}
> >
<Calendar className="h-5 w-5 text-white" /> {/* Timeline point */}
</div> <div
className="absolute left-0 top-0 p-2 bg-blue-600 rounded-full border-2 border-white shadow-lg"
role="img"
aria-label={`Release date: ${release.date}`}
>
<Calendar className="h-5 w-5 text-white" />
</div>
{/* Timeline content */} {/* Timeline content */}
<div <div
className="bg-white/90 backdrop-blur p-6 rounded-lg shadow-md hover:shadow-lg transition-transform transform hover:-translate-y-1 duration-300 ease-in-out" className="bg-white/90 backdrop-blur p-6 rounded-lg shadow-md hover:shadow-lg transition-transform transform hover:-translate-y-1 duration-300 ease-in-out"
tabIndex={0} tabIndex={0}
role="group" role="group"
aria-labelledby={`release-title-${release.version}`} aria-labelledby={`release-title-${release.version}`}
aria-describedby={`release-desc-${release.version}`} aria-describedby={`release-desc-${release.version}`}
> aria-current={index === 0 ? 'step' : undefined} // Mark latest release
<h3
id={`release-title-${release.version}`}
className="text-xl font-semibold text-gray-900 mb-2"
> >
Snigdha OS {release.version} <h3
</h3> id={`release-title-${release.version}`}
<time className="text-xl font-semibold text-gray-900 mb-2"
id={`release-date-${release.version}`} >
className="text-sm text-gray-500 font-light" Snigdha OS {release.version}
> </h3>
{release.date} <time
</time> id={`release-date-${release.version}`}
<p className="text-sm text-gray-500 font-light"
id={`release-desc-${release.version}`} >
className="mt-3 text-gray-700 text-lg leading-relaxed" {release.date}
> </time>
{release.description} <p
</p> id={`release-desc-${release.version}`}
</div> className="mt-3 text-gray-700 text-lg leading-relaxed"
</motion.div> >
))} {release.description}
</p>
</div>
</motion.div>
))}
</div>
</div> </div>
); );
} }