feat: updated ui

dannweeeee · Feb 23, 2025 · f26e784 · f26e784
1 parent 555963b
commit f26e784
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 15 deletions.
diff --git a/web/src/app/terminal/page.tsx b/web/src/app/terminal/page.tsx
@@ -1,15 +1,34 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import {
   IntegratedTerminal,
   WidgetTerminal,
   ModalTerminal,
 } from "jupiverse-kit";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { WidgetPosition } from "@/lib/types";
+import {
+  ArrowDownLeft,
+  ArrowDownRight,
+  ArrowUpLeft,
+  ArrowUpRight,
+} from "lucide-react";
+import cn from "clsx";
 
 const TerminalPage = () => {
+  const [position, setPosition] = useState<WidgetPosition>("bottom-right");
+  const [key, setKey] = useState(0);
+
+  useEffect(() => {
+    setKey((prevKey) => prevKey + 1);
+  }, [position]);
+
+  const handlePositionChange = (newPosition: WidgetPosition) => {
+    setPosition(newPosition);
+  };
+
   return (
     <motion.div
       className="h-screen w-full p-8 flex items-center justify-center overflow-hidden"
@@ -20,20 +39,29 @@ const TerminalPage = () => {
       <div className="max-w-4xl mx-auto flex items-center justify-center h-full w-full pt-24">
         <Tabs defaultValue="integrated" className="h-full w-full">
           <TabsList className="w-full flex justify-center mb-6 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <TabsTrigger value="integrated" className="flex-1">
+            <TabsTrigger
+              value="integrated"
+              className="flex-1 text-black hover:bg-gray-200 transition-colors"
+            >
               Integrated
             </TabsTrigger>
-            <TabsTrigger value="widget" className="flex-1">
+            <TabsTrigger
+              value="widget"
+              className="flex-1 text-black hover:bg-gray-200 transition-colors"
+            >
               Widget
             </TabsTrigger>
-            <TabsTrigger value="modal" className="flex-1">
+            <TabsTrigger
+              value="modal"
+              className="flex-1 text-black hover:bg-gray-200 transition-colors"
+            >
               Modal
             </TabsTrigger>
           </TabsList>
 
           <TabsContent
             value="integrated"
-            className="flex justify-center flex-grow overflow-auto pt-6"
+            className="flex justify-center flex-grow overflow-auto pt-3"
           >
             <div className="w-full h-full relative justify-center items-center">
               <IntegratedTerminal
@@ -43,8 +71,8 @@ const TerminalPage = () => {
                 }}
                 containerStyles={{
                   zIndex: 100,
-                  width: "100%",
-                  height: "100%",
+                  width: "400px",
+                  height: "568px",
                   display: "flex",
                 }}
               />
@@ -55,9 +83,71 @@ const TerminalPage = () => {
             value="widget"
             className="flex justify-center flex-grow overflow-auto pt-6"
           >
+            <div className="bg-black/10 dark:bg-white/10 rounded-2xl flex items-center justify-center w-full md:w-[384px] h-[216px] relative">
+              <span className="text-xs text-black/50 dark:text-white/50 text-center w-[70%]">
+                Click on the arrows to see how the Jupiter Widget will appear on
+                your web browser.
+                <br />
+                Click on the logo to view the Jupiter Swap Modal.
+              </span>
+
+              {/* Top left  */}
+              <div
+                className={cn(
+                  "absolute left-0 top-0 cursor-pointer hover:bg-black/20 dark:hover:bg-white/20 rounded-full p-1",
+                  {
+                    "text-green-500": position === "top-left",
+                  }
+                )}
+                onClick={() => handlePositionChange("top-left")}
+              >
+                <ArrowUpLeft className="h-5 w-5" />
+              </div>
+
+              {/* Top right  */}
+              <div
+                className={cn(
+                  "absolute right-0 top-0 cursor-pointer hover:bg-black/20 dark:hover:bg-white/20 rounded-full p-1",
+                  {
+                    "text-green-500": position === "top-right",
+                  }
+                )}
+                onClick={() => handlePositionChange("top-right")}
+              >
+                <ArrowUpRight className="h-5 w-5" />
+              </div>
+
+              {/* Bottom left  */}
+              <div
+                className={cn(
+                  "absolute left-0 bottom-0 cursor-pointer hover:bg-black/20 dark:hover:bg-white/20 rounded-full p-1",
+                  {
+                    "text-green-500": position === "bottom-left",
+                  }
+                )}
+                onClick={() => handlePositionChange("bottom-left")}
+              >
+                <ArrowDownLeft className="h-5 w-5" />
+              </div>
+
+              {/* Bottom right  */}
+              <div
+                className={cn(
+                  "absolute right-0 bottom-0 cursor-pointer hover:bg-black/20 dark:hover:bg-white/20 rounded-full p-1",
+                  {
+                    "text-green-500": position === "bottom-right",
+                  }
+                )}
+                onClick={() => handlePositionChange("bottom-right")}
+              >
+                <ArrowDownRight className="h-5 w-5" />
+              </div>
+            </div>
+
             <WidgetTerminal
+              key={key}
               rpcUrl={process.env.NEXT_PUBLIC_RPC_URL}
-              widgetPosition="bottom-right"
+              widgetPosition={position}
               widgetSize="default"
               onSuccess={({ txid, swapResult }) => {
                 console.log("Swap successful:", txid);
@@ -71,7 +161,8 @@ const TerminalPage = () => {
           >
             <ModalTerminal
               rpcUrl={process.env.NEXT_PUBLIC_RPC_URL}
-              buttonText="Launch Terminal"
+              buttonText="Launch Modal Terminal"
+              buttonClassName="flex items-center justify-center px-4 py-2 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-600 dark:text-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300"
               onSuccess={({ txid, swapResult }) => {
                 console.log("Swap successful:", txid);
               }}

diff --git a/web/src/components/shared/navbar.tsx b/web/src/components/shared/navbar.tsx
@@ -26,7 +26,7 @@ const Navbar = () => {
       className="fixed w-full top-0 z-0 backdrop-blur-lg shadow-lg 
         bg-white/70 text-black dark:bg-black/70 dark:text-white"
     >
-      <div className="container mx-auto px-4 h-20 flex items-center justify-between ">
+      <div className="container mx-auto px-4 h-20 flex items-center justify-between">
         {/* Logo */}
         <motion.div variants={itemVariants} className="flex-1">
           <Link
@@ -45,10 +45,10 @@ const Navbar = () => {
           </Link>
         </motion.div>
 
-        {/* Navigation Items - Desktop */}
+        {/* Navigation Items */}
         <motion.div
           variants={itemVariants}
-          className="hidden md:flex flex-1 justify-center gap-10"
+          className="flex-1 justify-center gap-10 hidden md:flex"
         >
           {navItems.map((item) => (
             <Link
@@ -61,16 +61,16 @@ const Navbar = () => {
           ))}
         </motion.div>
 
-        {/* Theme Toggle - Desktop */}
+        {/* Theme Toggle */}
         <motion.div
           variants={itemVariants}
-          className="hidden md:flex flex-1 justify-end items-center gap-4"
+          className="flex-1 justify-end items-center gap-4 hidden md:flex"
         >
           <ThemeToggle />
         </motion.div>
 
         {/* Mobile Menu */}
-        <div className="md:hidden flex items-center">
+        <div className="flex items-center md:hidden">
           <Sheet>
             <SheetTrigger asChild>
               <Button

diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
@@ -0,0 +1 @@
+export type WidgetPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type WidgetPosition = "top-left" \| "top-right" \| "bottom-left" \| "bottom-right";