feat: update

frontend/components/ui/alert.tsx

@@ -0,0 +1,58 @@
+import { Card, GetProps, styled, Text, XStack } from "tamagui";
+import Icons from "./icons";
+
+const AlertFrame = styled(Card, {
+  px: "$4",
+  py: "$3",
+  bordered: true,
+  variants: {
+    variant: {
+      default: {},
+      error: {
+        backgroundColor: "$red2",
+        borderColor: "$red5",
+      },
+    },
+  } as const,
+});
+
+const icons: Record<string, string> = {
+  error: "alert-circle-outline",
+};
+
+type AlertProps = GetProps<typeof AlertFrame>;
+
+const Alert = ({ children, variant = "default", ...props }: AlertProps) => {
+  return (
+    <AlertFrame variant={variant} {...props}>
+      <XStack gap="$2">
+        {icons[variant] != null && (
+          <Icons name={icons[variant] as never} size={18} />
+        )}
+
+        <Text fontSize="$3" f={1}>
+          {children}
+        </Text>
+      </XStack>
+    </AlertFrame>
+  );
+};
+
+type ErrorAlert = AlertProps & {
+  error?: unknown | null;
+};
+
+export const ErrorAlert = ({ error, ...props }: ErrorAlert) => {
+  if (!error) {
+    return null;
+  }
+
+  const message = (error as any)?.message || "Something went wrong";
+  return (
+    <Alert variant="error" {...props}>
+      {message}
+    </Alert>
+  );
+};
+
+export default Alert;

frontend/components/ui/button.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { GetProps, Button as BaseButton, Spinner } from "tamagui";
+
+type ButtonProps = GetProps<typeof BaseButton> & {
+  isDisabled?: boolean;
+  isLoading?: boolean;
+};
+
+const Button = ({ icon, isLoading, isDisabled, ...props }: ButtonProps) => {
+  return (
+    <BaseButton
+      icon={isLoading ? <Spinner /> : icon}
+      disabled={isLoading || isDisabled || props.disabled}
+      {...props}
+    />
+  );
+};
+
+export default Button;

frontend/components/ui/os-icons.tsx

@@ -0,0 +1,58 @@
+import { ComponentPropsWithoutRef } from "react";
+import Icons from "./icons";
+
+/*
+var osMap = map[string]string{
+	"arch":     "arch",
+	"ubuntu":   "ubuntu",
+	"kali":     "kali",
+	"raspbian": "raspbian",
+	"pop":      "pop",
+	"debian":   "debian",
+	"fedora":   "fedora",
+	"centos":   "centos",
+	"alpine":   "alpine",
+	"mint":     "mint",
+	"suse":     "suse",
+	"darwin":   "macos",
+	"windows":  "windows",
+	"msys":     "windows",
+	"linux":    "linux",
+}
+*/
+
+const icons: Record<string, { name: string; color?: string }> = {
+  ubuntu: { name: "ubuntu" },
+  debian: { name: "debian" },
+  arch: { name: "arch" },
+  mint: { name: "linux-mint" },
+  raspbian: { name: "raspberry-pi" },
+  fedora: { name: "fedora" },
+  centos: { name: "centos" },
+  macos: { name: "apple" },
+  windows: { name: "microsoft-windows" },
+  linux: { name: "linux" },
+};
+
+type OSIconsProps = Omit<ComponentPropsWithoutRef<typeof Icons>, "name"> & {
+  name?: string | null;
+  fallback?: string;
+};
+
+const OSIcons = ({ name, fallback, ...props }: OSIconsProps) => {
+  const icon = icons[name || ""];
+
+  if (!icon) {
+    return fallback ? <Icons name={fallback as never} {...props} /> : null;
+  }
+
+  return (
+    <Icons
+      name={icon.name as never}
+      color={icon.color || "$color"}
+      {...props}
+    />
+  );
+};
+
+export default OSIcons;