chore: server-and-serverless template

packages/components/src/UserCard.tsx

@@ -0,0 +1,83 @@
+import { Avatar, Badge, Card, Group, Loader, Stack, Text } from '@mantine/core'
+import type { UseQueryResult } from '@tanstack/react-query'
+
+export type User = {
+  id: string
+  name: string
+  email: string
+  role: string
+  status: 'active' | 'away' | 'offline'
+}
+
+const STATUS_COLOR: Record<User['status'], string> = {
+  active: 'green',
+  away: 'yellow',
+  offline: 'gray',
+}
+
+export type UserCardProps = {
+  query: UseQueryResult<User | null>
+}
+
+export const UserCard: React.FC<UserCardProps> = ({ query }) => {
+  if (query.isLoading) {
+    return (
+      <Card withBorder radius="md" padding="lg">
+        <Group>
+          <Loader size="sm" />
+          <Text size="sm" c="dimmed">
+            Loading user…
+          </Text>
+        </Group>
+      </Card>
+    )
+  }
+
+  if (query.isError) {
+    return (
+      <Card withBorder radius="md" padding="lg">
+        <Stack gap={4}>
+          <Text fw={600} c="red">
+            Couldn’t load user
+          </Text>
+          <Text size="sm" c="dimmed">
+            {query.error instanceof Error ? query.error.message : 'Unknown error'}
+          </Text>
+        </Stack>
+      </Card>
+    )
+  }
+
+  const user = query.data
+  if (!user) {
+    return (
+      <Card withBorder radius="md" padding="lg">
+        <Text size="sm" c="dimmed">
+          No user to show.
+        </Text>
+      </Card>
+    )
+  }
+
+  return (
+    <Card withBorder radius="md" padding="lg">
+      <Group justify="space-between" wrap="nowrap">
+        <Group wrap="nowrap">
+          <Avatar color="initials" name={user.name} radius="xl" />
+          <Stack gap={0}>
+            <Text fw={600}>{user.name}</Text>
+            <Text size="sm" c="dimmed">
+              {user.email}
+            </Text>
+          </Stack>
+        </Group>
+        <Badge color={STATUS_COLOR[user.status]} variant="light">
+          {user.status}
+        </Badge>
+      </Group>
+      <Text size="sm" mt="md">
+        {user.role}
+      </Text>
+    </Card>
+  )
+}