fix icons

apps/cli/src/utils/render-title.ts

@@ -38,7 +38,7 @@ export const renderTitle = () => {
 	if (terminalWidth < titleWidth) {
 		const simplifiedTitle = `
     ╔══════════════════╗
-    ║  Better T-Stack  ║
+    ║  Better T Stack  ║
     ╚══════════════════╝
     `;
 		console.log(

apps/web/src/app/(home)/_components/stack-builder.tsx

@@ -966,7 +966,7 @@ const StackBuilder = () => {
 
 	const shareToTwitter = () => {
 		const text = encodeURIComponent(
-			"Check out this cool tech stack I configured with Create Better T-Stack!\n\n",
+			"Check out this cool tech stack I configured with Create Better T Stack!\n\n",
 		);
 		if (typeof window !== "undefined") {
 			const url = encodeURIComponent(window.location.href);
@@ -1355,15 +1355,17 @@ const StackBuilder = () => {
 									getBadgeColors(category),
 								)}
 							>
-								<TechIcon
+								{tech.icon !== "" && (
-									icon={tech.icon}
+									<TechIcon
-									name={tech.name}
+										icon={tech.icon}
-									className={
+										name={tech.name}
-										tech.icon.startsWith("/icon/")
+										className={
-											? "h-3 w-3"
+											tech.icon.startsWith("/icon/")
-											: "h-3 w-3 text-xs"
+												? "h-3 w-3"
-									}
+												: "h-3 w-3 text-xs"
-								/>
+										}
+									/>
+								)}
 								{tech.name}
 							</span>,
 						);
@@ -1390,7 +1392,9 @@ const StackBuilder = () => {
 							getBadgeColors(category),
 						)}
 					>
-						<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
+						{tech.icon !== "" && (
+							<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
+						)}
 						{tech.name}
 					</span>,
 				);
@@ -1846,11 +1850,13 @@ const StackBuilder = () => {
 																	<div className="flex-grow">
 																		<div className="flex items-center justify-between">
 																			<div className="flex items-center">
-																				<TechIcon
+																				{tech.icon !== "" && (
-																					icon={tech.icon}
+																					<TechIcon
-																					name={tech.name}
+																						icon={tech.icon}
-																					className="mr-1.5 h-4 w-4"
+																						name={tech.name}
-																				/>
+																						className="mr-1.5 h-4 w-4"
+																					/>
+																				)}
 																				<span
 																					className={cn(
 																						"font-medium text-sm",

apps/web/src/app/(home)/page.tsx

@@ -45,9 +45,17 @@ export default function HomePage() {
 		},
 	};
 
-	const frontendOptions = TECH_OPTIONS.webFrontend.filter(
+	const webFrontendOptions = TECH_OPTIONS.webFrontend.filter(
 		(option) => option.id !== "none",
 	);
+	const nativeFrontendOptions = TECH_OPTIONS.nativeFrontend.filter(
+		(option) => option.id !== "none",
+	);
+	const combinedFrontendOptions = [
+		...webFrontendOptions,
+		...nativeFrontendOptions,
+	];
+
 	const backendOptions = TECH_OPTIONS.backend.filter(
 		(option) => option.id !== "none",
 	);
@@ -128,7 +136,10 @@ export default function HomePage() {
 						<motion.div className="mx-auto w-full" variants={itemVariants}>
 							<CodeContainer />
 							<div className="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-3">
-								<FeatureCard title="Frontend" options={frontendOptions} />
+								<FeatureCard
+									title="Frontend"
+									options={combinedFrontendOptions}
+								/>
 								<FeatureCard title="Backend" options={backendOptions} />
 								<FeatureCard title="Runtime" options={runtimeOptions} />
 								<FeatureCard title="API Layer" options={apiLayerOptions} />

apps/web/src/lib/constant.ts

@@ -19,7 +19,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No API",
 			description: "No API layer (API routes disabled)",
-			icon: "🚫",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 		},
 	],
@@ -85,7 +85,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No Web Frontend",
 			description: "No web-based frontend",
-			icon: "⚙️",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 			default: false,
 		},
@@ -111,7 +111,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No Native Frontend",
 			description: "No native mobile frontend",
-			icon: "📱",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 			default: false,
 		},
@@ -174,7 +174,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No Backend",
 			description: "Skip backend integration (frontend only)",
-			icon: "⚙️",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 		},
 	],
@@ -212,7 +212,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No Database",
 			description: "Skip database integration",
-			icon: "🚫",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 		},
 	],
@@ -243,7 +243,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "No ORM",
 			description: "Skip ORM integration",
-			icon: "🚫",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 		},
 	],
@@ -287,7 +287,7 @@ export const TECH_OPTIONS = {
 			id: "none",
 			name: "Basic Setup",
 			description: "No cloud DB integration",
-			icon: "💻",
+			icon: "",
 			color: "from-gray-400 to-gray-600",
 			default: true,
 		},
@@ -305,7 +305,7 @@ export const TECH_OPTIONS = {
 			id: "false",
 			name: "No Auth",
 			description: "Skip authentication",
-			icon: "🔓",
+			icon: "",
 			color: "from-red-400 to-red-600",
 		},
 	],
@@ -414,7 +414,7 @@ export const TECH_OPTIONS = {
 			id: "false",
 			name: "No Git",
 			description: "Skip Git initialization",
-			icon: "🚫",
+			icon: "",
 			color: "from-red-400 to-red-600",
 		},
 	],
@@ -423,7 +423,7 @@ export const TECH_OPTIONS = {
 			id: "true",
 			name: "Install Dependencies",
 			description: "Install packages automatically",
-			icon: "📥",
+			icon: "",
 			color: "from-green-400 to-green-600",
 			default: true,
 		},
@@ -431,7 +431,7 @@ export const TECH_OPTIONS = {
 			id: "false",
 			name: "Skip Install",
 			description: "Skip dependency installation",
-			icon: "⏭️",
+			icon: "",
 			color: "from-yellow-400 to-yellow-600",
 		},
 	],