website refactor

apps/website/ui/TeamIdentity.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Image } from './Image';
+
+interface TeamIdentityProps {
+  name: string;
+  logoUrl: string;
+  performanceLevel?: string;
+  category?: string;
+}
+
+export function TeamIdentity({ name, logoUrl, performanceLevel, category }: TeamIdentityProps) {
+  return (
+    <Stack direction="row" align="center" gap={3}>
+      <Box width="10" height="10" rounded="lg" overflow="hidden" border borderColor="border-charcoal-outline">
+        <Image
+          src={logoUrl}
+          alt={name}
+          width={40}
+          height={40}
+        />
+      </Box>
+      <Box flex={1}>
+        <Text weight="semibold" color="text-white" block truncate>{name}</Text>
+        {(performanceLevel || category) && (
+          <Stack direction="row" align="center" gap={2} mt={1} wrap>
+            {performanceLevel && (
+              <Text size="xs" color="text-gray-500">{performanceLevel}</Text>
+            )}
+            {category && (
+              <Stack direction="row" align="center" gap={1}>
+                <Box width="1.5" height="1.5" rounded="full" bg="bg-primary-blue" opacity={0.5} />
+                <Text size="xs" color="text-primary-blue">{category}</Text>
+              </Stack>
+            )}
+          </Stack>
+        )}
+      </Box>
+    </Stack>
+  );
+}