refactor: update database option to sqlite and replace framer-motion with motion

2025-10-12 23:52:15 +00:00 · 2025-02-18 11:34:49 +05:30
parent 60e721142a
commit f76e82cff7
8 changed files with 59 additions and 65 deletions
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -12,11 +12,11 @@
 	"dependencies": {
 		"@xyflow/react": "^12.4.3",
 		"babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216",
-		"framer-motion": "^12.4.3",
 		"fumadocs-core": "15.0.6",
 		"fumadocs-mdx": "11.5.3",
 		"fumadocs-ui": "15.0.6",
 		"lucide-react": "^0.475.0",
+		"motion": "^12.4.3",
 		"next": "15.1.6",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"
--- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import CustomizableStack from "./CustomizableStack";

 export default function CustomizableSection() {
--- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx
+++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx
@@ -44,7 +44,7 @@ const CustomizableStack = () => {
 	const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 	const [activeNodes, setActiveNodes] = useState({
 		backend: "hono",
-		database: "libsql",
+		database: "sqlite",
 		orm: "drizzle",
 		auth: "better-auth",
 	});
@@ -140,9 +140,9 @@ const CustomizableStack = () => {
 	const generateCommand = useCallback(() => {
 		const flags: string[] = ["-y"];

-		if (activeNodes.database !== "libsql") {
+		if (activeNodes.database !== "sqlite") {
 			flags.splice(flags.indexOf("-y"), 1);
-			flags.push(`--database ${activeNodes.database}`);
+			flags.push(`--${activeNodes.database}`);
 		}

 		if (activeNodes.auth !== "better-auth") {
--- a/apps/web/src/app/(home)/_components/Icons.tsx
+++ b/apps/web/src/app/(home)/_components/Icons.tsx
@@ -120,6 +120,23 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
 					/>
 				</svg>
 			);
+
+		case "github":
+			return (
+				<svg
+					className={className}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 97.63 96.03"
+				>
+					<title>Github</title>
+					<path
+						fill="#f0f6fc"
+						fillRule="evenodd"
+						d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a47 47 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0"
+						clipRule="evenodd"
+					/>
+				</svg>
+			);
 		default:
 			return null;
 	}
--- a/apps/web/src/app/(home)/_components/Navbar.tsx
+++ b/apps/web/src/app/(home)/_components/Navbar.tsx
@@ -1,8 +1,10 @@
 "use client";
+import Link from "next/link";
 import { useEffect, useRef, useState } from "react";
+import PackageIcon from "./Icons";

 const Navbar = () => {
-	const [activeLink, setActiveLink] = useState("about");
+	const [activeLink, setActiveLink] = useState("home");
 	const [bgStyles, setBgStyles] = useState({});
 	const [scrolled, setScrolled] = useState(false);
 	const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({});
@@ -56,57 +58,47 @@ const Navbar = () => {

 			<div
 				className={`flex items-center backdrop-blur-md bg-white/5 rounded-full border border-white/10 py-1 px-1.5 text-sm relative transition-all duration-500 ease-out ${
-					scrolled ? "w-[480px]" : "w-[350px]"
+					scrolled ? "w-[420px]" : "w-[280px]"
 				}`}
 			>
 				<div
 					className="absolute transition-all duration-300 ease-in-out bg-white/5 border border-white/10 rounded-full py-2"
 					style={bgStyles}
 				/>
-				{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
-				<a
-					href="#about"
+				<Link
+					href="/"
 					ref={(ref) => {
-						linkRefs.current.about = ref;
+						linkRefs.current.home = ref;
 					}}
-					onClick={() => setActiveLink("about")}
+					onMouseOver={() => setActiveLink("home")}
 					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
 				>
-					About
-				</a>
-				{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
-				<a
-					href="#careers"
+					Home
+				</Link>
+				<Link
+					href="https://www.github.com/better-t-stack/create-better-t-stack"
+					target="_blank"
 					ref={(ref) => {
-						linkRefs.current.careers = ref;
+						linkRefs.current.github = ref;
 					}}
-					onClick={() => setActiveLink("careers")}
-					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
+					onMouseOver={() => setActiveLink("github")}
+					onMouseLeave={() => setActiveLink("home")}
+					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
 				>
-					Careers
-				</a>
-				{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
-				<a
-					href="#blog"
+					<PackageIcon pm="github" className="w-4 h-4" /> Github
+				</Link>
+				<Link
+					href="https://www.npmjs.com/package/create-better-t-stack"
+					target="_blank"
 					ref={(ref) => {
-						linkRefs.current.blog = ref;
+						linkRefs.current.npm = ref;
 					}}
-					onClick={() => setActiveLink("blog")}
-					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
+					onMouseOver={() => setActiveLink("npm")}
+					onMouseLeave={() => setActiveLink("home")}
+					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center"
 				>
-					Blog
-				</a>
-				{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
-				<a
-					href="#changelog"
-					ref={(ref) => {
-						linkRefs.current.changelog = ref;
-					}}
-					onClick={() => setActiveLink("changelog")}
-					className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative"
-				>
-					Changelog
-				</a>
+					<PackageIcon pm="npm" className="w-4 h-4 rounded-full" /> Npm
+				</Link>
 				<span
 					className="text-gray-500 transition-all duration-300"
 					style={{
@@ -116,13 +108,13 @@ const Navbar = () => {
 				>
 					|
 				</span>
-				{/* biome-ignore lint/a11y/useValidAnchor: <explanation> */}
-				<a
-					href="#documentation"
+				<Link
+					href="/docs"
 					ref={(ref) => {
 						linkRefs.current.documentation = ref;
 					}}
-					onClick={() => setActiveLink("documentation")}
+					onMouseOver={() => setActiveLink("documentation")}
+					onMouseLeave={() => setActiveLink("home")}
 					style={{
 						transform: scrolled ? "translateY(0)" : "translateY(-8px)",
 					}}
@@ -133,7 +125,7 @@ const Navbar = () => {
 					}`}
 				>
 					Documentation
-				</a>
+				</Link>
 			</div>

 			<div
--- a/apps/web/src/app/(home)/_components/TechSelector.tsx
+++ b/apps/web/src/app/(home)/_components/TechSelector.tsx
@@ -5,12 +5,8 @@ type TechOption = {
 };

 const techOptions: Record<string, TechOption[]> = {
-	backend: [
-		{ id: "hono", label: "Hono", category: "backend" },
-		{ id: "express", label: "Express", category: "backend" },
-	],
 	database: [
-		{ id: "libsql", label: "libSQL", category: "database" },
+		{ id: "sqlite", label: "Sqlite", category: "database" },
 		{ id: "postgres", label: "PostgreSQL", category: "database" },
 	],
 	orm: [
--- a/apps/web/src/lib/constant.ts
+++ b/apps/web/src/lib/constant.ts
@@ -170,19 +170,6 @@ export const initialNodes: TechNode[] = [
 			group: "backend",
 		},
 	},
-	{
-		id: "express",
-		type: "techNode",
-		position: { x: 897, y: 389 },
-		data: {
-			label: "Express",
-			category: "backend",
-			description: "Fast, unopinionated web framework",
-			isDefault: false,
-			isActive: false,
-			group: "backend",
-		},
-	},
 	{
 		id: "libsql",
 		type: "techNode",
--- a/bun.lock
+++ b/bun.lock
@@ -41,11 +41,11 @@
      "dependencies": {
        "@xyflow/react": "^12.4.3",
        "babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216",
-        "framer-motion": "^12.4.3",
        "fumadocs-core": "15.0.6",
        "fumadocs-mdx": "11.5.3",
        "fumadocs-ui": "15.0.6",
        "lucide-react": "^0.475.0",
+        "motion": "^12.4.3",
        "next": "15.1.6",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
@@ -1233,6 +1233,8 @@

    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],

+    "motion": ["motion@12.4.3", "", { "dependencies": { "framer-motion": "^12.4.3", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-KeoMpKFEVdofN0v/z1g3tm4cMtk1WAHQ5Pg7M1ElxeRLA8cBSrkmSCJ9q6hLo7spp/n906h2kmeDNvBkysaxcQ=="],
+
    "motion-dom": ["motion-dom@12.0.0", "", { "dependencies": { "motion-utils": "^12.0.0" } }, "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg=="],

    "motion-utils": ["motion-utils@12.0.0", "", {}, "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="],