franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

update theme

Browse Source
This commit is contained in:
Aman Varshney
2025-04-21 03:31:35 +05:30
parent b0e19a54c5
commit 0253195969
24 changed files with 928 additions and 929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
apps/web/src/app/(home)/_components/CustomizableSection.tsx
View File

@@ -1,3 +1,4 @@
import { cn } from "@/lib/utils";
import { Code, Sliders, Terminal, TerminalSquare } from "lucide-react";
import { motion } from "motion/react";
import StackArchitect from "./StackArchitech";
@@ -14,11 +15,10 @@ export default function CustomizableSection() {
className="relative"
>
<h2 className="font-bold font-mono text-2xl tracking-tight sm:text-3xl md:text-4xl lg:text-5xl">
<span className="border-blue-500 border-b-2 pb-1 text-gray-900 dark:text-blue-100">
<span className="border-primary border-b-2 pb-1 text-foreground dark:text-primary">
Your Stack, Your Choice
</span>
</h2>
<div className="-inset-x-1/4 -inset-y-1/2 -z-10 absolute bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 blur-3xl dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0" />
</motion.div>
<motion.div
@@ -28,31 +28,31 @@ export default function CustomizableSection() {
transition={{ duration: 0.5, delay: 0.2 }}
className="mx-auto max-w-3xl space-y-6"
>
<p className="font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300">
<p className="font-mono text-lg text-muted-foreground leading-relaxed sm:text-xl">
Configure your ideal TypeScript environment with all the options you
need
</p>
<div className="flex flex-wrap justify-center gap-2 text-gray-700 text-xs sm:gap-3 sm:text-sm dark:text-gray-300">
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<div className="flex flex-wrap justify-center gap-2 text-muted-foreground text-xs sm:gap-3 sm:text-sm">
<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted px-3 py-1.5 shadow-sm transition-colors">
<Terminal className="h-3.5 w-3.5">
<title>Runtime Options</title>
</Terminal>
<span>--runtime</span>
</div>
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted px-3 py-1.5 shadow-sm transition-colors">
<Code className="h-3.5 w-3.5">
<title>Framework Options</title>
</Code>
<span>--framework</span>
</div>
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted px-3 py-1.5 shadow-sm transition-colors">
<TerminalSquare className="h-3.5 w-3.5">
<title>Database Options</title>
</TerminalSquare>
<span>--database</span>
</div>
<div className="flex items-center gap-1.5 rounded-md border border-gray-200 bg-gray-100 px-3 py-1.5 shadow-sm transition-colors dark:border-gray-800 dark:bg-gray-900/50">
<div className="flex items-center gap-1.5 rounded-md border border-border bg-muted px-3 py-1.5 shadow-sm transition-colors">
<Sliders className="h-3.5 w-3.5">
<title>Addon Options</title>
</Sliders>
@@ -68,12 +68,12 @@ export default function CustomizableSection() {
transition={{ duration: 0.4, delay: 0.3 }}
className="flex flex-wrap justify-center gap-2 pt-2 sm:gap-3"
>
<Badge color="amber">Bun or Node</Badge>
<Badge color="blue">Hono or Elysia</Badge>
<Badge color="indigo">SQLite or PostgreSQL</Badge>
<Badge color="cyan">Drizzle or Prisma</Badge>
<Badge color="green">Authentication</Badge>
<Badge color="violet">Optional Addons</Badge>
<Badge color="chart-5">Bun or Node</Badge>
<Badge color="chart-2">Hono or Elysia</Badge>
<Badge color="chart-3">SQLite or PostgreSQL</Badge>
<Badge color="chart-2">Drizzle or Prisma</Badge>
<Badge color="chart-4">Authentication</Badge>
<Badge color="chart-1">Optional Addons</Badge>
</motion.div>
</div>
@@ -84,7 +84,6 @@ export default function CustomizableSection() {
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
>
<div className="-z-10 absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl" />
<StackArchitect />
</motion.div>
</section>
@@ -95,26 +94,10 @@ function Badge({
children,
color,
}: { children: React.ReactNode; color: string }) {
const colorMap = {
amber:
"bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border-amber-200 dark:border-amber-800/30",
blue: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border-blue-200 dark:border-blue-800/30",
indigo:
"bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300 border-indigo-200 dark:border-indigo-800/30",
cyan: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-300 border-cyan-200 dark:border-cyan-800/30",
green:
"bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border-green-200 dark:border-green-800/30",
violet:
"bg-violet-100 text-violet-800 dark:bg-violet-900/30 dark:text-violet-300 border-violet-200 dark:border-violet-800/30",
};
const baseClasses =
"rounded-full border px-2.5 py-1 font-medium text-xs shadow-sm";
return (
<span
className={`rounded-full border px-2.5 py-1 font-medium text-xs ${
colorMap[color as keyof typeof colorMap]
} shadow-sm`}
>
{children}
</span>
);
const colorClasses = `bg-[--color-${color}]/10 text-[--color-${color}] border-[--color-${color}]/30`;
return <span className={cn(baseClasses, colorClasses)}>{children}</span>;
}