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 useSortedClasses rule to Biome configuration

Browse Source
This commit is contained in:
Aman Varshney
2025-04-04 12:40:46 +05:30
parent 73fc9880cd
commit b3c746cd49
23 changed files with 293 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,8 +4,8 @@ import StackArchitect from "./StackArchitech";
export default function CustomizableSection() {
return (
<section className="w-full max-w-7xl mx-auto space-y-16 mt-20 relative z-10 px-4 sm:px-6">
<div className="text-center space-y-8 relative">
<section className="relative z-10 mx-auto mt-20 w-full max-w-7xl space-y-16 px-4 sm:px-6">
<div className="relative space-y-8 text-center">
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -13,15 +13,15 @@ export default function CustomizableSection() {
transition={{ duration: 0.5 }}
className="relative"
>
<h2 className="text-3xl sm:text-4xl font-bold">
<span className="text-blue-500 dark:text-blue-400 font-mono mr-1">
<h2 className="font-bold text-3xl sm:text-4xl">
<span className="mr-1 font-mono text-blue-500 dark:text-blue-400">
{">"}
</span>
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-indigo-600 dark:from-blue-400 dark:to-indigo-500">
<span className="bg-gradient-to-r from-blue-500 to-indigo-600 bg-clip-text text-transparent dark:from-blue-400 dark:to-indigo-500">
Your Stack, Your Choice
</span>
</h2>
<div className="absolute -inset-x-1/4 -inset-y-1/2 bg-gradient-to-r from-blue-300/0 via-blue-300/10 to-blue-300/0 dark:from-blue-800/0 dark:via-blue-800/10 dark:to-blue-800/0 blur-3xl -z-10" />
<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
@@ -29,33 +29,33 @@ export default function CustomizableSection() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: 0.2 }}
className="space-y-6 max-w-3xl mx-auto"
className="mx-auto max-w-3xl space-y-6"
>
<p className="text-lg sm:text-xl text-gray-700 dark:text-gray-300 leading-relaxed font-mono">
<p className="font-mono text-gray-700 text-lg leading-relaxed sm:text-xl dark:text-gray-300">
Configure your ideal TypeScript environment with all the options you
need
</p>
<div className="flex flex-wrap justify-center gap-2 sm:gap-3 text-xs sm:text-sm text-gray-700 dark:text-gray-300">
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<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">
<Terminal className="h-3.5 w-3.5">
<title>Runtime Options</title>
</Terminal>
<span>--runtime</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<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">
<Code className="h-3.5 w-3.5">
<title>Framework Options</title>
</Code>
<span>--framework</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<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">
<TerminalSquare className="h-3.5 w-3.5">
<title>Database Options</title>
</TerminalSquare>
<span>--database</span>
</div>
<div className="px-3 py-1.5 bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-md flex items-center gap-1.5 transition-colors shadow-sm">
<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">
<Sliders className="h-3.5 w-3.5">
<title>Addon Options</title>
</Sliders>
@@ -69,7 +69,7 @@ export default function CustomizableSection() {
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 sm:gap-3 pt-2"
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>
@@ -87,7 +87,7 @@ export default function CustomizableSection() {
transition={{ duration: 0.6, delay: 0.2 }}
className="relative"
>
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-transparent to-indigo-500/5 blur-3xl -z-10" />
<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>
@@ -113,7 +113,7 @@ function Badge({
return (
<span
className={`px-2.5 py-1 rounded-full text-xs font-medium border ${
className={`rounded-full border px-2.5 py-1 font-medium text-xs ${
colorMap[color as keyof typeof colorMap]
} shadow-sm`}
>