fix issue with header

webdevcody · Feb 2, 2024 · 531f0c8 · 531f0c8
1 parent 4d1c967
commit 531f0c8
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 118 deletions.
diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx
@@ -3,16 +3,15 @@
 import { useAction, useMutation } from "convex/react";
 import { api } from "../../../convex/_generated/api";
 import { UploadButton, UploadFileResponse } from "@xixixao/uploadstuff/react";
-import "@xixixao/uploadstuff/react/styles.css";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import Image from "next/image";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { useToast } from "@/components/ui/use-toast";
 import clsx from "clsx";
 import { useRouter } from "next/navigation";
-import { getImageUrl } from "@/lib/utils";
+import { cn, getImageUrl } from "@/lib/utils";
 import { UpgradeButton } from "@/components/upgrade-button";
 import { Id } from "../../../convex/_generated/dataModel";
 
@@ -30,7 +29,7 @@ export default function CreatePage() {
   const [images, setImages] = useState<Id<"_storage">[]>([]);
 
   return (
-    <div className="">
+    <div>
       <h1 className="text-4xl font-bold mb-8">Create a Thumbnail Test</h1>
 
       <p className="text-lg max-w-md mb-8">
@@ -96,7 +95,7 @@ export default function CreatePage() {
         }}
       >
         <div className="flex flex-col gap-4 mb-8">
-          <Label htmlFor="title">Your Test Title</Label>
+          <Label htmlFor="title">Youtube Title</Label>
           <Input
             id="title"
             type="text"
@@ -132,6 +131,14 @@ export default function CreatePage() {
               {images.length > 0 && "Another"} Thumbnail Image
             </Label>
             <UploadButton
+              className={(combinedState) => {
+                return cn(buttonVariants());
+              }}
+              content={(progress) =>
+                progress === null || progress === 0
+                  ? `Choose File`
+                  : "Uploading..."
+              }
               uploadUrl={generateUploadUrl}
               fileTypes={["image/*"]}
               onUploadComplete={async (uploaded: UploadFileResponse[]) => {

diff --git a/src/app/footer.tsx b/src/app/footer.tsx
@@ -5,9 +5,10 @@ export function Footer() {
         <div className="md:flex md:justify-between">
           <div className="mb-6 md:mb-0">
             <a href="https://flowbite.com/" className="flex items-center">
-              <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
+              <span className="hidden md:block self-center text-2xl font-semibold whitespace-nowrap dark:text-white">
                 ThumbnailCritique.com
               </span>
+              <div className="hidden md:flex">HELLO WORLD</div>
             </a>
           </div>
           <div className="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">

diff --git a/src/app/header.tsx b/src/app/header.tsx
@@ -14,6 +14,8 @@ export function Header() {
 
   return (
     <div className="border-b dark:bg-gray-900">
+      <MobileNav isOpen={isOpen} toggleOpen={toggleOpen} />
+
       <div className="h-16 container flex justify-between items-center">
         <Link
           href="/"
@@ -29,34 +31,27 @@ export function Header() {
           <span className="text-xs md:text-md">ThumbnailCritique</span>
         </Link>
 
-        <MobileNav isOpen={isOpen} toggleOpen={toggleOpen} />
-
-        <div className="gap-4 hidden sm:flex md:gap-8 text-xs md:text-base">
-          {!isLoading && (
+        <div className="gap-4 hidden md:flex md:gap-8 text-xs md:text-base">
+          {!isLoading && isAuthenticated && (
             <>
-              {isAuthenticated && (
-                <>
-                  <Link href="/dashboard" className="link">
-                    Dashboard
-                  </Link>
-                  <Link href="/create" className="link">
-                    Create
-                  </Link>
-                  <Link href="/explore" className="link">
-                    Explore
-                  </Link>
-                  <Link href="/following" className="link">
-                    Following
-                  </Link>
-                  <Link href="/account" className="link">
-                    Account
-                  </Link>
-                </>
-              )}
+              <Link href="/dashboard" className="link">
+                Dashboard
+              </Link>
+              <Link href="/create" className="link">
+                Create
+              </Link>
+              <Link href="/explore" className="link">
+                Explore
+              </Link>
+              <Link href="/following" className="link">
+                Following
+              </Link>
+              <Link href="/account" className="link">
+                Account
+              </Link>
             </>
           )}
         </div>
-
         <div className="flex gap-4 items-center">
           {!isLoading && (
             <>
@@ -68,6 +63,7 @@ export function Header() {
               {!isAuthenticated && <SignInButton />}
             </>
           )}
+
           <ModeToggle />
 
           <MenuToggle toggle={toggleOpen} />

diff --git a/src/app/mobile-nav.tsx b/src/app/mobile-nav.tsx
@@ -38,95 +38,93 @@ export default function MobileNav({
   const { signOut } = useClerk();
 
   return (
-    <>
-      <motion.nav
-        initial={false}
-        animate={isOpen ? "open" : "closed"}
-        custom={height}
-        className={`flex justify-end w-full sm:hidden ${
-          isOpen ? "" : "pointer-events-none"
-        }`}
-        ref={containerRef}
+    <motion.nav
+      initial={false}
+      animate={isOpen ? "open" : "closed"}
+      custom={height}
+      className={`flex justify-end w-full sm:hidden ${
+        isOpen ? "" : "pointer-events-none"
+      }`}
+      ref={containerRef}
+    >
+      <motion.div
+        className="absolute inset-0 top-16 left-0 w-full dark:bg-gray-900 bg-white z-50"
+        variants={sidebar}
+      />
+      <motion.ul
+        variants={variants}
+        className="absolute inset-0 grid w-full gap-3 py-16 z-50 "
       >
-        <motion.div
-          className="absolute inset-0 top-16 left-0 w-full dark:bg-gray-900 bg-white z-50"
-          variants={sidebar}
-        />
-        <motion.ul
-          variants={variants}
-          className="absolute inset-0 grid w-full gap-3 py-16 z-50 "
-        >
-          <div className="dark:text-white text-black flex flex-col items-center">
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-            <MenuItem key="Dashboard">
-              <Link
-                href="/dashboard"
-                onClick={() => toggleOpen()}
-                className="flex w-full font-semibold capitalize"
-              >
-                Dashboard
-              </Link>
-            </MenuItem>
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-            <MenuItem key="Create">
-              <Link
-                href="/create"
-                onClick={() => toggleOpen()}
-                className="flex w-full font-semibold capitalize"
-              >
-                Create
-              </Link>
-            </MenuItem>
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-            <MenuItem key="Explore">
-              <Link
-                href="/explore"
-                onClick={() => toggleOpen()}
-                className="flex w-full font-semibold capitalize"
-              >
-                Explore
-              </Link>
-            </MenuItem>
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-
-            <MenuItem key="Following">
-              <Link
-                href="/following"
-                onClick={() => toggleOpen()}
-                className="flex w-full font-semibold capitalize"
-              >
-                Following
-              </Link>
-            </MenuItem>
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-
-            <MenuItem key="Account">
-              <Link
-                href="/account"
-                onClick={() => toggleOpen()}
-                className="flex w-full font-semibold capitalize"
-              >
-                Account
-              </Link>
-            </MenuItem>
-            <MenuItem className="my-3 h-px w-full bg-gray-300" />
-
-            <MenuItem key="SignOut">
-              <Link
-                href="/"
-                onClick={() => {
-                  signOut();
-                  toggleOpen();
-                }}
-                className="flex w-full font-semibold capitalize"
-              >
-                Sign Out
-              </Link>
-            </MenuItem>
-          </div>
-        </motion.ul>
-      </motion.nav>
-    </>
+        <div className="dark:text-white text-black flex flex-col items-center">
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+          <MenuItem key="Dashboard">
+            <Link
+              href="/dashboard"
+              onClick={() => toggleOpen()}
+              className="flex w-full font-semibold capitalize"
+            >
+              Dashboard
+            </Link>
+          </MenuItem>
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+          <MenuItem key="Create">
+            <Link
+              href="/create"
+              onClick={() => toggleOpen()}
+              className="flex w-full font-semibold capitalize"
+            >
+              Create
+            </Link>
+          </MenuItem>
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+          <MenuItem key="Explore">
+            <Link
+              href="/explore"
+              onClick={() => toggleOpen()}
+              className="flex w-full font-semibold capitalize"
+            >
+              Explore
+            </Link>
+          </MenuItem>
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+
+          <MenuItem key="Following">
+            <Link
+              href="/following"
+              onClick={() => toggleOpen()}
+              className="flex w-full font-semibold capitalize"
+            >
+              Following
+            </Link>
+          </MenuItem>
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+
+          <MenuItem key="Account">
+            <Link
+              href="/account"
+              onClick={() => toggleOpen()}
+              className="flex w-full font-semibold capitalize"
+            >
+              Account
+            </Link>
+          </MenuItem>
+          <MenuItem className="my-3 h-px w-full bg-gray-300" />
+
+          <MenuItem key="SignOut">
+            <Link
+              href="/"
+              onClick={() => {
+                signOut();
+                toggleOpen();
+              }}
+              className="flex w-full font-semibold capitalize"
+            >
+              Sign Out
+            </Link>
+          </MenuItem>
+        </div>
+      </motion.ul>
+    </motion.nav>
   );
 }