moar font

getting switch with label to use font

components/helpers/switch-with-label.tsx

@@ -1,11 +1,11 @@
-import { SizeTokens, XStack, Label, Separator, Switch } from "tamagui";
+import { SizeTokens, XStack, Separator, Switch } from "tamagui";
+import { Label } from "./text";
 
 export function SwitchWithLabel(props: { size: SizeTokens; checked: boolean, label: string, onCheckedChange: (value: boolean) => void, width?: number }) {
     const id = `switch-${props.size.toString().slice(1)}-${props.checked ?? ''}}`
     return (
       <XStack alignItems="center" gap="$4">
         <Label
-          justifyContent="flex-end"
           size={props.size}
           htmlFor={id}
         >

components/helpers/text.tsx

@@ -1,14 +1,30 @@
 import { StyleSheet } from "react-native"
-import { H1 } from "tamagui"
+import { H1, SizeTokens, Label as TamaguiLabel } from "tamagui"
 
 const styles = StyleSheet.create({
-    text: {
-        
-    },
     heading: {
         fontFamily: 'Aileron-Black'
-    }
-})
+    },
+    label: {
+        fontFamily: 'Aileron-SemiBold'
+    },
+    text: {
+        fontFamily: 'Aileron-Regular'
+    },
+});
+
+interface LabelProps {
+    htmlFor: string,
+    children: string,
+    size: SizeTokens
+}
+
+export function Label(props: LabelProps): React.JSX.Element {
+    return (
+        <TamaguiLabel htmlFor={props.htmlFor} justifyContent="flex-end">{ props.children }</TamaguiLabel>
+    )
+}
+
 export function Heading({ children }: { children: string }): React.JSX.Element {
     return (
         <H1 marginVertical={30} style={styles.heading}>{ children }</H1>