faet: initial quizzes table

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "@apollo/client": "^3.9.2",
     "@hookform/resolvers": "^3.3.4",
-    "@material-tailwind/react": "^2.1.0",
+    "@material-tailwind/react": "^2.1.9",
+    "@tanstack/react-table": "^8.13.2",
     "@vercel/analytics": "^1.1.2",
     "d3-geo": "^3.1.0",
     "date-fns": "^3.3.1",

src/pages/Game/CountryInfoModal.tsx

@@ -18,7 +18,7 @@ export const CountryInfoModal = ({
       </Button>
       <Dialog open={isOpen} handler={toggleDialog}>
         <DialogHeader>
-          <img src={flags.svg} alt={name} className="mr-3 h-5 w-5 rounded-full object-cover" />
+          <img src={flags.svg} alt={name} className="mr-3 size-5 rounded-full object-cover" />
           {name}
         </DialogHeader>
         <DialogBody>

src/pages/Game/CountryQuizList.tsx

@@ -75,7 +75,11 @@ export const CountryQuizList = ({ quizList, isLoadingCountryQuizList }: CountryQ
       {headerContent}
 
       {quizList.map(({ id, title, image, description, timeLimit, difficulty }) => (
-        <Card key={title} className="w-full max-w-[20rem] shadow-lg" onClick={() => navigate(`/game/quiz/${id}`)}>
+        <Card
+          key={title}
+          className="w-full max-w-[20rem] border border-gray-200 shadow-lg"
+          onClick={() => navigate(`/game/quiz/${id}`)}
+        >
           <CardHeader floated={false} color="blue-gray" className="items-ce nter flex justify-center pt-3">
             <img src={image} alt="the background for the quiz" className="h-40" />
             <div className="to-bg-black-10 absolute inset-0 h-full w-full bg-gradient-to-tr from-transparent via-transparent to-black/60 " />

src/pages/Quizzes/Country.tsx

@@ -0,0 +1,13 @@
+import { Typography } from "@material-tailwind/react";
+import { useCountryDetails } from "@utils/hooks/useCountryDetails.ts";
+
+export function Country({ country }: { country: string }) {
+  const countryDetails = useCountryDetails(country || "");
+
+  return (
+    <div className="flex items-center gap-2">
+      <img src={countryDetails?.flags?.svg} alt={country} className="size-5 rounded-full object-cover" />
+      <Typography variant="small">{country}</Typography>
+    </div>
+  );
+}