Skip to content

Add animations into ambassordors card #1570

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add animations into ambassordors card #1570

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70dae35
add animations into ambassordors card
AQIB-NAWAB Mar 19, 2025
72c0025
fix the Link and use tailwnd css
AQIB-NAWAB Mar 24, 2025
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
73 changes: 44 additions & 29 deletions components/AmbassadorsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';

interface Contribution {
title: string;
Expand Down Expand Up @@ -178,39 +179,53 @@ const AmbassadorCard = ({ ambassador }: { ambassador: Ambassador }) => {
{contributions.length > 0 && (
<button
onClick={() => setShowContributions(!showContributions)}
className={`w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white dark:text-slate-100 font-semibold py-2 px-4 rounded transition-all duration-300 transform ${
showContributions ? 'rotate' : ''
}`}
className={`w-full bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white dark:text-slate-100 font-semibold py-2 px-4 rounded transition-all duration-300 ${
showContributions ? 'shadow-inner' : 'shadow'
} flex items-center justify-center`}
>
{showContributions ? 'Hide Details' : 'Show Full Details'}
<span className='mr-2'>
{showContributions ? 'Hide Details' : 'Show Full Details'}
</span>
</button>
)}

{showContributions && contributions.length > 0 && (
<div className='mt-4'>
<h4 className='text-lg font-semibold mb-2 text-gray-900 dark:text-white'>
Contributions
</h4>
<ul className='text-gray-600 dark:text-slate-100 text-sm'>
{contributions.map((contribution, index) => (
<li key={index} className='mb-2'>
<strong>{contribution.title}</strong>
{contribution.date &&
` (${contribution.date.month} ${contribution.date.year})`}{' '}
-
<a
href={contribution.link}
className='text-blue-600 dark:text-blue-400 ml-1 hover:underline'
target='_blank'
rel='noopener noreferrer'
>
{contribution.type}
</a>
</li>
))}
</ul>
</div>
)}
<div
className={`overflow-hidden transition-all duration-300 ease-in-out ${
showContributions
? 'max-h-96 opacity-100 mt-4'
: 'max-h-0 opacity-0'
}`}
>
<h4 className='text-lg font-semibold mb-2 text-gray-900 dark:text-white'>
Contributions
</h4>
<ul className='text-gray-600 dark:text-slate-100 text-sm'>
{contributions.map((contribution, index) => (
<li
key={index}
className={`mb-2 transition-all duration-300 ease-in-out ${
showContributions
? 'opacity-100 translate-y-0'
: 'opacity-0 translate-y-2'
}`}
style={{ transitionDelay: `${index * 100}ms` }}
>
<strong>{contribution.title}</strong>
{contribution.date &&
` (${contribution.date.month} ${contribution.date.year})`}{' '}
-
<Link
href={contribution.link}
className='text-blue-600 dark:text-blue-400 ml-1 hover:underline'
target='_blank'
rel='noopener noreferrer'
>
{contribution.type}
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
);
Expand Down