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

42
apps/web/src/app/(home)/_components/TechShowcase.tsx
View File

@@ -132,11 +132,11 @@ export default function TechShowcase() {
: null;
return (
<section className="w-full max-w-6xl mx-auto py-16 px-4">
<section className="mx-auto w-full max-w-6xl px-4 py-16">
<div className="mb-8 flex flex-wrap justify-center gap-3">
<button
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
className={`rounded-md px-4 py-2 font-mono text-sm transition-colors ${
activeCategory === null
? "bg-blue-500 text-white dark:text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
@@ -150,7 +150,7 @@ export default function TechShowcase() {
<button
key={category}
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
className={`rounded-md px-4 py-2 font-mono text-sm transition-colors ${
activeCategory === category
? "bg-blue-500 text-white dark:text-white"
: "bg-gray-200 text-gray-800 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
@@ -163,22 +163,22 @@ export default function TechShowcase() {
</div>
{activeCategory && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{filteredTech.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
className="rounded-lg border border-gray-200 bg-white/50 p-4 backdrop-blur-sm transition-colors hover:border-blue-500/30 dark:border-gray-800 dark:bg-gray-900/50"
>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
<h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-white">
{tech.name}
</h3>
<p className="text-gray-600 dark:text-gray-400 text-sm">
<p className="text-gray-600 text-sm dark:text-gray-400">
{tech.description}
</p>
<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
<div className="mt-3 font-mono text-gray-500 text-xs dark:text-gray-500">
{tech.category === "tooling" || tech.category === "database" ? (
<span>
{tech.name === "Drizzle ORM" ||
@@ -203,40 +203,40 @@ export default function TechShowcase() {
<div className="space-y-12">
{groupedTech.map((group) => (
<div key={group.category} className="relative">
<div className="flex items-center mb-4">
<div className="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-500 dark:text-blue-300 mr-3">
<div className="mb-4 flex items-center">
<div className="mr-3 flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 text-blue-500 dark:bg-blue-500/20 dark:text-blue-300">
{categoryIcons[group.category as keyof typeof categoryIcons]}
</div>
<h2 className="text-xl font-semibold text-blue-500 dark:text-blue-300 font-mono">
<h2 className="font-mono font-semibold text-blue-500 text-xl dark:text-blue-300">
{group.category}/
</h2>
</div>
<div className="border-l-2 border-gray-200 dark:border-gray-800 pl-6 ml-3 pb-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="ml-3 border-gray-200 border-l-2 pb-4 pl-6 dark:border-gray-800">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
{group.items.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="bg-white/30 dark:bg-gray-900/30 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md p-4 hover:bg-gray-100/50 dark:hover:bg-gray-800/30 transition-colors"
className="rounded-md border border-gray-200 bg-white/30 p-4 backdrop-blur-sm transition-colors hover:bg-gray-100/50 dark:border-gray-800 dark:bg-gray-900/30 dark:hover:bg-gray-800/30"
>
<div className="flex justify-between items-start">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
<div className="flex items-start justify-between">
<h3 className="font-semibold text-gray-900 text-lg dark:text-white">
{tech.name}
</h3>
<div className="bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-600 dark:text-gray-400">
<div className="rounded bg-gray-100 px-2 py-1 font-mono text-gray-600 text-xs dark:bg-gray-800 dark:text-gray-400">
{group.category === "tooling" ||
tech.category === "database"
? "optional"
: "core"}
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
<p className="mt-2 text-gray-600 text-sm dark:text-gray-400">
{tech.description}
</p>
<div className="mt-3 pt-2 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
<span className="text-xs text-gray-500 dark:text-gray-500 font-mono">
<div className="mt-3 flex items-center justify-between border-gray-200 border-t pt-2 dark:border-gray-800">
<span className="font-mono text-gray-500 text-xs dark:text-gray-500">
{group.category === "tooling" ||
tech.category === "database"
? tech.name === "Drizzle ORM" ||
@@ -261,7 +261,7 @@ export default function TechShowcase() {
)}
<div className="mt-10 text-center">
<div className="inline-block bg-white/50 dark:bg-gray-900/50 backdrop-blur-sm border border-gray-200 dark:border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-600 dark:text-gray-400">
<div className="inline-block rounded-md border border-gray-200 bg-white/50 px-5 py-3 font-mono text-gray-600 text-sm backdrop-blur-sm dark:border-gray-800 dark:bg-gray-900/50 dark:text-gray-400">
<span className="text-green-500 dark:text-green-400">$</span> npx
create-better-t-stack
<span className="text-blue-500 dark:text-blue-400">