finished header for now and cleaned up and refactored

psycho-baller · Sep 9, 2023 · 5753591 · 5753591
1 parent b5c8a2e
commit 5753591
Show file tree

Hide file tree

Showing 52 changed files with 535 additions and 198 deletions.
diff --git a/assets/SnipTube logo-dark.png b/assets/SnipTube logo-dark.png
diff --git a/assets/SnipTube logo-dark.svg b/assets/SnipTube logo-dark.svg
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "plasmo": "^0.82.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "tailwind-merge": "^1.14.0",
     "youtube-caption-extractor": "^1.4.3",
     "zustand": "^4.4.0"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/images/SnipTube-dark.png b/public/images/SnipTube-dark.png
diff --git a/public/next.svg b/public/next.svg
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/app/(site)/layout.tsx b/src/app/(site)/layout.tsx
@@ -8,17 +8,18 @@ import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 const inter = Inter({ subsets: ["latin"] });
 import "../globals.css";
+import type { ReactNode } from "react";
 
 // import ToasterContext from "../context/ToastContext";
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="eng">
       <body className={`dark:bg-black ${inter.className}`}>
         <ThemeProvider
           enableSystem={false}
           attribute="class"
-          defaultTheme="light"
+          defaultTheme="dark"
         >
           <Lines />
           <Header />

diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
@@ -35,9 +35,9 @@ export default function Home() {
       <CTA />
       <FAQ />
       {/* <Testimonial /> */}
-      <Pricing />
+      {/* <Pricing /> */}
       <Contact />
-      <Blog />
+      {/* <Blog /> */}
       <OpenSource />
     </main>
   );

diff --git a/src/app/components/Blog/BlogItem.tsx b/src/app/components/Blog/BlogItem.tsx
@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import type{ Blog } from "@/types/blog";
+import type{ Blog } from "~types/blog";
 import Link from "next/link";
 import { motion } from "framer-motion";
 

