From 57dbd7dd39155e532d492965f395272a8d7d8faf Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Wed, 28 May 2025 23:01:32 +0530 Subject: [PATCH] update ui --- .../(home)/_components/sponsors-section.tsx | 3 - .../app/(home)/_components/stack-builder.tsx | 25 +++ .../app/(home)/_components/testimonials.tsx | 4 +- apps/web/src/app/(home)/page.tsx | 2 +- .../showcase/_components/ShowcaseItem.tsx | 142 ++++++++++++++++++ apps/web/src/app/(home)/showcase/page.tsx | 142 ++++++++++++++++++ .../app/showcase/_components/ShowcaseItem.tsx | 90 ----------- apps/web/src/app/showcase/page.tsx | 90 ----------- bun.lock | 32 ++-- 9 files changed, 328 insertions(+), 202 deletions(-) create mode 100644 apps/web/src/app/(home)/showcase/_components/ShowcaseItem.tsx create mode 100644 apps/web/src/app/(home)/showcase/page.tsx delete mode 100644 apps/web/src/app/showcase/_components/ShowcaseItem.tsx delete mode 100644 apps/web/src/app/showcase/page.tsx diff --git a/apps/web/src/app/(home)/_components/sponsors-section.tsx b/apps/web/src/app/(home)/_components/sponsors-section.tsx index d2a969a..1ebb07b 100644 --- a/apps/web/src/app/(home)/_components/sponsors-section.tsx +++ b/apps/web/src/app/(home)/_components/sponsors-section.tsx @@ -117,9 +117,6 @@ export default function SponsorsSection() {
▶ - - [SPONSOR_{String(index + 1).padStart(3, "0")}] -
{entry.isOneTime ? "ONE-TIME" : "MONTHLY"} • diff --git a/apps/web/src/app/(home)/_components/stack-builder.tsx b/apps/web/src/app/(home)/_components/stack-builder.tsx index faba181..4bcdb86 100644 --- a/apps/web/src/app/(home)/_components/stack-builder.tsx +++ b/apps/web/src/app/(home)/_components/stack-builder.tsx @@ -319,6 +319,20 @@ const analyzeStackCompatibility = (stack: StackState): CompatibilityResult => { } if (nextStack.api === "none" && (isConvex || isBackendNone)) { } else if (nextStack.api === "none" && !(isConvex || isBackendNone)) { + if (nextStack.examples.length > 0) { + notes.api.notes.push("API 'None' selected: Examples will be removed."); + notes.examples.notes.push( + "Examples require an API. They will be removed when API is 'None'.", + ); + notes.api.hasIssue = true; + notes.examples.hasIssue = true; + nextStack.examples = []; + changed = true; + changes.push({ + category: "api", + message: "Examples removed (API 'None' does not support examples)", + }); + } } if (nextStack.database === "none") { @@ -1283,6 +1297,17 @@ const StackBuilder = () => { "Disabled: This example requires a web frontend.", ); } + if ( + stack.api === "none" && + !rules.isConvex && + !rules.isBackendNone + ) { + addRule( + category, + techId, + "Disabled: Examples require an API. Cannot be selected when API is 'None'.", + ); + } if ( stack.database === "none" && techId === "todo" && diff --git a/apps/web/src/app/(home)/_components/testimonials.tsx b/apps/web/src/app/(home)/_components/testimonials.tsx index 72ecea8..9c6b9b5 100644 --- a/apps/web/src/app/(home)/_components/testimonials.tsx +++ b/apps/web/src/app/(home)/_components/testimonials.tsx @@ -178,7 +178,7 @@ export default function Testimonials() { onClick={handlePrev} disabled={currentPage === 1} className={cn( - "terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors", + "terminal-block-hover hidden items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors sm:flex", currentPage === 1 ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50", @@ -225,7 +225,7 @@ export default function Testimonials() { onClick={handleNext} disabled={currentPage === totalPages} className={cn( - "terminal-block-hover flex items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors", + "terminal-block-hover hidden items-center gap-1.5 rounded border border-border bg-background px-3 py-1.5 font-mono text-xs transition-colors sm:flex", currentPage === totalPages ? "cursor-not-allowed opacity-50" : "hover:bg-muted/50", diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx index 209687e..5c25ac3 100644 --- a/apps/web/src/app/(home)/page.tsx +++ b/apps/web/src/app/(home)/page.tsx @@ -361,7 +361,7 @@ export default function HomePage() { /> )} - {option.name.toLowerCase().replace(/\s+/g, "-")}.pkg + {option.name.toLowerCase().replace(/\s+/g, "-")} -rw-r--r-- diff --git a/apps/web/src/app/(home)/showcase/_components/ShowcaseItem.tsx b/apps/web/src/app/(home)/showcase/_components/ShowcaseItem.tsx new file mode 100644 index 0000000..1b4a0ca --- /dev/null +++ b/apps/web/src/app/(home)/showcase/_components/ShowcaseItem.tsx @@ -0,0 +1,142 @@ +"use client"; + +import { ExternalLink, File, Github, Monitor } from "lucide-react"; +import { motion } from "motion/react"; +import Image from "next/image"; +import Link from "next/link"; + +export interface ShowcaseItemProps { + title: string; + description: string; + imageUrl: string; + liveUrl?: string; + sourceUrl?: string; + tags: string[]; + index?: number; +} + +export default function ShowcaseItem({ + title, + description, + imageUrl, + liveUrl, + sourceUrl, + tags, + index = 0, +}: ShowcaseItemProps) { + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + ease: "easeOut", + }, + }, + }; + + const projectId = `PROJECT_${String(index + 1).padStart(3, "0")}`; + + return ( + +
+
+ + + {projectId}.PROJECT + +
+ • + {tags.length} DEPS +
+
+
+ +
+ {title} +
+
+ +
+

+ {title} +

+ +

+ {description} +

+ +
+
+ + DEPENDENCIES: + +
+
+ {tags.map((tag) => ( + + {tag} + + ))} +
+
+ +
+
+ {liveUrl && ( + + + LAUNCH_DEMO.EXE + + + )} + {sourceUrl && ( + + + VIEW_SOURCE.GIT + + + )} +
+ +
+
+ $ + + echo "Status: READY" + +
+
+ ONLINE +
+
+
+
+
+ + ); +} diff --git a/apps/web/src/app/(home)/showcase/page.tsx b/apps/web/src/app/(home)/showcase/page.tsx new file mode 100644 index 0000000..a8580ab --- /dev/null +++ b/apps/web/src/app/(home)/showcase/page.tsx @@ -0,0 +1,142 @@ +"use client"; + +import { FolderOpen, Terminal } from "lucide-react"; +import { motion } from "motion/react"; +import Navbar from "../_components/navbar"; +import ShowcaseItem from "./_components/ShowcaseItem"; + +const showcaseProjects = [ + { + title: "Project Alpha", + description: "A cool project built with Better-T-Stack.", + imageUrl: "https://via.placeholder.com/400x300?text=Project+Alpha", + liveUrl: "#", + sourceUrl: "#", + tags: ["Next.js", "tRPC", "Drizzle"], + }, + { + title: "Beta App", + description: "Another awesome application powered by Better-T-Stack.", + imageUrl: "https://via.placeholder.com/400x300?text=Beta+App", + liveUrl: "#", + sourceUrl: "#", + tags: ["Hono", "React Native", "SQLite"], + }, + { + title: "Gamma Platform", + description: "Showcasing the versatility of Better-T-Stack.", + imageUrl: "https://via.placeholder.com/400x300?text=Gamma+Platform", + liveUrl: "#", + tags: ["Convex", "TanStack Router"], + }, +]; + +export default function ShowcasePage() { + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2, + }, + }, + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { + opacity: 1, + y: 0, + transition: { + duration: 0.5, + ease: "easeOut", + }, + }, + }; + + return ( + <> + +
+ + +
+ + + PROJECT_SHOWCASE.EXE + +
+ + [{showcaseProjects.length} PROJECTS FOUND] + +
+ +
+
+ $ + + user@dev-machine:~/showcase$ ls -la + +
+
+ $ + + # Discover amazing projects built with Better-T-Stack + +
+
+ $ + + # Real-world implementations showcasing stack capabilities + +
+
+ +
+
+ + /showcase/projects/ +
+ drwxr-xr-x {showcaseProjects.length} items +
+
+
+ + + + {showcaseProjects.map((project, index) => ( + + ))} + + + +
+
+ $ + + # Want to showcase your project? Submit via GitHub issues + +
+
+ $ + + echo "Built something amazing? We'd love to feature + it!" + +
+
+ + +
+ + ); +} diff --git a/apps/web/src/app/showcase/_components/ShowcaseItem.tsx b/apps/web/src/app/showcase/_components/ShowcaseItem.tsx deleted file mode 100644 index 8068171..0000000 --- a/apps/web/src/app/showcase/_components/ShowcaseItem.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client"; - -import { motion } from "motion/react"; -import Image from "next/image"; -import Link from "next/link"; - -export interface ShowcaseItemProps { - title: string; - description: string; - imageUrl: string; - liveUrl?: string; - sourceUrl?: string; - tags: string[]; -} - -export default function ShowcaseItem({ - title, - description, - imageUrl, - liveUrl, - sourceUrl, - tags, -}: ShowcaseItemProps) { - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - - return ( - -
- {title} -
-

