157 lines
3.6 KiB
TypeScript
157 lines
3.6 KiB
TypeScript
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" },
|
|
neon: {
|
|
label: "Neon",
|
|
icon: {
|
|
light: "https://svgl.app/library/neon.svg",
|
|
dark: "https://svgl.app/library/neon.svg",
|
|
},
|
|
},
|
|
};
|
|
|
|
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>
|
|
);
|
|
}
|