From 18fe7a5f0310bddfb4b8e75bb16dbf07ececf67f Mon Sep 17 00:00:00 2001 From: RanitManik <138437760+RanitManik@users.noreply.github.com> Date: Mon, 25 Nov 2024 03:29:56 +0530 Subject: [PATCH] changed design of snap page --- app/(dashboard)/_components/create-snap.tsx | 4 +- .../_components/dashboard-nav-bar.tsx | 35 ++++ app/(dashboard)/_components/nav-bar.tsx | 160 ------------------ app/(dashboard)/page.tsx | 4 +- .../snap/[id]/_components/back-button.tsx | 15 -- .../[id]/_components/back-to-home-button.tsx | 26 +++ .../snap/[id]/_components/output-area.tsx | 36 +++- .../snap/[id]/_components/run-button.tsx | 2 +- .../[id]/_components/snap-info-button.tsx | 20 +++ app/(dashboard)/snap/[id]/page.tsx | 73 ++++---- components/nav-menu.tsx | 134 +++++++++++++++ components/theme-switch.tsx | 13 +- package.json | 1 + 13 files changed, 302 insertions(+), 221 deletions(-) create mode 100644 app/(dashboard)/_components/dashboard-nav-bar.tsx delete mode 100644 app/(dashboard)/_components/nav-bar.tsx delete mode 100644 app/(dashboard)/snap/[id]/_components/back-button.tsx create mode 100644 app/(dashboard)/snap/[id]/_components/back-to-home-button.tsx create mode 100644 app/(dashboard)/snap/[id]/_components/snap-info-button.tsx create mode 100644 components/nav-menu.tsx diff --git a/app/(dashboard)/_components/create-snap.tsx b/app/(dashboard)/_components/create-snap.tsx index aaf1af0..5c5bcdc 100644 --- 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 new file mode 100644 index 0000000..0dd601e --- /dev/null +++ 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 ( + + + + + + + Starter + {/* + Premium + */} + + + + + + ); +} diff --git a/app/(dashboard)/_components/nav-bar.tsx b/app/(dashboard)/_components/nav-bar.tsx deleted file mode 100644 index e8915ed..0000000 --- a/app/(dashboard)/_components/nav-bar.tsx +++ /dev/null @@ -1,160 +0,0 @@ -"use client"; - -import { Navbar, NavbarBrand, NavbarContent } from "@nextui-org/navbar"; -import { Link } from "@nextui-org/link"; -import { - Dropdown, - DropdownTrigger, - DropdownMenu, - DropdownItem, - DropdownSection, -} from "@nextui-org/dropdown"; -import { User } from "@nextui-org/user"; -import { Avatar } from "@nextui-org/avatar"; -import { useSession } from "next-auth/react"; -import { Home, LogOut, PlusIcon } from "lucide-react"; -import { toast } from "sonner"; -import { Chip } from "@nextui-org/chip"; - -import { ThemeSwitch } from "@/components/theme-switch"; -import BrandLogo from "@/components/brand-logo"; -import Logo from "@/components/logo"; -import { SignOut } from "@/actions"; - -export default function NavBar() { - const { data: session } = useSession(); - - const handleSignOut = async () => { - try { - await SignOut(); - } catch (error) { - toast.error( - "An unexpected error occurred. Please try again later.", - ); - } - }; - - const iconClasses = - "w-4 text-default-500 flex-shrink-0 group-hover:text-foreground"; - - return ( - - - - - - - Starter - {/* - Premium - */} - - - - - - - - - - - - - Dashboard - - Settings - - } - > - New Snap - - - - - - Command Menu - - - } - > - Theme - - - - - - } - > - Home Page - - - } - onClick={handleSignOut} - > - Log Out - - - - - - Upgrade to Pro - - - - - - - ); -} diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx index 8d535ed..81fa869 100644 --- 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 (
- +
diff --git a/app/(dashboard)/snap/[id]/_components/back-button.tsx b/app/(dashboard)/snap/[id]/_components/back-button.tsx deleted file mode 100644 index c22af62..0000000 --- a/app/(dashboard)/snap/[id]/_components/back-button.tsx +++ /dev/null @@ -1,15 +0,0 @@ -"use client"; - -import { ChevronLeft } from "lucide-react"; -import { Link } from "@nextui-org/link"; - -export const BackButton = () => { - return ( - - - - ); -}; diff --git a/app/(dashboard)/snap/[id]/_components/back-to-home-button.tsx b/app/(dashboard)/snap/[id]/_components/back-to-home-button.tsx new file mode 100644 index 0000000..3911376 --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/app/(dashboard)/snap/[id]/_components/output-area.tsx b/app/(dashboard)/snap/[id]/_components/output-area.tsx index 5a6dd60..6856e51 100644 --- 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 ; return ( -

- {output.map((item) => { - return {item}; - })} -

+
+ {output.length !== 0 ? ( +
+ $ +
+ {output.map((item) => { + return ( + + {item} + + ); + })} +
+
+ ) : ( +
+ +

Run your code

+ + Results of your code will appear here when you{" "} + Run the + project. + +
+ )} +
); } diff --git a/app/(dashboard)/snap/[id]/_components/run-button.tsx b/app/(dashboard)/snap/[id]/_components/run-button.tsx index 1a5fc9c..a709b0d 100644 --- 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 ( <> + ); +} diff --git a/app/(dashboard)/snap/[id]/page.tsx b/app/(dashboard)/snap/[id]/page.tsx index c466059..0f19bb1 100644 --- a/app/(dashboard)/snap/[id]/page.tsx +++ b/app/(dashboard)/snap/[id]/page.tsx @@ -1,4 +1,3 @@ -import { Image } from "@nextui-org/image"; import { getServerSession } from "next-auth"; import { @@ -10,9 +9,11 @@ import CodeEditor from "@/app/(dashboard)/snap/[id]/_components/code-editor"; import { languageOptions } from "@/config/languages"; import { authOptions } from "@/lib/auth"; import { GetSnippet } from "@/actions"; -import { BackButton } from "@/app/(dashboard)/snap/[id]/_components/back-button"; +import { BackToHomeButton } from "@/app/(dashboard)/snap/[id]/_components/back-to-home-button"; import RunButton from "@/app/(dashboard)/snap/[id]/_components/run-button"; import OutputArea from "@/app/(dashboard)/snap/[id]/_components/output-area"; +import SnapInfoButton from "@/app/(dashboard)/snap/[id]/_components/snap-info-button"; +import { NavMenu } from "@/components/nav-menu"; export default async function page({ params }: { params: { id: string } }) { const session = await getServerSession(authOptions); @@ -66,38 +67,44 @@ export default async function page({ params }: { params: { id: string } }) { } return ( - - -
-
- - -

- {name} -

-
- -
- - - - -
-

Output

+ <> + + + + + + + +
+ +
+ + + ); } diff --git a/components/nav-menu.tsx b/components/nav-menu.tsx new file mode 100644 index 0000000..1598a5f --- /dev/null +++ b/components/nav-menu.tsx @@ -0,0 +1,134 @@ +"use client"; + +import { + Dropdown, + DropdownItem, + DropdownMenu, + DropdownSection, + DropdownTrigger, +} from "@nextui-org/dropdown"; +import { Avatar } from "@nextui-org/avatar"; +import { User } from "@nextui-org/user"; +import { Home, LayoutDashboardIcon, LogOut, Settings } from "lucide-react"; +import { useSession } from "next-auth/react"; +import { toast } from "sonner"; + +import { ThemeSwitch } from "@/components/theme-switch"; +import { SignOut } from "@/actions"; +import { usePRouter } from "@/components/custom-router"; + +export const NavMenu = ({ size }: { size?: number }) => { + const { data: session } = useSession(); + const router = usePRouter(); + + const handleSignOut = async () => { + try { + await SignOut(); + } catch (error) { + toast.error( + "An unexpected error occurred. Please try again later.", + ); + } + }; + + const iconClasses = + "w-4 text-default-500 flex-shrink-0 group-hover:text-foreground"; + + return ( + + + + + + + + + + + } + onClick={() => router.push("/")} + > + Dashboard + + + } + onClick={() => router.push("/settings")} + > + Settings + + } + > + Theme + + + + + } + onClick={() => router.push("/home")} + > + Home Page + + + } + onClick={handleSignOut} + > + Log Out + + + + + + Upgrade to Pro + + + + + ); +}; diff --git a/components/theme-switch.tsx b/components/theme-switch.tsx index add5a2a..52ae89d 100644 --- a/components/theme-switch.tsx +++ b/components/theme-switch.tsx @@ -11,11 +11,13 @@ import { Moon, Sun } from "lucide-react"; export interface ThemeSwitchProps { className?: string; classNames?: SwitchProps["classNames"]; + size?: number; } export const ThemeSwitch: FC = ({ className, classNames, + size, }) => { const { theme, setTheme } = useTheme(); const isSSR = useIsSSR(); @@ -41,7 +43,7 @@ export const ThemeSwitch: FC = ({ = ({ "rounded-lg", "flex items-center justify-center", "group-data-[selected=true]:bg-transparent", - "!text-default-500", + "group-data-[selected=true]:text-default-500", + "group-data-[hover=true]:text-foreground", "pt-px", "px-0", "mx-0", @@ -69,7 +72,11 @@ export const ThemeSwitch: FC = ({ ), })} > - {!isSelected || isSSR ? : } + {!isSelected || isSSR ? ( + + ) : ( + + )}
); diff --git a/package.json b/package.json index 1c57031..10cc4bc 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@nextui-org/switch": "2.0.34", "@nextui-org/system": "2.2.6", "@nextui-org/theme": "2.2.11", + "@nextui-org/tooltip": "^2.0.41", "@nextui-org/user": "^2.0.34", "@prisma/client": "^5.20.0", "@react-aria/ssr": "3.9.4",