Merge pull request #34 from RanitManik/dev

changed design of snap page
RanitManik · Nov 24, 2024 · 9e2a0d3 · 9e2a0d3
2 parents ae87672 + 18fe7a5
commit 9e2a0d3
Show file tree

Hide file tree

Showing 13 changed files with 302 additions and 221 deletions.
diff --git a/app/(dashboard)/_components/create-snap.tsx b/app/(dashboard)/_components/create-snap.tsx
@@ -48,8 +48,8 @@ export default function CreateSnap({ isMobile }: { isMobile: boolean }) {
             .min(1, "Snap Name is required")
             .max(20, "Snap Name must be less than 20 characters")
             .regex(
-                /^[a-zA-Z0-9_. ]+$/,
-                "Snap Names can only include letters, numbers, Blank spaces ( ), underscores (_), and periods (.).",
+                /^[a-zA-Z0-9-.]+$/,
+                "Snap Names can only include letters, numbers, underscores (-), hyphen (-), and periods (.).",
             ),
         language: z.string().min(1, "Language is required"),
         visibility: z.string().min(1, "Visibility is required"),

diff --git a/app/(dashboard)/_components/dashboard-nav-bar.tsx b/app/(dashboard)/_components/dashboard-nav-bar.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { Navbar, NavbarBrand, NavbarContent } from "@nextui-org/navbar";
+import { Link } from "@nextui-org/link";
+import { Chip } from "@nextui-org/chip";
+
+import BrandLogo from "@/components/brand-logo";
+import Logo from "@/components/logo";
+import { NavMenu } from "@/components/nav-menu";
+
+export default function DashboardNavBar() {
+    return (
+        <Navbar isBordered maxWidth="2xl">
+            <NavbarBrand>
+                <Link className="hover:opacity-1" href="/">
+                    <Logo />
+                    <BrandLogo className="mx-2" />
+                </Link>
+                <Chip size="sm">Starter</Chip>
+                {/*<Chip
+                    classNames={{
+                        base: "bg-gradient-to-br from-indigo-500 to-pink-500",
+                        content: "text-white",
+                    }}
+                    size="sm"
+                >
+                    Premium
+                </Chip>*/}
+            </NavbarBrand>
+            <NavbarContent as="div" className="items-center" justify="end">
+                <NavMenu />
+            </NavbarContent>
+        </Navbar>
+    );
+}
diff --git a/app/(dashboard)/_components/nav-bar.tsx b/app/(dashboard)/_components/nav-bar.tsx
diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx
@@ -3,7 +3,7 @@ import { getServerSession } from "next-auth";
 
 import ControlPanel from "@/app/(dashboard)/_components/control-panel";
 import SnapInfoCard from "@/app/(dashboard)/_components/snap-info-card";
-import NavBar from "@/app/(dashboard)/_components/nav-bar";
+import DashboardNavBar from "@/app/(dashboard)/_components/dashboard-nav-bar";
 import { CommandMenu } from "@/components/command-menu";
 import { authOptions } from "@/lib/auth";
 import { GetSnippets } from "@/actions";
@@ -15,7 +15,7 @@ export default async function Page() {
 
     return (
         <div className="space-y-6">
-            <NavBar />
+            <DashboardNavBar />
             <ControlPanel />
             <CommandMenu />
             <main className="m-auto max-w-screen-xl space-y-4 px-6">

diff --git a/app/(dashboard)/snap/[id]/_components/back-button.tsx b/app/(dashboard)/snap/[id]/_components/back-button.tsx
diff --git a/app/(dashboard)/snap/[id]/_components/back-to-home-button.tsx b/app/(dashboard)/snap/[id]/_components/back-to-home-button.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { Home } from "lucide-react";
+import { Button } from "@nextui-org/button";
+import { Tooltip } from "@nextui-org/tooltip";
+
+import { usePRouter } from "@/components/custom-router";
+
+export const BackToHomeButton = () => {
+    const router = usePRouter();
+
+    return (
+        <Tooltip content="Home">
+            <Button
+                className="flex h-8 min-w-8 items-center justify-center gap-0.5 rounded px-1 py-0"
+                variant="light"
+                onClick={() => {
+                    router.push("/");
+                }}
+            >
+                <Home size={16} strokeWidth={1.5} />
+                <span className="sr-only">Go to Home</span>
+            </Button>
+        </Tooltip>
+    );
+};
diff --git a/app/(dashboard)/snap/[id]/_components/output-area.tsx b/app/(dashboard)/snap/[id]/_components/output-area.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { Terminal } from "lucide-react";
+
 import { useCodeStore } from "@/stores";
 import OutputAreaSkeleton from "@/app/(dashboard)/snap/[id]/_components/output-area-skeleton";
 
@@ -9,10 +11,34 @@ export default function OutputArea() {
     if (loading) return <OutputAreaSkeleton />;
 
     return (
-        <p>
-            {output.map((item) => {
-                return <span key={item}>{item}</span>;
-            })}
-        </p>
+        <div className="relative h-full w-full">
+            {output.length !== 0 ? (
+                <div className="flex gap-2">
+                    <span className="text-yellow-500">$</span>
+                    <div>
+                        {output.map((item) => {
+                            return (
+                                <span key={item} className="block">
+                                    {item}
+                                </span>
+                            );
+                        })}
+                    </div>
+                </div>
+            ) : (
+                <div className="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-center">
+                    <Terminal
+                        className="mx-auto mb-2 text-yellow-500"
+                        size={40}
+                    />
+                    <h2 className="text-lg font-semibold">Run your code</h2>
+                    <span className="text-sm opacity-80">
+                        Results of your code will appear here when you{" "}
+                        <strong className="text-success">Run</strong> the
+                        project.
+                    </span>
+                </div>
+            )}
+        </div>
     );
 }
diff --git a/app/(dashboard)/snap/[id]/_components/run-button.tsx b/app/(dashboard)/snap/[id]/_components/run-button.tsx
@@ -40,7 +40,7 @@ export default function RunButton() {
     return (
         <>
             <Button
-                className="text-sm font-semibold text-white"
+                className="h-8 justify-self-center text-sm font-semibold text-white"
                 color="success"
                 isDisabled={loading}
                 size="sm"

diff --git a/app/(dashboard)/snap/[id]/_components/snap-info-button.tsx b/app/(dashboard)/snap/[id]/_components/snap-info-button.tsx
@@ -0,0 +1,20 @@
+import { Image } from "@nextui-org/image";
+import { Button } from "@nextui-org/button";
+
+export default function SnapInfoButton({
+    imgURL,
+    snapName,
+}: {
+    snapName: string;
+    imgURL: string;
+}) {
+    return (
+        <Button
+            className="flex h-8 cursor-pointer items-center gap-2 rounded px-2"
+            variant="light"
+        >
+            <Image height={20} radius="sm" src={imgURL} width={20} />
+            <h1 className="line-clamp-1 max-w-60 text-sm">{snapName}</h1>
+        </Button>
+    );
+}