diff --git a/src/app/components/Blog/blogData.tsx b/src/app/components/Blog/blogData.tsx
@@ -1,4 +1,4 @@
-import type{ Blog } from "@/types/blog";
+import type{ Blog } from "~types/blog";
 
 const BlogData: Blog[] = [
   { 

diff --git a/src/app/components/Brands/SingleBrand.tsx b/src/app/components/Brands/SingleBrand.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from "react";
 import Image from "next/image";
-import type { Brand } from "@/types/brand";
+import type { Brand } from "~types/brand";
 import { motion } from "framer-motion";
 
 const SingleBrand = ({ brand }: { brand: Brand }) => {

diff --git a/src/app/components/Brands/brandData.tsx b/src/app/components/Brands/brandData.tsx
@@ -1,4 +1,4 @@
-import type { Brand } from "@/types/brand";
+import type { Brand } from "~types/brand";
 
 const brandData: Brand[] = [
   {

diff --git a/src/app/components/Demo/SnipBtn.tsx b/src/app/components/Demo/SnipBtn.tsx
@@ -1,5 +1,5 @@
 import { useMemo, type FC } from "react";
-import { useSnipsStore } from "src/utils/store";
+import { useSnipsStore } from "~utils/store";
 
 interface Props extends React.ComponentPropsWithoutRef<"button"> {
   videoRef: React.RefObject<HTMLVideoElement>;

diff --git a/src/app/components/Demo/index.tsx b/src/app/components/Demo/index.tsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import { motion } from "framer-motion";
 import { useState, useEffect, useRef, type FC } from "react";
 import SnipBtn from "./SnipBtn";
-import { useSnipsStore } from "src/utils/store";
+import { useSnipsStore } from "~utils/store";
 import { getSnips } from "src/utils/storage";
 // import "./styles.module.css";
 

diff --git a/src/app/components/FAQ/faqData.tsx b/src/app/components/FAQ/faqData.tsx
@@ -1,4 +1,4 @@
-import type { FAQ } from "@/types/faq";
+import type { FAQ } from "~types/faq";
 
 const faqData: FAQ[] = [
   {

diff --git a/src/app/components/Features/SingleFeature.tsx b/src/app/components/Features/SingleFeature.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type { Feature } from "@/types/feature";
+import type { Feature } from "~types/feature";
 import Image from "next/image";
 import { motion } from "framer-motion";
 

diff --git a/src/app/components/Features/featuresData.tsx b/src/app/components/Features/featuresData.tsx
@@ -1,4 +1,4 @@
-import type { Feature } from "@/types/feature";
+import type { Feature } from "~types/feature";
 
 const featuresData: Feature[] = [
   {

diff --git a/src/app/components/FeaturesTab/FeaturesTabItem.tsx b/src/app/components/FeaturesTab/FeaturesTabItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type { FeatureTab } from "@/types/featureTab";
+import type { FeatureTab } from "~types/featureTab";
 import Image from "next/image";
 
 const FeaturesTabItem = ({ featureTab }: { featureTab: FeatureTab }) => {

diff --git a/src/app/components/FeaturesTab/featuresTabData.tsx b/src/app/components/FeaturesTab/featuresTabData.tsx
@@ -1,4 +1,4 @@
-import type { FeatureTab } from "@/types/featureTab";
+import type { FeatureTab } from "~types/featureTab";
 
 const featuresTabData: FeatureTab[] = [
   {

diff --git a/src/app/components/Header/NavLink.tsx b/src/app/components/Header/NavLink.tsx
@@ -0,0 +1,30 @@
+
+import Link from "next/link";
+import { forwardRef, type ComponentPropsWithRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface NavLinkProps extends ComponentPropsWithRef<"a"> {
+  isActive?: boolean;
+  id?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>((props, ref) => {
+  const { href, type, isActive, className, ...rest } = props;
+  const activeClassName = isActive ? "text-blue-500 dark:text-blue-400" : "";
+
+  return (
+    <Link
+      href={href}
+      ref={ref}
+      className={twMerge(
+        "block px-4 py-2 rounded-md font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100",
+        activeClassName,
+        className
+      )}
+      {...rest}
+    />
+  );
+});
+
+NavLink.displayName = "NavLink";
+export default NavLink;
diff --git a/src/app/components/Header/Navigation.tsx b/src/app/components/Header/Navigation.tsx
@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { usePathname } from "next/navigation";
+// import siteConfig from "data/config";
+import { useScrollSpy } from "~hooks/use-scrollspy";
+// import ThemeToggle from "./theme-toggle";
+// import MobileNavButton from "components/mobile-nav/MobileNavButton";
+// import MobileNavContent from "components/mobile-nav/MobileNavContent";
+import NavLink from "./NavLink";
+import { headerRoutes } from "~config/header";
+
+const Navigation = () => {
+  const pathname = usePathname();
+  // const activeId = useScrollSpy(
+  //   headerRoutes.filter(({ path }) => path).map(({ path }) => `#${path}`),
+  //   {
+  //     threshold: 0.75,
+  //   }
+  // );
+
+  const mobileNavBtnRef = useRef(null);
+
+  return (
+    <div className="flex space-x-2">
+      {headerRoutes.map(({ path, id, ...props }, i) => (
+        <NavLink
+          key={i}
+          href={path || "/"}
+          // isActive={(path && pathname.startsWith(path)) || pathname === path}
+          {...props}
+        >
+          {props.title}
+        </NavLink>
+      ))}
+
+      {/* <ThemeToggle /> */}
+
+      {/* <MobileNavButton
+        ref={mobileNavBtnRef}
+        aria-label="Open Menu"
+        onClick={MobileNavButton.onClick}
+      />
+
+      <MobileNavContent
+        isOpen={MobileNavContent.isOpen}
+        onClose={MobileNavContent.onClose}
+      /> */}
+    </div>
+  );
+};
+
+export default Navigation;