GovNFT · stas · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/flowbite.config.ts b/flowbite.config.ts
@@ -60,10 +60,10 @@ export default {
         input: {
           base: "block w-full border disabled:cursor-not-allowed disabled:text-opacity-50 dark:disabled:text-opacity-30",
           sizes: {
-            md: "p-2.5 text-sm",
+            md: "p-3 text-sm",
           },
           colors: {
-            gray: "bg-transparent border-gray-300 text-gray-900 hover:border-opacity-70 dark:hover:border-opacity-70 focus:border-gray-400 dark:border-gray-600 dark:bg-transparent dark:text-white dark:focus:border-gray-500 outline-0",
+            gray: "bg-transparent border-gray-300 text-gray-900 placeholder-white/20 hover:border-opacity-70 dark:hover:border-opacity-70 focus:border-gray-400 dark:border-gray-600 dark:bg-transparent dark:text-white dark:focus:border-gray-500 outline-0",
             info: "border-gray-900 border-opacity-10 focus:border-opacity-30 bg-transparent text-gray-900 dark:text-white dark:border-white dark:border-opacity-10 dark:focus:border-opacity-30 dark:bg-transparent outline-0",
             warning:
               "border-amber-500 bg-transparent text-yellow-500 placeholder-yellow-700 focus:border-amber-500 dark:border-yellow-700 dark:bg-amber-800 dark:bg-opacity-10 dark:focus:border-amber-600 outline-0",

diff --git a/public/temp-graph-dark.png b/public/temp-graph-dark.png
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -2,10 +2,10 @@ import DarkThemeToggle from "./DarkThemeToggle";
 
 export default function Footer() {
   return (
-    <div className="flex justify-between items-center text-xs border-t border-black/5 dark:border-white/5 py-4 mt-24">
+    <div className="flex justify-between items-center text-xs border-t border-black/5 dark:border-white/5 pt-4 pb-24 mt-24">
       {/* @ts-ignore */}
       <span className="opacity-40">2023 &copy; GOVNFT. {__APP_VERSION__}</span>
-      <div className="flex gap-8 items-center">
+      <div className="flex gap-4 items-center">
         <div className="hidden md:flex gap-2 items-center">
           <span className="opacity-40">A public good for</span>{" "}
           <img src="./svg/op-logo.svg" className="h-5" />

diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
@@ -1,9 +1,9 @@
 import { Button } from "flowbite-react";
 import {
   ExternalLink as ExternalLinkIcon,
+  Plus as PlusIcon,
   Settings as SettingsIcon,
   Wallet as WalletIcon,
-  Plus as PlusIcon,
 } from "lucide-react";
 import { useState } from "react";
 import {
@@ -91,11 +91,17 @@ export default function Profile() {
 
         <div className="flex gap-2">
           <Button size="sm" color="light" href="/dash">
-            <div className="uppercase font-bold tracking-widest text-[11px]">Dashboard</div>
+            <div className="uppercase font-bold tracking-widest text-[11px]">
+              Dashboard
+            </div>
           </Button>
           <Button size="sm" color="light" href="/create">
-            <div className="hidden sm:block uppercase font-bold tracking-widest text-[11px]">Create</div>
-            <div className="py-0.5 sm:hidden uppercase font-bold tracking-widest"><PlusIcon size={16} /></div>
+            <div className="hidden sm:block uppercase font-bold tracking-widest text-[11px]">
+              Create
+            </div>
+            <div className="py-0.5 sm:hidden uppercase font-bold tracking-widest">
+              <PlusIcon size={16} />
+            </div>
           </Button>
 
           <div

diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx
@@ -1,3 +1,18 @@
+import {
+  Button,
+  Select,
+  Textarea,
+  TextInput,
+  ToggleSwitch,
+  Tooltip,
+} from "flowbite-react";
+import {
+  Calendar as CalendarIcon,
+  Info as InfoIcon,
+  Minus as MinusIcon,
+  Plus as PlusIcon,
+} from "lucide-react";
+
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 
@@ -7,8 +22,141 @@ export default function Create() {
       {/* @ts-ignore */}
       <Header />
 
-      <div className="md:w-1/2 xl:w-1/3 mx-auto text-center pt-16 pb-32">
-        Create
+      <div className="lg:max-w-screen-lg mx-auto">
+        <div className="lg:flex gap-6">
+          <div className="lg:w-8/12 mb-4 lg:mb-0 bg-black/5 dark:bg-white/5 p-6 rounded-lg">
+            {/* STEP 1 */}
+            <div className="flex items-center bg-black/5 hover:bg-black/[.08] dark:bg-white/5 dark:hover:bg-white/[.08] cursor-pointer rounded px-5 py-4 mb-8">
+              <div className="grow uppercase text-xs opacity-40">
+                Nft Settings
+              </div>
+              <MinusIcon size={16} className="opacity-40" />
+            </div>
+
+            {/* STEP 1 CONTENT */}
+            <div className="px-4 mb-8">
+              <div className="space-y-3 pb-6">
+                <div className="text-xs opacity-20">Recipient Address</div>
+                <TextInput placeholder="e.g. 0x00" />
+              </div>
+
+              <div className="space-y-3 pb-6">
+                <div className="flex">
+                  <div className="text-xs opacity-20 grow">Vest</div>
+                  <div className="text-xs opacity-20">
+                    Available 214.57368 VELO
+                  </div>
+                </div>
+                <TextInput addon={<>test</>} placeholder="WIP" />
+              </div>
+
+              {/* TODO: Use Datepicker from latest flowbite*/}
+              <div className="space-y-3 pb-6">
+                <div className="text-xs opacity-20">Start Date</div>
+                <TextInput
+                  addon={<CalendarIcon size={16} />}
+                  value="20/10/2023"
+                />
+              </div>
+
+              <div className="flex gap-6">
+                <div className="space-y-3 pb-6 grow">
+                  <div className="text-xs opacity-20">Vesting Duration</div>
+                  <div className="relative">
+                    <TextInput value="1" />
+                    <Select
+                      sizing="sm"
+                      className="absolute top-1.5 right-1.5 w-20"
+                      color="gray"
+                    >
+                      <option>Mths</option>
+                      <option>Years</option>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="space-y-3 pb-6 grow">
+                  <div className="text-xs opacity-20">Cliff Duration</div>
+                  <div className="relative">
+                    <TextInput value="0" />
+                    <Select
+                      sizing="sm"
+                      className="absolute top-1.5 right-1.5 w-20"
+                      color="gray"
+                    >
+                      <option>Days</option>
+                      <option>Mths</option>
+                      <option>Years</option>
+                    </Select>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-3 pb-6 grow">
+                <div className="bg-white/[.02] rounded-lg flex items-center px-3.5 py-3">
+                  <div className="text-xs opacity-20 grow">Transferable</div>
+                  <ToggleSwitch
+                    checked
+                    label={<div className="opacity-40 text-xs">ON</div>}
+                    color="green"
+                    size="sm"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* STEP 2 */}
+            <div className="flex items-center bg-black/5 hover:bg-black/[.08] dark:bg-white/5 dark:hover:bg-white/[.08] cursor-pointer rounded px-5 py-4 mb-8">
+              <div className="grow uppercase text-xs opacity-40">
+                Nft Info (Optional)
+              </div>
+              <PlusIcon size={16} />
+            </div>
+
+            {/* STEP 2 CONTENT */}
+            <div className="px-4">
+              <div className="space-y-3 pb-6">
+                <div className="text-xs opacity-20">Recipient Name</div>
+                <TextInput placeholder="e.g. Velodrome Foundation" />
+              </div>
+
+              <div className="space-y-3 pb-6">
+                <div className="text-xs opacity-20">Tags</div>
+                <TextInput placeholder="Search for exiting or create new tag ..." />
+              </div>
+
+              <div className="space-y-3 pb-6">
+                <div className="text-xs opacity-20">Description</div>
+                <Textarea rows={4} />
+              </div>
+            </div>
+          </div>
+          <div className="lg:w-6/12 p-6 sm:p-10 bg-black/[.08] dark:bg-white/[.08] bg-opacity-70 dark:bg-opacity-50 rounded-lg">
+            <div className="space-y-6 pb-8">
+              <div className="space-y-1.5">
+                <div className="flex gap-2 items-center">
+                  Unknown Recipient
+                  <Tooltip content="No extra info">
+                    <InfoIcon size={12} className="opacity-40" />
+                  </Tooltip>
+                </div>
+                <div className="text-xs opacity-20">0x0951...d68Da</div>
+              </div>
+              <div>
+                <img src="temp-graph-dark.png" />
+              </div>
+              <div className="space-y-1.5 border-t border-black/5 dark:border-white/5 pt-6">
+                <div className="text-xs opacity-20">Amount</div>
+                <div>42,300.00</div>
+                <div className="text-xs opacity-40">
+                  Starts in a month, ends in 3 years
+                </div>
+              </div>
+            </div>
+
+            <Button className="w-full">Create</Button>
+          </div>
+        </div>
       </div>
 
       <Footer />

diff --git a/src/pages/Dashboard/components/govnft.tsx b/src/pages/Dashboard/components/govnft.tsx
@@ -0,0 +1,70 @@
+import { Tooltip } from "flowbite-react";
+import { Info as InfoIcon } from "lucide-react";
+
+import NavLink from "../../../components/NavLink";
+
+export default function Govnft({ withdraw }) {
+  return (
+    <div className="bg-black/5 hover:bg-black/[.07] dark:bg-white/5 dark:hover:bg-white/[.07] rounded text-sm p-5">
+      <div className="flex gap-24 items-center">
+        <div className="flex gap-24 grow">
+          <div className="flex gap-8 items-center">
+            <div className="bg-black/10 dark:bg-white/5 rounded w-32 h-20 flex items-center justify-center text-xs opacity-40 font-bold">
+              ID #30
+            </div>
+            <div className="space-y-1.5">
+              <div className="flex gap-2 items-center">
+                Unknown Recipient
+                <Tooltip content="No extra info">
+                  <InfoIcon size={12} className="opacity-40" />
+                </Tooltip>
+              </div>
+              <div className="text-xs opacity-20">0x0951...d68Da</div>
+              <div className="text-xs opacity-40 flex gap-1.5">
+                <NavLink
+                  href="/delegate"
+                  className="underline hover:no-underline"
+                >
+                  Delegate
+                </NavLink>{" "}
+                &middot;{" "}
+                <NavLink
+                  href="/transfer"
+                  className="underline hover:no-underline"
+                >
+                  Transfer
+                </NavLink>
+              </div>
+            </div>
+          </div>
+          <div className="flex gap-16 items-center">
+            <div className="space-y-1.5">
+              <div className="text-xs opacity-20">Amount</div>
+              <div>42,300.00</div>
+              <div className="text-xs opacity-40">Started a month ago</div>
+            </div>
+
+            <div className="space-y-1.5">
+              <div className="text-xs opacity-20">Vesting</div>
+              <div>42,300.00</div>
+              <div className="text-xs opacity-40">Ends in 2 years</div>
+            </div>
+          </div>
+        </div>
+
+        {withdraw && (
+          <div className="space-y-1.5 text-right pr-2">
+            <div className="text-xs opacity-20">Withdrawable</div>
+            <div>100.00</div>
+            <NavLink
+              href="#"
+              className="block text-primary text-xs underline hover:no-underline"
+            >
+              Withdraw
+            </NavLink>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Dashboard/components/govnfts.tsx b/src/pages/Dashboard/components/govnfts.tsx
@@ -0,0 +1,18 @@
+import Govnft from "./Govnft";
+
+export default function Govnfts() {
+  return (
+    <div className="space-y-2.5">
+      <div className="pb-2 text-sm">Available for witdrawals</div>
+      <Govnft withdraw={true} />
+      <Govnft withdraw={true} />
+
+      <div className="pb-2 pt-12 text-sm">Vesting</div>
+      <Govnft withdraw={false} />
+      <Govnft withdraw={false} />
+      <Govnft withdraw={false} />
+      <Govnft withdraw={false} />
+      <Govnft withdraw={false} />
+    </div>
+  );
+}
diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -1,14 +1,15 @@
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
+import Govnfts from "./components/Govnfts";
 
 export default function Dashboard() {
   return (
     <div className="container mx-auto px-4 lg:px-8">
       {/* @ts-ignore */}
       <Header />
 
-      <div className="md:w-1/2 xl:w-1/3 mx-auto text-center pt-16 pb-32">
-        DASH
+      <div className="max-w-screen-xl mx-auto">
+        <Govnfts />
       </div>
 
       <Footer />

diff --git a/src/pages/Delegate/index.tsx b/src/pages/Delegate/index.tsx
@@ -1,3 +1,6 @@
+import { Button, TextInput, Tooltip } from "flowbite-react";
+import { Info as InfoIcon, Wallet as WalletIcon } from "lucide-react";
+
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 
@@ -7,8 +10,57 @@ export default function Create() {
       {/* @ts-ignore */}
       <Header />
 
-      <div className="md:w-1/2 xl:w-1/3 mx-auto text-center pt-16 pb-32">
-        Create
+      <div className="lg:max-w-screen-lg mx-auto">
+        <div className="lg:flex gap-6">
+          <div className="lg:w-8/12 mb-4 lg:mb-0 bg-black/5 dark:bg-white/5 p-6 sm:p-12 rounded-lg">
+            <div className="text-xs opacity-20">Delegate GOVNFT</div>
+
+            <div className="flex items-center py-6 my-6 border-y border-black/5 dark:border-white/5">
+              <div className="space-y-1.5 grow">
+                <div className="flex gap-2 items-center">
+                  Unknown Recipient
+                  <Tooltip content="No extra info">
+                    <InfoIcon size={12} className="opacity-40" />
+                  </Tooltip>
+                </div>
+                <div className="text-xs opacity-20">0x0951...d68Da</div>
+              </div>
+              <div className="bg-black/10 dark:bg-white/5 rounded px-8 h-12 flex items-center justify-center text-xs opacity-40 font-bold">
+                ID #30
+              </div>
+            </div>
+
+            <div className="flex gap-16 items-center pb-6 mb-6 border-b border-black/5 dark:border-white/5">
+              <div className="space-y-1.5">
+                <div className="text-xs opacity-20">Amount</div>
+                <div>42,300.00</div>
+                <div className="text-xs opacity-40">Started a month ago</div>
+              </div>
+
+              <div className="space-y-1.5">
+                <div className="text-xs opacity-20">Vesting</div>
+                <div>42,300.00</div>
+                <div className="text-xs opacity-40">Ends in 2 years</div>
+              </div>
+            </div>
+
+            <div className="space-y-3 pb-2">
+              <div className="text-xs opacity-20">Address</div>
+              <TextInput placeholder="e.g. 0x00" />
+            </div>
+          </div>
+          <div className="lg:w-6/12 p-6 sm:p-10 bg-black/[.08] dark:bg-white/[.08] bg-opacity-70 dark:bg-opacity-50 rounded-lg">
+            <div className="flex flex-col items-center justify-center h-full space-y-6 py-8">
+              <div className="bg-white/5 p-3 rounded-full">
+                <WalletIcon size={16} />
+              </div>
+              <div className="text-xs opacity-40 w-48 text-center">
+                Enter the wallet address where the lock will be delegated
+              </div>
+              <Button className="px-6">Deletage</Button>
+            </div>
+          </div>
+        </div>
       </div>
 
       <Footer />