feat: update ui

frontend/components/ui/icons.tsx

@@ -0,0 +1,8 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import { styled } from "tamagui";
+
+export const Icons = styled(MaterialCommunityIcons, {
+  color: "$color",
+});
+
+export default Icons;

frontend/components/ui/pressable.tsx

@@ -0,0 +1,20 @@
+import { Pressable as BasePressable } from "react-native";
+import { GetProps, styled, ViewStyle } from "tamagui";
+
+const StyledPressable = styled(BasePressable);
+export type PressableProps = GetProps<typeof StyledPressable> & {
+  $hover?: ViewStyle;
+  $pressed?: ViewStyle;
+};
+
+const Pressable = ({
+  $hover,
+  $pressed = { opacity: 0.5 },
+  ...props
+}: PressableProps) => {
+  return (
+    <StyledPressable pressStyle={$pressed} hoverStyle={$hover} {...props} />
+  );
+};
+
+export default Pressable;

frontend/components/ui/select.tsx

@@ -0,0 +1,65 @@
+import React, { forwardRef } from "react";
+import { Select as BaseSelect } from "tamagui";
+
+export type SelectItem = {
+  label: string;
+  value: string;
+};
+
+type SelectProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger> & {
+  items?: SelectItem[] | null;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+};
+
+type SelectRef = React.ElementRef<typeof BaseSelect.Trigger>;
+
+const Select = forwardRef<SelectRef, SelectProps>(
+  (
+    {
+      items,
+      value,
+      defaultValue,
+      onChange,
+      placeholder = "Select...",
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <BaseSelect
+        defaultValue={defaultValue}
+        value={value}
+        onValueChange={onChange}
+      >
+        <BaseSelect.Trigger ref={ref} {...props}>
+          <BaseSelect.Value placeholder={placeholder} />
+        </BaseSelect.Trigger>
+
+        <BaseSelect.Content>
+          <BaseSelect.ScrollUpButton />
+          <BaseSelect.Viewport>
+            <BaseSelect.Item value="" index={0}>
+              <BaseSelect.ItemText>{placeholder}</BaseSelect.ItemText>
+            </BaseSelect.Item>
+
+            {items?.map((item, idx) => (
+              <BaseSelect.Item
+                key={item.value}
+                value={item.value}
+                index={idx + 1}
+              >
+                <BaseSelect.ItemText>{item.label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
+            ))}
+          </BaseSelect.Viewport>
+          <BaseSelect.ScrollDownButton />
+        </BaseSelect.Content>
+      </BaseSelect>
+    );
+  }
+);
+
+export default Select;