update product

creativetimofficial · Nov 21, 2023 · 2a26680 · 2a26680
1 parent edacd9b
commit 2a26680
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,5 @@
 # Change Log
 
-## [1.0.0] 2023-10-18
+## [1.0.0] 2023-11-21
 
 ### Original Release
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -27,7 +27,13 @@ export function Footer() {
           </div>
         </div>
         <div className="flex flex-col md:flex-row items-center !justify-between">
-          <Typography variant="h6" className="text-gray-900">
+          <Typography
+            as="a"
+            href="https://www.material-tailwind.com"
+            target="_blank"
+            variant="h6"
+            className="text-gray-900"
+          >
             Material Tailwind
           </Typography>
           <ul className="flex justify-center my-4 md:my-0 w-max mx-auto items-center gap-4">
@@ -64,7 +70,15 @@ export function Footer() {
           color="blue-gray"
           className="text-center mt-12 font-normal !text-gray-700"
         >
-          All rights reserved. &copy; {CURRENT_YEAR} Material Tailwind
+          &copy; {CURRENT_YEAR} Made with{" "}
+          <a href="https://www.material-tailwind.com" target="_blank">
+            Material Tailwind
+          </a>{" "}
+          by{" "}
+          <a href="https://www.creative-tim.com" target="_blank">
+            Creative Tim
+          </a>
+          .
         </Typography>
       </div>
     </footer>

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -17,16 +17,17 @@ import {
 
 interface NavItemProps {
   children: React.ReactNode;
+  href?: string;
 }
 
-function NavItem({ children }: NavItemProps) {
+function NavItem({ children, href }: NavItemProps) {
   return (
     <li>
       <Typography
         as="a"
-        href="#"
+        href={href || "#"}
+        target={href ? "_blank" : "_self"}
         variant="paragraph"
-        color="blue-gray"
         className="flex items-center gap-2 font-medium"
       >
         {children}
@@ -47,15 +48,19 @@ const NAV_MENU = [
   {
     name: "Blocks",
     icon: Squares2X2Icon,
+    href: "https://www.materila-tailwind.com/blocks",
   },
   {
     name: "Docs",
     icon: CommandLineIcon,
+    href: "https://www.material-tailwind.com/docs/react/installation",
   },
 ];
 
 export function Navbar() {
   const [open, setOpen] = React.useState(false);
+  const [isScrolling, setIsScrolling] = React.useState(false);
+
   const handleOpen = () => setOpen((cur) => !cur);
 
   React.useEffect(() => {
@@ -65,34 +70,56 @@ export function Navbar() {
     );
   }, []);
 
+  React.useEffect(() => {
+    function handleScroll() {
+      if (window.scrollY > 0) {
+        setIsScrolling(true);
+      } else {
+        setIsScrolling(false);
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
   return (
     <MTNavbar
       shadow={false}
       fullWidth
-      color="transparent"
-      className="border-0 z-50 absolute"
+      blurred={false}
+      color={isScrolling ? "white" : "transparent"}
+      className="fixed top-0 z-50 border-0"
     >
       <div className="container mx-auto flex items-center justify-between">
-        <Typography color="white" className="text-lg font-bold">
+        <Typography
+          color={isScrolling ? "blue-gray" : "white"}
+          className="text-lg font-bold"
+        >
           Material Tailwind
         </Typography>
-        <ul className="ml-10 hidden items-center gap-6 lg:flex">
-          {NAV_MENU.map(({ name, icon: Icon }) => (
-            <NavItem key={name}>
-              <Icon className="h-5 w-5 text-white" />
-              <span className="text-white">{name}</span>
+        <ul
+          className={`ml-10 hidden items-center gap-6 lg:flex ${
+            isScrolling ? "text-gray-900" : "text-white"
+          }`}
+        >
+          {NAV_MENU.map(({ name, icon: Icon, href }) => (
+            <NavItem key={name} href={href}>
+              <Icon className="h-5 w-5" />
+              <span>{name}</span>
             </NavItem>
           ))}
         </ul>
         <div className="hidden items-center gap-4 lg:flex">
-          <Button color="white" variant="text">
+          <Button color={isScrolling ? "gray" : "white"} variant="text">
             Log in
           </Button>
-          <Button color="white">button</Button>
+          <Button color={isScrolling ? "gray" : "white"}>button</Button>
         </div>
         <IconButton
           variant="text"
-          color="white"
+          color={isScrolling ? "gray" : "white"}
           onClick={handleOpen}
           className="ml-auto inline-block lg:hidden"
         >
@@ -105,9 +132,9 @@ export function Navbar() {
       </div>
       <Collapse open={open}>
         <div className="container mx-auto mt-4 rounded-lg bg-white px-6 py-5">
-          <ul className="flex flex-col gap-4">
-            {NAV_MENU.map(({ name, icon: Icon }) => (
-              <NavItem key={name}>
+          <ul className="flex flex-col gap-4 text-gray-900">
+            {NAV_MENU.map(({ name, icon: Icon, href }) => (
+              <NavItem key={name} href={href}>
                 <Icon className="h-5 w-5" />
                 {name}
               </NavItem>
@@ -123,5 +150,4 @@ export function Navbar() {
   );
 }
 
-
 export default Navbar;
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,14 +1,18 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "forceConsistentCasingInFileNames": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }