add icons in stack builder

This commit is contained in:
Aman Varshney
2025-04-20 10:45:18 +05:30
parent 1e4bd56501
commit f56a2865fb
29 changed files with 202 additions and 71 deletions

View File

@@ -4,7 +4,7 @@ export const TECH_OPTIONS = {
id: "trpc",
name: "tRPC",
description: "End-to-end typesafe APIs",
icon: "🔗",
icon: "/icon/trpc.svg",
color: "from-blue-500 to-blue-700",
default: true,
},
@@ -21,7 +21,7 @@ export const TECH_OPTIONS = {
id: "tanstack-router",
name: "TanStack Router",
description: "Modern type-safe router for React",
icon: "🌐",
icon: "/icon/tanstack.svg",
color: "from-blue-400 to-blue-600",
default: true,
},
@@ -29,7 +29,7 @@ export const TECH_OPTIONS = {
id: "react-router",
name: "React Router",
description: "Declarative routing for React",
icon: "🧭",
icon: "/icon/react-router.svg",
color: "from-cyan-400 to-cyan-600",
default: false,
},
@@ -37,7 +37,7 @@ export const TECH_OPTIONS = {
id: "tanstack-start",
name: "TanStack Start",
description: "Quick starter template from TanStack",
icon: "🚀",
icon: "/icon/tanstack.svg",
color: "from-purple-400 to-purple-600",
default: false,
},
@@ -45,7 +45,7 @@ export const TECH_OPTIONS = {
id: "next",
name: "Next.js",
description: "React framework with hybrid rendering",
icon: "",
icon: "/icon/nextjs.svg",
color: "from-gray-700 to-black",
default: false,
},
@@ -53,7 +53,7 @@ export const TECH_OPTIONS = {
id: "native",
name: "React Native",
description: "Expo with NativeWind",
icon: "📱",
icon: "/icon/expo.svg",
color: "from-purple-400 to-purple-600",
default: false,
},
@@ -61,7 +61,7 @@ export const TECH_OPTIONS = {
id: "none",
name: "No Frontend",
description: "API-only backend",
icon: "⚙️",
icon: "⚙️", // Keep emoji for missing icon
color: "from-gray-400 to-gray-600",
default: false,
},
@@ -71,7 +71,7 @@ export const TECH_OPTIONS = {
id: "bun",
name: "Bun",
description: "Fast JavaScript runtime & toolkit",
icon: "🥟",
icon: "/icon/bun.svg",
color: "from-amber-400 to-amber-600",
default: true,
},
@@ -79,7 +79,7 @@ export const TECH_OPTIONS = {
id: "node",
name: "Node.js",
description: "JavaScript runtime environment",
icon: "🟩",
icon: "/icon/node.svg",
color: "from-green-400 to-green-600",
},
],
@@ -88,7 +88,7 @@ export const TECH_OPTIONS = {
id: "hono",
name: "Hono",
description: "Ultrafast web framework",
icon: "",
icon: "/icon/hono.svg",
color: "from-blue-500 to-blue-700",
default: true,
},
@@ -96,21 +96,21 @@ export const TECH_OPTIONS = {
id: "next",
name: "Next.js",
description: "App Router and API Routes",
icon: "",
icon: "/icon/nextjs.svg",
color: "from-gray-700 to-black",
},
{
id: "elysia",
name: "Elysia",
description: "TypeScript web framework",
icon: "🦊",
icon: "/icon/elysia.svg",
color: "from-purple-500 to-purple-700",
},
{
id: "express",
name: "Express",
description: "Popular Node.js framework",
icon: "🚂",
icon: "/icon/express.svg",
color: "from-gray-500 to-gray-700",
},
],
@@ -119,7 +119,7 @@ export const TECH_OPTIONS = {
id: "sqlite",
name: "SQLite",
description: "File-based SQL database",
icon: "🗃️",
icon: "/icon/sqlite.svg",
color: "from-blue-400 to-cyan-500",
default: true,
},
@@ -127,21 +127,21 @@ export const TECH_OPTIONS = {
id: "postgres",
name: "PostgreSQL",
description: "Advanced SQL database",
icon: "🐘",
icon: "/icon/postgres.svg",
color: "from-indigo-400 to-indigo-600",
},
{
id: "mysql",
name: "MySQL",
description: "Popular relational database",
icon: "🐬",
icon: "/icon/mysql.svg",
color: "from-blue-500 to-blue-700",
},
{
id: "mongodb",
name: "MongoDB",
description: "NoSQL document database",
icon: "🍃",
icon: "/icon/mongodb.svg",
color: "from-green-400 to-green-600",
},
{
@@ -157,7 +157,7 @@ export const TECH_OPTIONS = {
id: "drizzle",
name: "Drizzle",
description: "TypeScript ORM",
icon: "💧",
icon: "/icon/drizzle.svg",
color: "from-cyan-400 to-cyan-600",
default: true,
},
@@ -165,37 +165,44 @@ export const TECH_OPTIONS = {
id: "prisma",
name: "Prisma",
description: "Next-gen ORM",
icon: "",
icon: "/icon/prisma.svg",
color: "from-purple-400 to-purple-600",
},
{
id: "none",
name: "No ORM",
description: "Skip ORM integration",
icon: "🚫",
color: "from-gray-400 to-gray-600",
},
],
dbSetup: [
{
id: "turso",
name: "Turso",
description: "SQLite cloud database powered by libSQL",
icon: "☁️",
icon: "/icon/sqlite.svg",
color: "from-pink-400 to-pink-600",
},
{
id: "neon",
name: "Neon Postgres",
description: "Serverless PostgreSQL with Neon",
icon: "",
icon: "/icon/neon.svg",
color: "from-blue-400 to-blue-600",
},
{
id: "prisma-postgres",
name: "Prisma PostgreSQL",
description: "Set up PostgreSQL with Prisma",
icon: "🐘",
icon: "/icon/postgres.svg",
color: "from-indigo-400 to-indigo-600",
},
{
id: "mongodb-atlas",
name: "MongoDB Atlas",
description: "Cloud MongoDB setup with Atlas",
icon: "🌩️",
icon: "/icon/mongodb.svg",
color: "from-green-400 to-green-600",
},
{
@@ -212,7 +219,7 @@ export const TECH_OPTIONS = {
id: "true",
name: "Better Auth",
description: "Simple authentication",
icon: "🔐",
icon: "/icon/better-auth.svg",
color: "from-green-400 to-green-600",
default: true,
},
@@ -229,21 +236,21 @@ export const TECH_OPTIONS = {
id: "npm",
name: "npm",
description: "Default package manager",
icon: "📦",
icon: "/icon/npm.svg",
color: "from-red-500 to-red-700",
},
{
id: "pnpm",
name: "pnpm",
description: "Fast, disk space efficient",
icon: "🚀",
icon: "/icon/pnpm.svg",
color: "from-orange-500 to-orange-700",
},
{
id: "bun",
name: "bun",
description: "All-in-one toolkit",
icon: "🥟",
icon: "/icon/bun.svg",
color: "from-amber-500 to-amber-700",
default: true,
},
@@ -261,7 +268,7 @@ export const TECH_OPTIONS = {
id: "tauri",
name: "Tauri",
description: "Desktop app support",
icon: "🖥️",
icon: "/icon/tauri.svg",
color: "from-amber-500 to-amber-700",
default: false,
},
@@ -269,7 +276,7 @@ export const TECH_OPTIONS = {
id: "starlight",
name: "Starlight",
description: "Documentation site with Astro",
icon: "📚",
icon: "/icon/astro.svg",
color: "from-teal-500 to-teal-700",
default: false,
},
@@ -277,7 +284,7 @@ export const TECH_OPTIONS = {
id: "biome",
name: "Biome",
description: "Linting & formatting",
icon: "🌿",
icon: "/icon/biome.svg",
color: "from-green-500 to-green-700",
default: false,
},
@@ -293,7 +300,7 @@ export const TECH_OPTIONS = {
id: "turborepo",
name: "Turborepo",
description: "Monorepo build system",
icon: "🌀",
icon: "/icon/turborepo.svg",
color: "from-gray-400 to-gray-700",
default: false,
},
@@ -321,7 +328,7 @@ export const TECH_OPTIONS = {
id: "true",
name: "Git",
description: "Initialize Git repository",
icon: "📝",
icon: "/icon/git.svg",
color: "from-gray-500 to-gray-700",
default: true,
},