feat: urls + clear button

kin-lang · Apr 17, 2024 · d8a42dd · d8a42dd
1 parent 1a086f4
commit d8a42dd
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 55 deletions.
diff --git a/app/(site)/page.tsx b/app/(site)/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useContext, useEffect } from "react";
 import KinEditor from "../components/common/editor";
@@ -9,47 +9,58 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from "@/components/ui/resizable"
+} from "@/components/ui/resizable";
 import { KinContext } from "@/components/kin.provider";
 import { Button } from "@/components/ui/button";
-import { Play } from "lucide-react";
+import { Play, Eraser } from "lucide-react";
 
-const defaultOptions:EditorOptions = {
+const defaultOptions: EditorOptions = {
   height: "100%",
   width: "100%",
   defaultLanguage: "javascript",
-  theme: "vs-dark"
-}
+  theme: "vs-dark",
+};
 
 export default function Home() {
+  const context = useContext(KinContext);
 
-  const context = useContext(KinContext)
-
-  const {editorValue} = context!
+  const { editorValue } = context!;
 
   return (
     <main className="h-screen overflow-hidden">
       <NavBar />
-      <ResizablePanelGroup className="bg-black/10 h-[calc(100vh-100px)]" direction="horizontal">
+      <ResizablePanelGroup
+        className="bg-black/10 h-[calc(100vh-100px)]"
+        direction="horizontal"
+      >
         <ResizablePanel defaultSize={20} className="">
           <SideBar />
         </ResizablePanel>
         <ResizableHandle withHandle className="bg-white/70" />
-        <ResizablePanel  defaultSize={80}>
+        <ResizablePanel defaultSize={80}>
           <ResizablePanelGroup direction="vertical">
             <ResizablePanel defaultSize={60} className="">
               <KinEditor {...defaultOptions} defaultValue={editorValue} />
             </ResizablePanel>
             <ResizableHandle withHandle />
             <ResizablePanel defaultSize={40}>
-              <div className="px-4 mt-3 pb-4">
+              <div className="px-4 mt-3 pb-4 flex flex-row justify-end gap-8 mr-10">
+                <Button
+                  className="float-right flex items-center gap-2"
+                  variant="secondary"
+                >
+                  <Eraser className="h-4 w-4" />
+                  Clear
+                </Button>
                 <Button className="float-right flex items-center gap-2">
-                  <Play className="h-4 w-4"/>
+                  <Play className="h-4 w-4" />
                   Run
                 </Button>
               </div>
               <div className="p-4">
-                <span className="text-sm font-extralight">the output will be shown here</span>
+                <span className="text-sm font-extralight">
+                  the output will be shown here
+                </span>
               </div>
             </ResizablePanel>
           </ResizablePanelGroup>

diff --git a/app/components/layout/navbar.tsx b/app/components/layout/navbar.tsx
@@ -1,53 +1,69 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import Image from "next/image"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
- 
+} from "@/components/ui/dropdown-menu";
+import { AppConstants } from "@/lib/contants";
 
 const NavBar = () => {
-
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   return (
-    <div className='p-4 bg-white dark:bg-background px-12 h-[80px] w-full flex items-center justify-between shadow-xl sticky top-0 z-20'>
-        <div className="logo flex items-center gap-4">
-            <Image src="/kin.png" width={40} height={40} alt="Kin Lang Logo" />
-            <h1 className="text-2xl font-bold text-black/80 dark:text-white/80">Kin Lang</h1>
-        </div>
-        <div className="flex items-center gap-3">
-          <Button variant={'outline'} className="">GitHub</Button>
-          <Button className={'bg-blue-500'}>Docs</Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" size="icon">
-                <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                <span className="sr-only">Toggle theme</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => setTheme("light")}>
-                Light
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setTheme("dark")}>
-                Dark
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => setTheme("system")}>
-                System
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
+    <div className="p-4 bg-white dark:bg-background px-12 h-[80px] w-full flex items-center justify-between shadow-xl sticky top-0 z-20">
+      <div className="logo flex items-center gap-4">
+        <Image src="/kin.png" width={40} height={40} alt="Kin Lang Logo" />
+        <h1 className="text-2xl font-bold text-black/80 dark:text-white/80">
+          Kin Lang
+        </h1>
+      </div>
+      <div className="flex items-center gap-3">
+        <Button
+          variant={"outline"}
+          className=""
+          onClick={() =>
+            window.open(AppConstants.GITHUB_URL, "_blank") as Window
+          }
+        >
+          GitHub
+        </Button>
+        <Button
+          className={"bg-blue-500"}
+          onClick={() => {
+            window.open(AppConstants.DOCS_URL, "_blank");
+          }}
+        >
+          Docs
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon">
+              <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setTheme("light")}>
+              Light
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("dark")}>
+              Dark
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setTheme("system")}>
+              System
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default NavBar
+export default NavBar;
diff --git a/lib/contants.ts b/lib/contants.ts
@@ -0,0 +1,4 @@
+export const AppConstants = {
+  GITHUB_URL: "https://github.com/kin-lang/kin",
+  DOCS_URL: "https://kinlang.dev",
+};