everything

app/results/page.tsx

@@ -4,8 +4,19 @@ import {DayCard} from "@components/custom/dayCard";
 
 export default function Results() {
     return (
-        <div>
+        <div className={"p-12 h-full w-full"}>
+            <div className={"h-full w-full bg-green-400 grid auto-cols-max auto-rows-max gap-12 content-start"}>
                 <DayCard day={1} enabled={true} name={"Michal Polka"}/>
+                <DayCard day={1} name={"Michal Polka"}/>
+                <DayCard day={1} enabled={true} name={"Michal Polka"}/>
+                <DayCard day={1} name={"Michal Polka"}/>
+                <DayCard day={1} enabled={true} name={"Michal Polka"}/>
+                <DayCard day={1} name={"Michal Polka"}/>
+                <DayCard day={1} enabled={true} name={"Michal Polka"}/>
+                <DayCard day={1} name={"Michal Polka"}/>
+                <DayCard day={1} enabled={true} name={"Michal Polka"}/>
+                <DayCard day={1} name={"Michal Polka"}/>
+            </div>
         </div>
     )
 }

components/custom/dayCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { BellRing, Check } from "lucide-react"
+import { Lock } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
@@ -18,28 +18,28 @@ type CardProps = React.ComponentProps<typeof Card>
 interface DayCardProps extends CardProps {
     day: number,
     name: string,
-    enabled: boolean
+    enabled?: boolean | false,
+    oral?: boolean | true,
+}
+
+function say() {
+    alert("Hello")
 }
 
 export function DayCard({ className, ...props }: DayCardProps) {
     return (
-        <Card className={cn("w-[300px]", className)} {...props}>
-            <CardContent className="grid gap-4">
+        <Card className={cn("w-[300px] h-[300px]", className)} {...props} onClick={say}>
+            <CardContent className="p-4 gap-4 h-full">
                 {props.enabled ?
-                <div className="rounded-md p-4">
-                    <h1 className="text-[100px] font-bold bg-red-700">1</h1>
-                    <div className="flex flex-col bg-blue-500">
+                <div className="rounded-md p-4 h-full flex flex-col items-end bg-blue-500">
+                    <h1 className="text-[100px] font-bold justify-end">1</h1>
+                    <div className="flex flex-col">
                         <h2 className="text-2xl font-bold">Michal Polka</h2>
-                        <p className="text-xl">Description</p>
                     </div>
                 </div>
                 :
-                <div className="rounded-md p-4">
-                    <h1 className="text-[100px] font-bold bg-red-700">1</h1>
-                    <div className="flex flex-col bg-blue-500">
-                        <h2 className="text-2xl font-bold">Michal Polka</h2>
-                        <p className="text-xl">Description</p>
-                    </div>
+                <div className="rounded-md h-full w-full p-4 grid place-content-center">
+                    <Lock size={200}/>
                 </div>
                 }
             </CardContent>