Event Card - Copy this React, Tailwind Component to your project
hola,-tengo-un-endpoint-que-devuelve-estos-datos-:-{-id:-'cm10hi43b000plw44xjilowsb',-title:-'Événement-3-1',-description:-'Détail-de-l’événement-3-1.-Profitez-d’une-expérience-inoubliable-avec-des-activités-passionnantes.',-eventStart:-2024-06-23T22:00:00.000Z,-eventEnd:-2024-06-25T22:00:00.000Z,-categoryId:-'cm10hi40x0002lw44jx5jclci',-isPublic:-false,-createdAt:-2024-09-13T08:56:31.031Z,-updatedAt:-2024-09-13T08:56:31.031Z,-user:-{-id:-'cm0o1jr7l000841e2f0icl5to',-image:-null,-username:-'user8',-_count:-{-Ratings:-0-}-},-_count:-{-participants:-0-}-}-son-eventos-en-mi-aplicación-de-next.js-quisiera-que-me-des-una-linda-card-para-mostrar-el-evento-completo.-debe-hacer-uso-de-todos-los-datos-recividos-por-el-endpoint.-actualmente-tengo-esto-:-import-{-selectEventById-}-from-'@/actions/eventsServerActions/selectEventById';-import-{-UserAvatar-}-from-'@/public/images/UserAvatar';-import-{-EventWithUserAndCount-}-from-'@/types/types';-export-default-async-function-EventPage({-params,-}:-{-params:-{-id:-string-};-})-{-const-{-id-}-=-await-params;-const-event:-EventWithUserAndCount-|-null-=-await-selectEventById(id);-console.log(event);-return-(-<main-className="w-full-max-w-[1200px]-mx-auto-min-h-[100px]-border-2-rounded-lg-overflow-hidden-bg-green-100/10">-<header-className="text-center">-<img-className="w-full-h-[300px]-object-cover"-src="/images/default_event_image.webp"-alt="image-de-l'event"-/>-<h1-className="text-2xl-font-bold">{event?.title}</h1>-<p>{event?.description}</p>-</header>-<section-className="flex-flex-col-gap-5-p-5">-<div>-<UserAvatar-className="size-32"-src={event?.user.image}-/>-<p>{event?.user.username}</p>-</div>-</section>-</main>-);-}-pero-quisiera-ver-que-tienes-para-proponerme.-estos-son-los-colores-que-uso-actualmente-en-la-app,-asi-se-ven-en-mi-tailwind.config:-colors:-{-light:-{-ciel:-'#90CCF4',-blue:-'#5DA2D5',-grey:-'#ECECEC',-yellow:-'#F3D250',-red:-'#F78888',-},-dark:-{-grey:-'#EDEAE5',-yellow:-'#FCE181',-yellowLight:-'#FEF9C7',-greenLight:-'#9FEDD7',-green:-'#026670',-bg:-'#232323',-},