- {title} -

-

- {description} -

-
- {tags.map((tag) => ( - - {tag} - - ))} -
-
- {liveUrl && ( - - Live Demo - - )} - {sourceUrl && ( - - Source Code - - )} -
- - ); -} diff --git a/apps/web/src/app/showcase/page.tsx b/apps/web/src/app/showcase/page.tsx deleted file mode 100644 index d51c889..0000000 --- a/apps/web/src/app/showcase/page.tsx +++ /dev/null @@ -1,90 +0,0 @@ -"use client"; - -import { motion } from "motion/react"; -import Navbar from "../(home)/_components/navbar"; -import ShowcaseItem from "./_components/ShowcaseItem"; - -const showcaseProjects = [ - { - title: "Project Alpha", - description: "A cool project built with Better-T-Stack.", - imageUrl: "https://via.placeholder.com/400x300?text=Project+Alpha", - liveUrl: "#", - sourceUrl: "#", - tags: ["Next.js", "tRPC", "Drizzle"], - }, - { - title: "Beta App", - description: "Another awesome application powered by Better-T-Stack.", - imageUrl: "https://via.placeholder.com/400x300?text=Beta+App", - liveUrl: "#", - sourceUrl: "#", - tags: ["Hono", "React Native", "SQLite"], - }, - { - title: "Gamma Platform", - description: "Showcasing the versatility of Better-T-Stack.", - imageUrl: "https://via.placeholder.com/400x300?text=Gamma+Platform", - liveUrl: "#", - tags: ["Convex", "TanStack Router"], - }, -]; - -export default function ShowcasePage() { - const containerVariants = { - hidden: { opacity: 0 }, - visible: { - opacity: 1, - transition: { - staggerChildren: 0.1, - delayChildren: 0.2, - }, - }, - }; - - const itemVariants = { - hidden: { opacity: 0, y: 20 }, - visible: { - opacity: 1, - y: 0, - transition: { - duration: 0.5, - ease: "easeOut", - }, - }, - }; - - return ( - <> - -
- - -

- - Showcase - -

-

- Discover amazing projects built with Better-T-Stack. -

- - - - {showcaseProjects.map((project) => ( - - ))} - - -
- - ); -} diff --git a/bun.lock b/bun.lock index a31245e..a5aa7bf 100644 --- a/bun.lock +++ b/bun.lock @@ -14,28 +14,28 @@ }, "apps/cli": { "name": "create-better-t-stack", - "version": "2.13.4", + "version": "2.14.0", "bin": { "create-better-t-stack": "dist/index.js", }, "dependencies": { - "@clack/prompts": "latest", - "consola": "latest", - "execa": "latest", - "fs-extra": "latest", - "globby": "latest", - "gradient-string": "latest", - "handlebars": "latest", - "picocolors": "latest", - "posthog-node": "latest", - "yargs": "latest", + "@clack/prompts": "^0.11.0", + "consola": "^3.4.2", + "execa": "^9.6.0", + "fs-extra": "^11.3.0", + "globby": "^14.1.0", + "gradient-string": "^3.0.0", + "handlebars": "^4.7.8", + "picocolors": "^1.1.1", + "posthog-node": "^4.18.0", + "yargs": "^18.0.0", }, "devDependencies": { - "@types/fs-extra": "latest", - "@types/node": "latest", - "@types/yargs": "latest", - "tsdown": "latest", - "typescript": "latest", + "@types/fs-extra": "^11.0.4", + "@types/node": "^22.15.23", + "@types/yargs": "^17.0.33", + "tsdown": "^0.12.4", + "typescript": "^5.8.3", }, }, "apps/web": {