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

Jump to bottom

Cardevent component #95

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Cardevent component #95

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
59 changes: 59 additions & 0 deletions components/CardEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import Tag from './Tag';
import Link from 'next/link';

type Props = {
title: string;
subtitle: string;
nbParticipants: number;
month: string;
day: string;
description: string;
genres: Array<string>;
/**path to event page */
href: string;
};

export default function CardEvent({
title,
subtitle,
nbParticipants,
month,
day,
description,
genres,
href,
}: Props) {
return (
<div className="flex p-2 border rounded gap-1">
<div className="h-auto w-32 bg-black"></div>
<div className="grow">
<div className="flex gap-2">
<div className="h-20 w-20 bg-red-500 flex flex-col items-center justify-center">
<span className="text-xl text-red-100">{month}</span>
<span className="text-3xl text-white block">{day}</span>
</div>
<div>
<span className="text-xl font-bold">{title}</span>
<span className="block text-sm italic">{subtitle}</span>
<span className="block text-sm italic">
{nbParticipants} participant{nbParticipants > 1 ? 's' : ''}
</span>
</div>
</div>
<span>{description}</span>
<div className="w-full mt-auto flex items-center justify-between">
<div className="w-full flex-wrap flex-grow flex gap-1.5 ">
{genres.map((genre, index) => (
<Tag key={index} text={genre} />
))}
</div>
<div className="flex-none pl-2">
<Link href={href} passHref>
<a className="text-sm text-blue-500 hover:underline">Voir plus</a>
</Link>
</div>
</div>
</div>
</div>
);
}
54 changes: 27 additions & 27 deletions pages/events.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Header from '../components/Header';
import { IPeople } from '../components/icons';
import NewButton from '../components/NewButton';
import Banner from '../components/Banner';
import DetailsSection from '../components/Details/DetailsSection';
import CardEvent from '../components/CardEvent';
import ContentLayout from '../layout/content';
import { MenuContext } from '../context/MenuContext';
import { useContext } from 'react';
Expand All @@ -17,43 +17,43 @@ export default function Events(): JSX.Element {
<ContentLayout
Header={
<Header
title="Profil"
title="Événements"
subtitle="420 groupes"
icon={<IPeople />}
rightComponents={
<NewButton label="Modifier mon profil" className="rounded-full" />
<NewButton label="Créer un événement" className="rounded-full" />
}
hamburgerOnClick={() => setIsMenuOpen(!isMenuOpen)}
/>
}
>
<>
<Banner
title="Trouve le"
boldTitle="groupe parfait!"
subtitle="Plus besoin de galérer pour trouver l'équipe parfaite"
title="Participe à"
boldTitle="des événements !"
subtitle="Participe aux événements les plys hype du moment"
imagePath="/images/music_concert.png"
/>
<DetailsSection title="A propos">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
accumsan tristique rutrum. Morbi sit amet diam ac lacus congue
facilisis. Nunc eget est auctor, auctor sapien sed, porta augue.
</p>
</DetailsSection>
<div>
<button
className="px-4 py-1 rounded border bg-gray-50"
onClick={notifySuccess}
>
notif
</button>
<button
className="px-4 py-1 rounded border bg-gray-50"
onClick={notifyError}
>
error
</button>
</div>
<CardEvent
title="La pioche festival"
subtitle="du Samedi au Lundi à Faches-Thumesnil"
nbParticipants={45}
month="Avril"
day="02"
description="Piocheuse, Piocheur, Là où les le jour s'endort, l'obscurité s'installe. Entre pierres et projecteurs, l'antre de la mine entame"
genres={['Pop', 'Rock']}
href={`/groups`}
/>
<CardEvent
title="La pioche festival"
subtitle="du Samedi au Lundi à Faches-Thumesnil"
nbParticipants={1}
month="Avril"
day="02"
description=" Piocheuse, Piocheur, Là où les le jour s'endort, l'obscurité s'installe. Entre pierres et projecteurs, l'antre de la mine entame"
genres={['Pop', 'Rock']}
href={`/groups`}
/>
</>
</ContentLayout>
);
Expand Down