Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue#483 fixed. Added the changelog page #490

Merged
merged 1 commit into from
Jul 22, 2024
Merged

Issue#483 fixed. Added the changelog page #490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 5 additions & 67 deletions src/app/version/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,16 @@
"use client";
import React, { useEffect, useRef, useState } from 'react';
import VersionCard from './version';
import { versionData } from './versionData';
import React from 'react';
import Header from '@/components/shared/Header';
import Footer from '@/components/shared/Footer';
import ScrollToTopButton from '@/components/shared/ScrollUp';
import Version from '@/components/shared/Version';

const gradientClasses = [
'custom-gradient-3',
'custom-gradient-4',
'custom-gradient-1',
'custom-gradient-2',
];

const Timeline: React.FC = () => {
const [activeIndex, setActiveIndex] = useState<number>(-1);
const cardRefs = useRef<(HTMLDivElement | null)[]>([]);

useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const index = Number(entry.target.getAttribute('data-index'));
if (entry.isIntersecting) {
setActiveIndex(index);
} else if (activeIndex === index) {
setActiveIndex(-1);
}
});
},
{ threshold: 0.5 }
);

cardRefs.current.forEach((ref) => {
if (ref) {
observer.observe(ref);
}
});

return () => {
observer.disconnect();
};
}, [activeIndex]);

const Timeline = () => {
return (
<>
<Header />
<div className="relative w-full h-48 bg-gradient-to-r from-orange-400 via-neon-500 to-red-500 md:h-64">
<div className="absolute inset-0 flex items-center justify-center text-white">
<h1 className="text-4xl font-bold md:text-5xl">What&apos;s new?</h1>
</div>
</div>
<div className="container mx-auto p-4">
<div className="relative">
{versionData.map((version, index) => (
<div
key={index}
className={`relative pb-24 flex flex-row items-center`}
//@ts-ignore
ref={(el) => (cardRefs.current[index] = el)}
data-index={index}
>
<div className="w-full flex flex-col ml-10">
<div className={`vertical-connector ${index !== versionData.length - 1 ? 'h-full' : ''} bg-gray-300`}></div>
<VersionCard
{...version}
className={gradientClasses[index % gradientClasses.length]}
isActive={activeIndex === index}
/>
</div>
</div>
))}
</div>
</div>
<h1 className="text-4xl font-bold md:text-6xl bg-clip-text text-transparent bg-gradient-to-b from-zinc-50 to-orange-500 bg-opacity-50 text-center p-10">What&apos;s new?</h1>
<Version />
<Footer />
<ScrollToTopButton/>
</>
Expand Down
51 changes: 0 additions & 51 deletions src/app/version/version.tsx
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions src/app/version/versionData.ts
View file
Open in desktop

This file was deleted.

46 changes: 46 additions & 0 deletions src/components/shared/Version.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from 'react'

const Version = () => {
return (
<div className="m-6 flex flex-col justify-center items-center mb-24">

<div className="relative pl-8 sm:pl-32 py-6 group">
<div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.0</div>
<div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
<time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Dec, 2023</time>
<div className="text-xl font-bold text-foreground/75">Initialization of the project</div>
</div>
<div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
</div>

<div className="relative pl-8 sm:pl-32 py-6 group">
<div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.1</div>
<div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
<time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Jan, 2024</time>
<div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
</div>
<div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
</div>

<div className="relative pl-8 sm:pl-32 py-6 group">
<div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.2</div>
<div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
<time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">Mar, 2024</time>
<div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
</div>
<div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
</div>

<div className="relative pl-8 sm:pl-32 py-6 group">
<div className="font-caveat font-medium text-2xl text-foreground mb-1 sm:mb-0">Version 1.3</div>
<div className="flex flex-col sm:flex-row items-start mb-1 group-last:before:hidden before:absolute before:left-2 sm:before:left-0 before:h-full before:px-px before:bg-orange-300 sm:before:ml-[6.5rem] before:self-start before:-translate-x-1/2 before:translate-y-3 after:absolute after:left-2 sm:after:left-0 after:w-2 after:h-2 after:bg-orange-600 after:border-4 after:box-content after:border-foreground/75 after:rounded-full sm:after:ml-[6.5rem] after:-translate-x-1/2 after:translate-y-1.5">
<time className="sm:absolute left-0 translate-y-0.5 inline-flex items-center justify-center text-xs font-semibold uppercase w-20 h-6 mb-3 sm:mb-0 text-orange-600 bg-orange-100 rounded-full">May, 2024</time>
<div className="text-xl font-bold text-foreground/75">Acme was founded in Milan, Italy</div>
</div>
<div className="text-muted-foreground">Pretium lectus quam id leo. Urna et pharetra pharetra massa massa. Adipiscing enim eu neque aliquam vestibulum morbi blandit cursus risus.</div>
</div>
</div>
)
}

export default Version
3 changes: 3 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ const config = {
"accordion-up": "accordion-up 0.2s ease-out",
"scroll-vertical": "scroll-vertical 20s linear infinite",
},
fontFamily: {
caveat: ['Caveat', 'cursive'],
},
},
},
plugins: [require("tailwindcss-animate")],
Expand Down
Loading