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

add catpucchin theme and nuqs for url state

Browse Source
This commit is contained in:
Aman Varshney
2025-04-21 06:43:10 +05:30
parent 0253195969
commit 9f0798d8b6
14 changed files with 347 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,3 @@
import { cn } from "@/lib/utils";
import { Code, Sliders, Terminal, TerminalSquare } from "lucide-react";
import { motion } from "motion/react";
import StackArchitect from "./StackArchitech";
@@ -32,48 +30,6 @@ export default function CustomizableSection() {
Configure your ideal TypeScript environment with all the options you
need
</p>
<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-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-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-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>
<span>--addons</span>
</div>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.4, delay: 0.3 }}
className="flex flex-wrap justify-center gap-2 pt-2 sm:gap-3"
>
<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>
@@ -82,22 +38,10 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
className="relative border"
>
<StackArchitect />
</motion.div>
</section>
);
}
function Badge({
children,
color,
}: { children: React.ReactNode; color: string }) {
const baseClasses =
"rounded-full border px-2.5 py-1 font-medium text-xs shadow-sm";
const colorClasses = `bg-[--color-${color}]/10 text-[--color-${color}] border-[--color-${color}]/30`;
return <span className={cn(baseClasses, colorClasses)}>{children}</span>;
}