added shadcn & table

resources/js/pages/team/Index.vue

@@ -4,6 +4,16 @@ import teamRoutes from "@/routes/teams";
 import {Head} from "@inertiajs/vue3";
 import type {Team} from "@/types/models";
 import TextLink from "@/components/TextLink.vue";
+import {Card, CardContent} from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
 
 defineOptions({
   layout: {
@@ -24,32 +34,37 @@ defineProps<{
 <template>
   <Head title="Teams"/>
 
-  <div>
+  <div class="flex justify-center p-16">
 
+    <Card class="w-full">
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Slug</TableHead>
+              <TableHead>Mitglieder</TableHead>
+              <TableHead>2FA</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow
+              v-if="teams.length > 0"
+              v-for="team in teams"
+            >
+              <TableCell>{{ team.name }}</TableCell>
+              <TableCell>{{ team.slug }}</TableCell>
+              <TableCell>{{ team.members.length }}</TableCell>
+              <TableCell>{{ team.multi_factor_required }}</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableCaption v-if="teams.length <= 0">
+            Du bist noch von keinem Team mitglied.
+            Tritt einem Team bei oder
+            <TextLink href="{{ route('teams.create') }}">erstelle eins.</TextLink>
+          </TableCaption>
+        </Table>
+      </CardContent>
+    </Card>
   </div>
-  <table>
-    <thead>
-    <tr>
-      <th>Name</th>
-      <th>Slug</th>
-      <th>Mitglieder</th>
-      <th>2FA</th>
-    </tr>
-    </thead>
-    <tbody>
-      <tr
-        v-if="teams.length > 0"
-        v-for="team in teams"
-      >
-        <th>{{ team.name }}</th>
-        <th>{{ team.slug }}</th>
-        <th>{{ team.members.length }}</th>
-        <th>{{ team.multi_factor_required }}</th>
-      </tr>
-      <tr v-else class="text-center font-bold">
-        Du bist noch von keinem Team mitglied.
-        Tritt einem Team bei oder <TextLink href="{{ route('teams.create') }}">erstelle eins.</TextLink>
-      </tr>
-    </tbody>
-  </table>
 </template>