Merge pull request #51 from OH-Fasilkom-UI/feat/gilang

Add toast
OH-Fasilkom-UI · Oct 12, 2023 · 85044c3 · 85044c3
2 parents 59beaa5 + 6c39dff
commit 85044c3
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@mantine/core": "^6.0.19",
     "@mantine/hooks": "^6.0.19",
     "@mantine/next": "^6.0.19",
+    "@mantine/notifications": "^6.0.21",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,8 +1,12 @@
 import Image from "next/image";
 import { Footer as BaseFooter } from "@mantine/core";
+import { notifications } from '@mantine/notifications';
 import Link from "next/link";
 
+const disabled = true;
+
 const Footer = () => {
+
     return (
         <section>
             <Image src="/background-footer.png" alt="" width={1440} height={700} layout="responsive"/>
@@ -27,21 +31,35 @@ const Footer = () => {
                             >
                                 About Fasilkom
                             </Link>
-                            <Link
-                                href={"/registration"}
+                            {/* <Link
+                                href={"/register"}
                                 className="hover:text-aqua-2 transition-colors duration-300 ease-out"
                             >
                                 Registration Page
-                            </Link>
+                            </Link> */}
                             <Link
-                                href={"/walloffame"}
-                                className="hover:text-aqua-2 transition-colors duration-300 ease-out"
+                                href={""}
+                                onClick={() => {
+                                    disabled && notifications.show({
+                                        title: 'Coming soon~',
+                                        message: '',
+                                        color: "red"
+                                    })
+                                }}
+                                className={` transition-colors duration-300 ease-out ${disabled ? "opacity-50" : "hover:text-aqua-2"}`}
                             >
                                 Wall of Fame
                             </Link>
                             <Link
-                                href={"/merchandise"}
-                                className="hover:text-aqua-2 transition-colors duration-300 ease-out"
+                                href={""}
+                                onClick={() => {
+                                    disabled && notifications.show({
+                                        title: 'Coming soon~',
+                                        message: '',
+                                        color: "red"
+                                    })
+                                }}
+                                className={` transition-colors duration-300 ease-out ${disabled ? "opacity-50" : "hover:text-aqua-2"}`}
                             >
                                 Merchandise
                             </Link>
@@ -121,7 +139,15 @@ const Footer = () => {
                                 <p
                                     onClick={() => {
                                         navigator.clipboard.writeText("[email protected]")
-                                        alert("Copied")
+                                        notifications.show({
+                                            title: 'Copied',
+                                            message: '',
+                                            styles: (theme) => ({
+                                                root: {
+                                                    '&::before': { backgroundColor: "#24F462" },
+                                                }
+                                            })
+                                        })
                                     }}
                                     className="hover:text-aqua-2 transition-colors duration-300 ease-out flex text-white active:text-white-3 hover:cursor-grab active:cursor-grabbing"
                                 >

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -2,12 +2,47 @@ import { useWindowScroll } from '@mantine/hooks';
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router';
+import { notifications } from '@mantine/notifications';
 import { useState } from 'react'
 import { HiBuildingOffice2, HiHome, HiShoppingBag, HiUserGroup } from "react-icons/hi2"
 import { STYLE_GUIDE } from './elements/Button/constant';
 import { HiMenuAlt3 } from 'react-icons/hi';
 import { HiX } from 'react-icons/hi';
 
+const NavLink = ({
+    children,
+    isActive,
+    href,
+    className,
+    disabled,
+    onClick,
+}: {
+    children: React.ReactNode;
+    isActive: boolean;
+    href: string;
+    className?: string;
+    disabled: boolean;
+    onClick?: () => any
+}) => {
+    return (
+        <Link 
+            onClick={() => {
+                disabled &&
+                notifications.show({
+                    title: 'Coming soon~',
+                    message: '',
+                    color: "red"
+                })
+            }}
+            href={href}
+            aria-disabled={disabled}
+            className={`flex items-center gap-2 font-medium ${isActive ? "text-screaminGreen-4" : "text-gray-100"} ${disabled ? "opacity-20" : "opacity-70"} ${className}`}
+        >
+            {children}
+        </Link>
+    )
+}
+
 const Navbar = () => {
     const open_reg = new Date("2023-10-17T12:00:00+0700") < new Date()
 
@@ -17,33 +52,12 @@ const Navbar = () => {
 
     const [isOpen, setIsOpen] = useState(false);
 
-    const NavLink = ({
-        children,
-        isActive,
-        href,
-        className,
-        disabled,
-    }: {
-        children: React.ReactNode;
-        isActive: boolean;
-        href: string;
-        className?: string;
-        disabled: boolean;
-    }) => {
-        return (
-            <Link onClick={() => setIsOpen(false)} href={href} className={`flex items-center gap-2 font-medium ${isActive ? "text-screaminGreen-4" : ""} ${disabled ? "opacity-20 pointer-events-none" : "opacity-100"} ${className}`}>
-                {children}
-            </Link>
-        )
-    }
-
-
     return (
         <nav className={`border-2 bg-black border-gray-100 fixed top-0 sm:top-2 left-1/2 -translate-x-1/2 w-full sm:w-4/5 sm:rounded-md  sm:border-2 flex items-center px-5 py-2 gap-4 justify-between transition-all duration-500 z-50 backdrop-blur ${y > 100 ? "sm:top-6 sm:scale-95 border-opacity-20" : "border-opacity-10"}`}>
             <Link href="/">
                 <Image src="/logo.png" alt="OH 2023" width={64} height={64} />
             </Link>
-            <div className={`z-20 fixed top-0 ${isOpen ? "left-0" : "-left-full"} sm:static transition-all duration-500 bg-black-1 sm:bg-transparent w-full font-normal sm:w-max h-screen sm:h-full flex flex-col sm:flex-row text-xl sm:text-base bg-opacity-10 backdrop-blur items-center gap-4 flex-1 justify-evenly`}>
+            <div onClick={() => setIsOpen(false)} className={`z-20 fixed top-0 ${isOpen ? "left-0" : "-left-full"} sm:static transition-all duration-500 bg-black-1 sm:bg-transparent w-full font-normal sm:w-max h-screen sm:h-full flex flex-col sm:flex-row text-xl sm:text-base bg-opacity-10 backdrop-blur items-center gap-4 flex-1 justify-evenly`}>
                 <Link href="/" className='flex items-center justify-center sm:hidden'>
                     <Image src="/logo.png" alt="OH 2023" width={64} height={64} />
                     <span className='text-white font-satoshi text-3xl font-semibold text-white-1'>OH 2023</span>
@@ -56,11 +70,11 @@ const Navbar = () => {
                     <HiBuildingOffice2 />
                     <span className='text-white'>About Fasilkom</span>
                 </NavLink>
-                <NavLink href='/wall-of-fame' isActive={router.pathname === "/wall-of-fame"} disabled>
+                <NavLink href='' isActive={router.pathname === "/wall-of-fame"} disabled>
                     <HiUserGroup />
                     <span className='text-white'>Wall of Fame</span>
                 </NavLink>
-                <NavLink href='/merchandise' isActive={router.pathname === "/merchandise"} disabled>
+                <NavLink href='' isActive={router.pathname === "/merchandise"} disabled>
                     <HiShoppingBag />
                     <span className='text-white'>Merchandise</span>
                 </NavLink>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import '@/styles/globals.css'
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { MantineProvider } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
 import Footer from '@/components/Footer';
 import Navbar from '@/components/Navbar';
 
@@ -23,6 +24,7 @@ export default function App(props: AppProps) {
           colorScheme: 'dark',
         }}
       >
+        <Notifications/>
         <Navbar />
         <Component {...pageProps} />
         <Footer />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -24,7 +24,7 @@ export default function Home() {
             FASILKOM 2023
           </h1>
           <div className="font-satoshi text-center flex flex-col items-center text-lg w-full">
-            <h2 className="text-2xl mb-2 text-white-1 font-bold font-satoshi">Open registration</h2>
+            <h2 className="text-2xl mb-2 font-semibold font-satoshi">Open registration</h2>
             <Image src="/home/countdown-arrow.svg" alt="" width={100} height={100}/>
             <Countdown date={next_countdown} />
             <h3 className="text-sm sm:text-lg font-bold">17 Oktober 2023, 12:00 GMT+7</h3>