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

light mode

Browse Source
This commit is contained in:
Aman Varshney
2025-03-24 03:00:24 +05:30
parent 4b7dc843ca
commit 5255c21891
19 changed files with 346 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,8 +138,8 @@ export default function TechShowcase() {
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === null
? "bg-blue-500 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
? "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"
}`}
onClick={() => setActiveCategory(null)}
>
@@ -152,8 +152,8 @@ export default function TechShowcase() {
type="button"
className={`px-4 py-2 rounded-md font-mono text-sm transition-colors ${
activeCategory === category
? "bg-blue-500 text-white"
: "bg-gray-800 text-gray-300 hover:bg-gray-700"
? "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"
}`}
onClick={() => setActiveCategory(category)}
>
@@ -170,13 +170,15 @@ export default function TechShowcase() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-lg p-4 hover:border-blue-500/30 transition-colors"
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"
>
<h3 className="text-lg font-semibold text-white mb-2">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{tech.name}
</h3>
<p className="text-gray-400 text-sm">{tech.description}</p>
<div className="mt-3 text-xs text-gray-500 font-mono">
<p className="text-gray-600 dark:text-gray-400 text-sm">
{tech.description}
</p>
<div className="mt-3 text-xs text-gray-500 dark:text-gray-500 font-mono">
{tech.category === "tooling" || tech.category === "database" ? (
<span>
{tech.name === "Drizzle ORM" ||
@@ -202,39 +204,39 @@ export default function TechShowcase() {
{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-500/20 flex items-center justify-center text-blue-300 mr-3">
<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">
{categoryIcons[group.category as keyof typeof categoryIcons]}
</div>
<h2 className="text-xl font-semibold text-blue-300 font-mono">
<h2 className="text-xl font-semibold text-blue-500 dark:text-blue-300 font-mono">
{group.category}/
</h2>
</div>
<div className="border-l-2 border-gray-800 pl-6 ml-3 pb-4">
<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">
{group.items.map((tech) => (
<motion.div
key={tech.name}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="bg-gray-900/30 backdrop-blur-sm border border-gray-800 rounded-md p-4 hover:bg-gray-800/30 transition-colors"
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"
>
<div className="flex justify-between items-start">
<h3 className="text-lg font-semibold text-white">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
{tech.name}
</h3>
<div className="bg-gray-800 px-2 py-1 rounded text-xs font-mono text-gray-400">
<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">
{group.category === "tooling" ||
tech.category === "database"
? "optional"
: "core"}
</div>
</div>
<p className="text-gray-400 text-sm mt-2">
<p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
{tech.description}
</p>
<div className="mt-3 pt-2 border-t border-gray-800 flex items-center justify-between">
<span className="text-xs text-gray-500 font-mono">
<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">
{group.category === "tooling" ||
tech.category === "database"
? tech.name === "Drizzle ORM" ||
@@ -259,9 +261,13 @@ export default function TechShowcase() {
)}
<div className="mt-10 text-center">
<div className="inline-block bg-gray-900/50 backdrop-blur-sm border border-gray-800 rounded-md px-5 py-3 font-mono text-sm text-gray-400">
<span className="text-green-400">$</span> npx create-better-t-stack
<span className="text-blue-400"> —your-options</span>
<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">
<span className="text-green-500 dark:text-green-400">$</span> npx
create-better-t-stack
<span className="text-blue-500 dark:text-blue-400">
{" "}
—your-options
</span>
</div>
</div>
</section>