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-05 12:16:43 +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 = [
{ 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() {
return (
<div className="relative">
{/* 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 */}
{releases.map((release, index) => (
<motion.div
key={release.version}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.15, duration: 0.7 }}
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}`}
<div>
{releases.map((release, index) => (
<motion.div
key={release.version}
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: index * 0.2, duration: 0.6, ease: 'easeOut' }}
className="relative pl-12 pb-12"
>
<Calendar className="h-5 w-5 text-white" />
</div>
{/* 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" />
</div>
{/* Timeline content */}
<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"
tabIndex={0}
role="group"
aria-labelledby={`release-title-${release.version}`}
aria-describedby={`release-desc-${release.version}`}
>
<h3
id={`release-title-${release.version}`}
className="text-xl font-semibold text-gray-900 mb-2"
{/* Timeline content */}
<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"
tabIndex={0}
role="group"
aria-labelledby={`release-title-${release.version}`}
aria-describedby={`release-desc-${release.version}`}
aria-current={index === 0 ? 'step' : undefined} // Mark latest release
>
Snigdha OS {release.version}
</h3>
<time
id={`release-date-${release.version}`}
className="text-sm text-gray-500 font-light"
>
{release.date}
</time>
<p
id={`release-desc-${release.version}`}
className="mt-3 text-gray-700 text-lg leading-relaxed"
>
{release.description}
</p>
</div>
</motion.div>
))}
<h3
id={`release-title-${release.version}`}
className="text-xl font-semibold text-gray-900 mb-2"
>
Snigdha OS {release.version}
</h3>
<time
id={`release-date-${release.version}`}
className="text-sm text-gray-500 font-light"
>
{release.date}
</time>
<p
id={`release-desc-${release.version}`}
className="mt-3 text-gray-700 text-lg leading-relaxed"
>
{release.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
);
}