Refactor: Update Tenant PWA headers and tabs to use Playfair Display and Tamagui components

resources/js/admin/mobile/components/Primitives.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { ADMIN_GRADIENTS, useAdminTheme } from '../theme';
+import { Tabs, Separator } from 'tamagui';
+import { useAdminTheme } from '../theme';
 import { withAlpha } from './colors';
 
 export function MobileCard({
@@ -161,7 +162,7 @@ export function KpiTile({
   note?: string;
   color?: string;
 }) {
-  const { surfaceMuted, textStrong, textMuted, primary, accentSoft } = useAdminTheme();
+  const { textStrong, textMuted, primary, accentSoft } = useAdminTheme();
   const iconBg = color ? withAlpha(color, 0.12) : accentSoft;
   const iconColor = color || primary;
 
@@ -207,7 +208,7 @@ export function KpiStrip({
     note?: string;
   }>
 }) {
-  const { glassSurface, border, textStrong, textMuted, primary, accentSoft } = useAdminTheme();
+  const { glassSurface, border, textStrong, textMuted, primary } = useAdminTheme();
 
   return (
     <YStack
@@ -402,3 +403,63 @@ export function FloatingActionButton({
     </Pressable>
   );
 }
+
+export function ContentTabs({
+  value,
+  onValueChange,
+  tabs,
+  header,
+}: {
+  value: string;
+  onValueChange: (val: string) => void;
+  tabs: { value: string; label: string; content: React.ReactNode }[];
+  header?: React.ReactNode;
+}) {
+  const { border, muted, primary } = useAdminTheme();
+
+  return (
+    <Tabs
+      defaultValue={value}
+      value={value}
+      onValueChange={onValueChange}
+      orientation="horizontal"
+      flexDirection="column"
+      borderRadius="$4"
+      borderWidth={1}
+      borderColor={border}
+      overflow="hidden"
+    >
+      <Tabs.List separator={<Separator vertical />} disablePassBorderRadius="bottom" backgroundColor="$surface">
+        {tabs.map((tab) => (
+          <Tabs.Tab
+            key={tab.value}
+            value={tab.value}
+            flex={1}
+            unstyled
+            paddingVertical="$3"
+            alignItems="center"
+            justifyContent="center"
+            backgroundColor={value === tab.value ? primary : 'transparent'}
+            hoverStyle={{ backgroundColor: value === tab.value ? primary : '$backgroundHover' }}
+          >
+            <Text
+              fontSize="$sm"
+              fontWeight={value === tab.value ? '700' : '500'}
+              color={value === tab.value ? '#fff' : muted}
+            >
+              {tab.label}
+            </Text>
+          </Tabs.Tab>
+        ))}
+      </Tabs.List>
+
+      {header}
+
+      {tabs.map((tab) => (
+        <Tabs.Content key={tab.value} value={tab.value}>
+          {tab.content}
+        </Tabs.Content>
+      ))}
+    </Tabs>
+  );
+}