style(cover): matched style for cover letters with templates

frontend/src/components/CoverLetter.tsx

@@ -0,0 +1,12 @@
+import type { CoverLetterPreview } from "@/types/api";
+import { Link } from "@tanstack/react-router";
+
+export default ({ cover }: { cover: CoverLetterPreview }) => {
+    return (
+        <Link to={"/cover/$coverId"} params={{ coverId: cover.id.toString() }}>
+            <div className="p-4 border rounded-lg hover:bg-muted/40">
+                <h2 className="text-xl font-semibold">{cover.name}</h2>
+            </div>
+        </Link>
+    );
+};

frontend/src/routes/index.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import requests from "@/lib/requests";
 import type { CoverLetterPreview } from "@/types/api";
 import renderQueryState from "@/components/RenderQueryState";
+import CoverLetter from "@/components/CoverLetter";
 
 export const Route = createFileRoute("/")({
     component: App,
@@ -35,19 +36,10 @@ function App() {
                 </Link>
             </div>
 
-            <div className="flex flex-col gap-2 mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                 {lettersState !== null
                     ? lettersState
-                    : letters.data?.covers.map((l) => (
+                    : letters.data?.covers.map((l) => <CoverLetter cover={l} />)}
-                          <Link
-                              className="px-3 py-2 cursor-pointer rounded hover:bg-secondary"
-                              to={"/cover/$coverId"}
-                              params={{ coverId: l.id.toString() }}
-                              key={l.id}
-                          >
-                              <p>{l.name}</p>
-                          </Link>
-                      ))}
             </div>
         </Authorised>
     );