feat/36: Style for people in groups

.env.example

@@ -1 +1 @@
-DATABASE_URL=file:./db.dev
+DATABASE_URL=file:./dev.db

src/app/events/[event]/participants/page.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import {
+  FinalRound,
   ParticipantImage,
   ParticipantItem,
   ParticipantName,
@@ -11,6 +12,8 @@ import {
 } from "@/components"
 import { EventProps, Round } from "@/shared/types"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import { RefreshCcw, ThumbsUp } from "lucide-react"
+
 import {
   getSelectedParticipants,
   selectNewRandomPlayer,
@@ -106,59 +109,58 @@ export default function Participants({ params }: EventProps) {
             <ParticipantsList>
               {round.participants.map((participant, index) => (
                 <ParticipantItem key={participant.id}>
-                  <ParticipantImage
-                    src={`https://github.com/${participant.github}.png`}
-                    alt={`${participant.name} photo`}
-                    lined={index !== round.participants.length - 1}
-                  />
-                  <ParticipantName>{participant.name}</ParticipantName>
-
-                  <p className="my-1 text-primary-100">
+                  <div className="group relative h-[69px] w-[69px] cursor-pointer">
                     <button
-                      onClick={handleSetWinner({
+                      className="absolute -top-1 right-0 z-aboveAll hidden h-[28px] w-[28px] items-center justify-center rounded-full bg-primary-100 group-hover:flex"
+                      onClick={handleSelectNewRandomPlayer({
                         userId: participant.id,
                         event,
                         groupId: participant.groupId,
                       })}
                     >
-                      Definir vencedor
+                      <RefreshCcw size={18} />
                     </button>
-                  </p>
-                  <p className="text-primary-100">
+
+                    <ParticipantImage
+                      src={`https://github.com/${participant.github}.png`}
+                      alt={`${participant.name} photo`}
+                      lined={index !== round.participants.length - 1}
+                    />
                     <button
-                      onClick={handleSelectNewRandomPlayer({
+                      className="absolute -bottom-1 left-0 hidden h-[28px] w-[28px] items-center justify-center rounded-full bg-primary-100 transition-all group-hover:flex"
+                      onClick={handleSetWinner({
                         userId: participant.id,
                         event,
                         groupId: participant.groupId,
                       })}
                     >
-                      Selecionar outro
+                      <ThumbsUp size={18} />
                     </button>
-                  </p>
+                  </div>
+
+                  <ParticipantName>{participant.name}</ParticipantName>
                 </ParticipantItem>
               ))}
             </ParticipantsList>
           </RoundItem>
         ))}
       </RoundsList>
 
-      <RoundsList>
-        <RoundItem>
-          <RoundTitle>Final</RoundTitle>
-          <ParticipantsList>
-            {finalRound.participants.map((participant, index) => (
-              <ParticipantItem key={participant.id}>
-                <ParticipantImage
-                  src={`https://github.com/${participant.github}.png`}
-                  alt={`${participant.name} photo`}
-                  lined={index !== finalRound.participants.length - 1}
-                />
-                <ParticipantName>{participant.name}</ParticipantName>
-              </ParticipantItem>
-            ))}
-          </ParticipantsList>
-        </RoundItem>
-      </RoundsList>
+      <FinalRound>
+        <RoundTitle>Final</RoundTitle>
+        <ParticipantsList>
+          {finalRound.participants.map((participant, index) => (
+            <ParticipantItem key={participant.id}>
+              <ParticipantImage
+                src={`https://github.com/${participant.github}.png`}
+                alt={`${participant.name} photo`}
+                lined={index !== finalRound.participants.length - 1}
+              />
+              <ParticipantName>{participant.name}</ParticipantName>
+            </ParticipantItem>
+          ))}
+        </ParticipantsList>
+      </FinalRound>
     </section>
   )
 }

src/components/rounds-list/final-round.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react"
+
+export function FinalRound({ children }: PropsWithChildren) {
+  return (
+    <div className="flex justify-center">
+      <div className="w-[416px]">{children}</div>
+    </div>
+  )
+}

src/components/rounds-list/index.ts

@@ -5,3 +5,4 @@ export * from "./participants-list"
 export * from "./participant-item"
 export * from "./participant-image"
 export * from "./participant-name"
+export * from "./final-round"

src/components/rounds-list/participant-image.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image"
+import { RefreshCcw, ThumbsUp } from "lucide-react"
 
 type ParticipantImageProps = {
   src: string
@@ -9,20 +10,16 @@ type ParticipantImageProps = {
 const afterClasses =
   " after:content-[''] after:h-[1px] after:width-1/2 after:right-1 after:w-full after:bg-primary-100 after:absolute after:top-1/2 relative after:translate-x-1/2 after:left-1/2"
 
-export function ParticipantImage({
-  src,
-  alt,
-  lined,
-}: ParticipantImageProps) {
+export function ParticipantImage({ src, alt, lined }: ParticipantImageProps) {
   return (
-    <div className={`h-[69px] w-[69px]  ${lined && afterClasses}`}>
-      <div className="overflow-hidden rounded-full border-2 border-primary-100">
+    <div className={`relative h-[69px] w-[69px] ${lined && afterClasses}`}>
+      <div className="relative overflow-hidden rounded-full border-2 border-primary-100">
         <Image
           src={src}
           alt={alt}
           width={69}
           height={69}
-          className="relative h-full w-full object-cover transition-all duration-300 hover:scale-125"
+          className="h-full w-full object-cover transition-all duration-300 hover:scale-125"
         />
       </div>
     </div>

src/components/rounds-list/participant-item.tsx

@@ -1,5 +1,9 @@
 import { PropsWithChildren } from "react"
 
 export function ParticipantItem({ children }: PropsWithChildren) {
-  return <li className="ml-2 flex flex-col justify-center">{children}</li>
+  return (
+    <li className=" relative ml-2 flex w-[70px] flex-col justify-center">
+      {children}
+    </li>
+  )
 }

src/components/rounds-list/participant-name.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react"
 
 export function ParticipantName({ children }: PropsWithChildren) {
   return (
-    <span className="mt-[12px] block text-body-xs font-semibold leading-normal text-neutral-900">
+    <span className="mt-[12px] flex h-[32px] place-items-center text-center text-body-xs font-semibold leading-normal text-neutral-900">
       {children}
     </span>
   )

src/components/rounds-list/participants-list.tsx

@@ -1,5 +1,9 @@
 import { PropsWithChildren } from "react"
 
 export function ParticipantsList({ children }: PropsWithChildren) {
-  return <ul className="mt-[12px] inline-flex">{children}</ul>
+  return (
+    <ul className="mt-[12px] inline-flex min-w-[113px] justify-center gap-3">
+      {children}
+    </ul>
+  )
 }

src/components/table/table.tsx

@@ -77,7 +77,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "[&:has([role=checkbox])]:pr-0 py-2 text-left align-middle text-[1.2rem] font-semibold text-neutral-900",
+      "py-2 text-left align-middle text-[1.2rem] font-semibold text-neutral-900 [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}

tailwind.config.js

@@ -1,4 +1,5 @@
 const radiusAndSpacing = {
+  0: "0",
   1: "8px",
   1.5: "12px",
   2: "16px",