project page

2026-03-10 20:20:47 +01:00
parent fc4fab9478
commit e77eda0220
3 changed files with 239 additions and 7 deletions
--- a/src/components/StackBadge.tsx
+++ b/src/components/StackBadge.tsx
@@ -0,0 +1,149 @@
+import { Badge } from "~/components/ui/badge";
+
+interface SvglIcon {
+  light: string;
+  dark: string;
+}
+
+const STACK_META: Record<string, { label: string; icon?: SvglIcon }> = {
+  drizzle: {
+    label: "Drizzle ORM",
+    icon: {
+      light: "https://svgl.app/library/drizzle-orm_light.svg",
+      dark: "https://svgl.app/library/drizzle-orm_dark.svg",
+    },
+  },
+  postgres: {
+    label: "PostgreSQL",
+    icon: {
+      light: "https://svgl.app/library/postgresql.svg",
+      dark: "https://svgl.app/library/postgresql.svg",
+    },
+  },
+  nextjs: {
+    label: "Next.js",
+    icon: {
+      light: "https://svgl.app/library/nextjs_icon_dark.svg",
+      dark: "https://svgl.app/library/nextjs_icon_dark.svg",
+    },
+  },
+  react: {
+    label: "React",
+    icon: {
+      light: "https://svgl.app/library/react_light.svg",
+      dark: "https://svgl.app/library/react_dark.svg",
+    },
+  },
+  servercomponents: { label: "Server Components" },
+  php: {
+    label: "PHP",
+    icon: {
+      light: "https://svgl.app/library/php.svg",
+      dark: "https://svgl.app/library/php_dark.svg",
+    },
+  },
+  laravel: {
+    label: "Laravel",
+    icon: {
+      light: "https://svgl.app/library/laravel.svg",
+      dark: "https://svgl.app/library/laravel.svg",
+    },
+  },
+  reactnative: {
+    label: "React Native",
+    icon: {
+      light: "https://svgl.app/library/react_light.svg",
+      dark: "https://svgl.app/library/react_dark.svg",
+    },
+  },
+  "react-native": {
+    label: "React Native",
+    icon: {
+      light: "https://svgl.app/library/react_light.svg",
+      dark: "https://svgl.app/library/react_dark.svg",
+    },
+  },
+  expo: {
+    label: "Expo",
+    icon: {
+      light: "https://svgl.app/library/expo.svg",
+      dark: "https://svgl.app/library/expo.svg",
+    },
+  },
+  mysql: {
+    label: "MySQL",
+    icon: {
+      light: "https://svgl.app/library/mysql-icon-light.svg",
+      dark: "https://svgl.app/library/mysql-icon-dark.svg",
+    },
+  },
+  nginx: {
+    label: "Nginx",
+    icon: {
+      light: "https://svgl.app/library/nginx.svg",
+      dark: "https://svgl.app/library/nginx.svg",
+    },
+  },
+  protobuf: { label: "Protobuf" },
+  grpc: { label: "gRPC" },
+  java: {
+    label: "Java",
+    icon: {
+      light: "https://svgl.app/library/java.svg",
+      dark: "https://svgl.app/library/java.svg",
+    },
+  },
+  graalvm: { label: "GraalVM" },
+  spring: {
+    label: "Spring",
+    icon: {
+      light: "https://svgl.app/library/spring.svg",
+      dark: "https://svgl.app/library/spring.svg",
+    },
+  },
+  aws: {
+    label: "AWS",
+    icon: {
+      light: "https://svgl.app/library/aws_light.svg",
+      dark: "https://svgl.app/library/aws_dark.svg",
+    },
+  },
+  s3: { label: "Amazon S3" },
+  linux: {
+    label: "Linux",
+    icon: {
+      light: "https://svgl.app/library/linux.svg",
+      dark: "https://svgl.app/library/linux.svg",
+    },
+  },
+  debian: { label: "Debian" },
+  htmx: { label: "HTMX" },
+};
+
+export function StackBadge({ item }: { item: string }) {
+  const meta = STACK_META[item] ?? { label: item };
+
+  return (
+    <Badge variant="outline">
+      {meta.icon && (
+        <>
+          <img
+            src={meta.icon.light}
+            alt=""
+            width={12}
+            height={12}
+            className="dark:hidden shrink-0"
+          />
+          <img
+            src={meta.icon.dark}
+            alt=""
+            width={12}
+            height={12}
+            className="hidden dark:block shrink-0"
+          />
+        </>
+      )}
+      {meta.label}
+    </Badge>
+  );
+}