feat: add register component, hero tweaks and prettier fix

app/(transition)/(root)/events/[id]/_components/Hero/Hero.tsx

@@ -1,27 +1,31 @@
-// import { FC } from 'react';
-import { MapPinIcon } from '@heroicons/react/24/solid'
+import { FC } from 'react';
+import { MapPinIcon } from '@heroicons/react/24/solid';
+import { HeroTypes } from './types';
 
-// export const Hero = ({ name, image, organizer, datime, location }) => (
-export const Hero = () => (
-  <section className={`flex h-80 w-full place-items-end bg-[url('https://www.slingacademy.com/wp-content/uploads/2022/10/hero-image-example.webp')] md:h-96`}>
-    <div className="mx-auto flex w-full max-w-screen-xl px-4 py-8 md:grid-cols-12 lg:gap-8 xl:gap-0">
-      <div className="mr-auto flex w-full flex-col place-self-center">
-        <h1 className="mb-4 max-w-2xl text-2xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
-          Javascript Meetup — Enero
-        </h1>
-        <div className="flex w-full justify-between">
-          <div className="flex grow flex-col">
-            <p className='font-thin'>por <span className='underline'>Javascript Chile</span></p>
-            <p className='font-thin'>Jueves, 27 Enero, 2024 | 6:30 PM</p>
-          </div>
-          <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
-            <MapPinIcon className="h-8 w-8" />
-            <p>
-              Hub Providencia, Calle Falsa, 1234, Santiago
-            </p>
+export const Hero: FC<HeroTypes> = ({ name, organizer, datetime, location }) => {
+  return (
+    <section className={`flex h-80 w-full place-items-end bg-[url(https://images.unsplash.com/photo-1604014237800-1c9102c219da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80)] bg-cover bg-center bg-no-repeat md:h-96`}>
+      <div className='flex h-full w-full flex-col justify-end bg-slate-100/75 dark:bg-slate-900/75'>
+        <div className="mx-auto flex w-full max-w-screen-xl px-4 py-8 md:grid-cols-12 lg:gap-8 xl:gap-0">
+          <div className="mr-auto flex w-full flex-col place-self-center">
+            <h1 className="mb-4 max-w-2xl text-xl font-extrabold leading-none tracking-tight dark:text-white md:text-4xl">
+              {name}
+            </h1>
+            <div className="flex w-full justify-between">
+              <div className="flex grow flex-col">
+                <p className='font-thin'>por <span className='underline'>{organizer}</span></p>
+                <p className='font-thin'>{datetime}</p>
+              </div>
+              <div className="hidden md:flex md:max-w-xs md:items-center md:gap-2">
+                <MapPinIcon className="h-8 w-8" />
+                <p>
+                  {location}
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};

app/(transition)/(root)/events/[id]/_components/Hero/types.d.ts

@@ -1,6 +1,5 @@
 export type HeroTypes = {
   name: string;
-  image: string;
   location: string;
   organizer: string;
   datetime: string;

app/(transition)/(root)/events/[id]/_components/Register/Register.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@/components/ui/button';
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+
+export const Register = () => {
+  return (
+    <section className="flex w-full flex-col gap-2 bg-slate-900 p-6 dark:bg-slate-50">
+      <h2 className="text-xl text-slate-50 dark:text-slate-900 md:text-4xl">Registro</h2>
+      <ol>
+        <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">El evento requiere aprobación de los organizadores</span>
+        </li>
+        <li className="flex content-center gap-2 text-slate-50 dark:text-slate-900">
+          <InformationCircleIcon className="h-6 w-6 shrink-0" />
+          <span className="text-sm italic">Apúrate! Quedan pocas entradas</span>
+        </li>
+      </ol>
+      <p className="text-slate-50 dark:text-slate-900">Para registrarte, por favor haz click en el botón.</p>
+      <Button variant={'secondary'} size={'lg'}>Registrarse</Button>
+    </section>
+  );
+};

app/(transition)/(root)/events/[id]/page.tsx

@@ -5,10 +5,10 @@ import {
   FetchExampleEventsQuery,
 } from "../../../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
 import { Hero } from "./_components/Hero/Hero";
+import { Register } from "./_components/Register/Register";
 
 const event = {
   name: 'Javascript Meetup — Enero',
-  image: 'https://www.slingacademy.com/wp-content/uploads/2022/10/hero-image-example.webp',
   organizer: 'Javascript Chile',
   datetime: 'Jueves, 27 Enero, 2024 | 6:30 PM',
   location: 'Hub Providencia, Calle Falsa, 1234, Santiago'
@@ -20,8 +20,11 @@ export default async function Event() {
     query: FetchExampleEventsDocument,
   });
   return (
-    <main className="flex w-full flex-col items-center justify-between px-6 pt-7 transition-all md:px-10 lg:pt-14 xl:px-0">
-      <Hero {...event} />
+    <main className="flex w-full flex-col items-center justify-between px-6 pt-7 transition-all md:px-10 lg:pt-14">
+      <div className="w-full">
+        <Hero {...event} />
+        <Register />
+      </div>
     </main>
   );
 }

package.json

@@ -67,7 +67,7 @@
     "eslint-plugin-tailwindcss": "^3.13.0",
     "graphql-config": "^5.0.3",
     "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.4.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6"
   },

src/components/Navbar/ThemeSwitcher.tsx

@@ -33,7 +33,7 @@ export function ThemeSwitcher() {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="ghost" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] text-foreground rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 text-foreground transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>