Applied the corrections from the review

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "postgresql"
-  url = env("DATABASE_URL")
+  url = "postgres://test:test@localhost:5432/test"
 }
 
 

src/app/elections/[electionId]/results/page.tsx

@@ -1,21 +1,21 @@
+import candidates from "@packages/DAO/candidates.dao";
 import ResultCard from "@packages/components/ResultCard";
-import candidates from "src/data/data";
 const Home = () => {
   return (
     <div>
       <div className="flex items-center justify-center h-[80vh] content-center">
         <div>
           <h1 className="text-center text-xl p-16">Resultado da Eleição</h1>
           {candidates.map(
-            ({ image, candidate, vice, party, percentagem, votos }) => (
+            ({ image, candidate, vice, party, percentage, votes }) => (
               <div key={candidate} className="p-4">
                 <ResultCard
                   image={image}
                   candidate={candidate}
                   vice={vice}
                   party={party}
-                  percentagem={percentagem}
-                  votos={votos}
+                  percentagem={percentage}
+                  votos={votes}
                 />
               </div>
             ),

src/packages/DAO/candidates.dao.ts

@@ -0,0 +1,52 @@
+type Candidate = {
+  image: string;
+  candidate: string;
+  vice: string;
+  party: string;
+  percentage: string;
+  votes: string;
+};
+
+const candidates: Candidate[] = [
+  {
+    image: "https://picsum.photos/id/237/200/300",
+    candidate: "Jiji Ping Png",
+    vice: "Xinguilingui",
+    party: "PCC",
+    percentage: "35.2%",
+    votes: "3,200,000",
+  },
+  {
+    image: "https://picsum.photos/id/444/200/300",
+    candidate: "Vladimir Putin",
+    vice: "Zelensky",
+    party: "ABC",
+    percentage: "28.1%",
+    votes: "2,550,000",
+  },
+  {
+    image: "https://picsum.photos/id/398/200/300",
+    candidate: "Lulão da massa",
+    vice: "Xuxu",
+    party: "DEF",
+    percentage: "18.4%",
+    votes: "1,670,000",
+  },
+  {
+    image: "https://picsum.photos/id/577/200/300",
+    candidate: "Biden",
+    vice: "Gagá",
+    party: "GHI",
+    percentage: "12.3%",
+    votes: "1,120,000",
+  },
+  {
+    image: "https://picsum.photos/id/610/200/300",
+    candidate: "Trump",
+    vice: "Bolsonaro",
+    party: "JKL",
+    percentage: "6.0%",
+    votes: "540,000",
+  },
+];
+export default candidates;

src/packages/components/ResultCard.tsx

@@ -18,7 +18,7 @@ function ResultCard({
   image,
 }: ElectionResult) {
   return (
-    <Card className="flex flex-row w-[60vw] p-4 shadow-md shadow-gray-200 border-[rgba(0,0,0,0)]">
+    <Card className="flex flex-row w-[60vw] p-4 shadow-md shadow-gray-200">
       <div className="flex w-[40vw] gap-4">
         <Avatar className="w-16 h-16">
           <AvatarImage src={image} />

src/packages/shadcn-ui/ui/avatar.tsx

@@ -1,50 +1,34 @@
-"use client";
-
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as React from "react";
 
 import { cn } from "@packages/utils/shadcn-utils";
 
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
-    {...props}
-  />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className,
-    )}
-    {...props}
-  />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+const WithStyles = (ShadcnElement: React.ElementType, styles: string) => {
+  const CustomComponent = React.forwardRef<
+    React.ElementRef<typeof ShadcnElement>,
+    React.ComponentPropsWithoutRef<typeof ShadcnElement>
+  >(({ className, ...props }, ref) => (
+    <ShadcnElement ref={ref} className={cn(styles, className)} {...props} />
+  ));
+
+  CustomComponent.displayName = ShadcnElement.displayName;
+
+  return CustomComponent;
+};
+
+const AvatarFallback = WithStyles(
+  AvatarPrimitive.Fallback,
+  "flex h-full w-full items-center justify-center rounded-full bg-muted",
+);
+
+const Avatar = WithStyles(
+  AvatarPrimitive.Root,
+  "flex h-full w-full items-center justify-center rounded-full bg-muted",
+);
+
+const AvatarImage = WithStyles(
+  AvatarPrimitive.Image,
+  "flex h-full w-full items-center justify-center rounded-full bg-muted",
+);
 
 export { Avatar, AvatarImage, AvatarFallback };