Development

README.md

@@ -1,7 +1,3 @@
 ## Saroh.io
 
 Build your storefronts with ease. Add Blogs, products, web stories and manage your short links with saroh.io.
-
-
-
-This project is inspired by [dub.co](https://dub.co) and also some code is used from [dub.co](https://dub.co) and [dub.co](https://dub.co) is also used as a base for this project.

app/app/(dashboard)/layout.tsx

@@ -1,4 +1,5 @@
 import Navbar from "@/components/app/navbar";
+import NavTabs from "@/components/app/navbar/nav-tabs";
 import React, { ReactNode } from "react";
 
 interface DashboardLayoutProps {
@@ -9,6 +10,7 @@ export default function DashboardLayout({ children }: DashboardLayoutProps) {
 	return (
 		<div>
 			<Navbar />
+			{/* <NavTabs /> */}
 			{children}
 		</div>
 	);

app/app/(dashboard)/page.tsx

@@ -1,5 +1,9 @@
 import React from "react";
 
 export default function DashboardHomePage() {
-	return <div>DashboardHomePage</div>;
+	return (
+		<div>
+			<h1>Show list of Sites and Web Stories here</h1>
+		</div>
+	);
 }

app/app/(dashboard)/settings/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SettingsPage() {
+  return (
+    <div>SettingsPage</div>
+  )
+}

app/app/(dashboard)/sites/[siteId]/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SiteDetailsPage() {
+  return (
+    <div>SiteDetailsPage</div>
+  )
+}

app/app/(dashboard)/sites/page.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SitesPage() {
+  return (
+    <div>SitesPage</div>
+  )
+}

components/app/navbar/index.tsx

@@ -7,6 +7,8 @@ import { ThemeToggle } from "./theme-toggle";
 import { UserNav } from "./user-nav";
 // import prismadb from "@/lib/prismadb";
 import { getSession } from "@/lib/auth";
+import NavTabs from "./nav-tabs";
+import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 
 const Navbar = async () => {
 	// const { userId } = auth();
@@ -31,21 +33,24 @@ const Navbar = async () => {
 	];
 
 	return (
-		<div className="border-b">
-			<div className="flex h-16 items-center px-4">
-				<StoreSwitcher items={stores} />
-				<MainNav className="mx-6" />
-				<div className="ml-auto flex items-center space-x-4">
-					<ThemeToggle />
-					{/* <UserButton afterSignOutUrl="/" /> */}
-					<UserNav
-						avatarUrl={avatarUrl}
-						email={email || userName}
-						name={name}
-						// userName={userName}
-					/>
+		<div className="border-b ">
+			<MaxWidthWrapper>
+				<div className="flex items-center h-16 px-4">
+					<StoreSwitcher items={stores} />
+					{/* <MainNav className="mx-6" /> */}
+					<div className="flex items-center ml-auto space-x-4">
+						<ThemeToggle />
+						{/* <UserButton afterSignOutUrl="/" /> */}
+						<UserNav
+							avatarUrl={avatarUrl}
+							email={email || userName}
+							name={name}
+							// userName={userName}
+						/>
+					</div>
 				</div>
-			</div>
+				<NavTabs />
+			</MaxWidthWrapper>
 		</div>
 	);
 };

components/app/navbar/nav-tabs.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import React from "react";
+
+let tabs = [
+	{
+		name: "Dashboard",
+		href: "/",
+		key: "dashboard",
+	},
+	{
+		name: "Sites",
+		href: "/sites",
+		key: "sites",
+	},
+	{
+		name: "Settings",
+		href: "/settings",
+		key: "settings",
+	},
+];
+
+export default function NavTabs() {
+	const segments = useSelectedLayoutSegments();
+	console.log({ segments });
+	return (
+		<div className="-mb-0.5 flex h-12 items-center justify-start space-x-2 overflow-x-auto scrollbar-hide">
+			{tabs.map(({ name, href, key }) => (
+				<Link
+					key={href}
+					href={href}
+					className={`border-b-2 p-1 ${
+						// hacky approach to getting the current tab – will replace with useSelectedLayoutSegments when upgrading to Next.js App Router
+						// router.asPath
+						// 	.split("?")[0]
+						// 	.split("/")
+						// 	.slice(0, slug ? 3 : 2)
+						// 	.join("/") === href
+						segments[0] === key ||
+						(key === "dashboard" && segments.length === 0)
+							? "border-black text-black"
+							: "border-transparent text-gray-600 hover:text-black"
+					}`}
+				>
+					<div className="px-3 py-2 transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
+						<p className="text-sm">{name}</p>
+					</div>
+				</Link>
+			))}
+		</div>
+	);
+}

package.json

@@ -4,8 +4,8 @@
 	"private": true,
 	"scripts": {
 		"dev": "prisma generate && next dev",
-    "build": "prisma generate && prisma db push && next build",
-    "start": "next start",
+		"build": "prisma generate && prisma db push && next build",
+		"start": "next start",
 		"lint": "next lint",
 		"predev": "prisma generate",
 		"prepare": "husky install"
@@ -55,7 +55,7 @@
 		"react-icons": "^4.11.0",
 		"sonner": "^1.0.3",
 		"tailwind-merge": "^1.14.0",
-		"zod": "^3.22.2"
+		"zod": "^3.22.4"
 	},
 	"devDependencies": {
 		"@tailwindcss/forms": "^0.5.3",
@@ -68,7 +68,7 @@
 		"eslint": "8.49.0",
 		"eslint-config-next": "13.5.1",
 		"husky": "^8.0.3",
-		"postcss": "8.4.30",
+		"postcss": "8.4.31",
 		"prettier": "^2.8.8",
 		"prettier-plugin-tailwindcss": "^0.3.0",
 		"pretty-quick": "^3.1.3",