add/notification

ArunGovil · Jan 22, 2023 · ce8f9f8 · ce8f9f8
1 parent ba8db69
commit ce8f9f8
Show file tree

Hide file tree

Showing 11 changed files with 92 additions and 24 deletions.
diff --git a/components/CodeCard.tsx b/components/CodeCard.tsx
@@ -1,17 +1,20 @@
-import { useState } from "react";
+import { useState, useContext } from "react";
+import { Notification } from "../context/NotificationContext";
 interface CodeCardProps {
   id: number;
   title: string;
   code: string;
 }
 
 export default function CodeCard({ id, title, code }: CodeCardProps) {
+  const { handleNotification } = useContext(Notification);
   const [isCopied, setCopied] = useState(false);
   const copyToClipboard = () => {
     const reset = () => {
       setCopied(false);
     };
     navigator.clipboard.writeText(code);
+    handleNotification();
     setCopied(true);
     setTimeout(reset, 2000);
   };

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -9,12 +9,8 @@ export default function Footer() {
         <Image src={logo} alt="cmdr" className="w-12" />
       </Link>
 
-      <a
-        target="_blank"
-        rel="noreferrer"
-        href="https://github.com/ArunGovil/cmdr"
-      >
-        <p className="font-medium text-sm hover:text-orange-400">@arungovil</p>
+      <a rel="noreferrer" href="https://github.com/ArunGovil/cmdr">
+        <p className="font-medium text-sm hover:text-orange-400">@github</p>
       </a>
     </nav>
   );

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -13,9 +13,9 @@ export default function Header() {
       <a
         target="_blank"
         rel="noreferrer"
-        href="https://github.com/ArunGovil/cmdr"
+        href="https://github.com/ArunGovil/cmdr#how-do-i-add-a-command"
       >
-        <p className="font-medium text-sm hover:text-orange-400">@github</p>
+        <p className="font-medium text-sm hover:text-orange-400">add new</p>
       </a>
     </nav>
   );

diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -4,9 +4,9 @@ export default function Hero() {
   return (
     <div className="flex flex-col justify-center items-center p-4 w-full h-[70vh] max-w-5xl">
       <p className="text-5xl font-semibold">every command ever!</p>
-      <p className="text-md font-thin mt-6">
-        You don&apos;t need to know everything, you just need to know where to
-        find it, when you need it.
+      <p className="text-md font-thin mt-6 text-slate-200">
+        You don&apos;t need to remember everything, you just need to know where
+        to find it, when you need it.
       </p>
       <DemoSearch />
     </div>

diff --git a/components/NotificationBadge.tsx b/components/NotificationBadge.tsx
@@ -0,0 +1,23 @@
+const NotificationBadge = () => {
+  return (
+    <div className="fixed flex gap-2 items-center bottom-10 right-5 border border-orange-400 rounded-md p-3 bg-black">
+      <svg
+        className="w-5 h-5 rounded-md "
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+        ></path>
+      </svg>
+      <p>copied to clipboard</p>
+    </div>
+  );
+};
+
+export default NotificationBadge;
diff --git a/components/SearchListing.tsx b/components/SearchListing.tsx
@@ -12,12 +12,7 @@ export default function SearchListing({ searchData }: SearchListingProps) {
         {searchData.length > 0 ? (
           <ul className="mb-8 min-h-[80vh] w-full">
             {searchData.map((item: any, id: any) => (
-              <CodeCard
-                key={id}
-                id={id}
-                title={item.title}
-                code={item.code}
-              />
+              <CodeCard key={id} id={id} title={item.title} code={item.code} />
             ))}
           </ul>
         ) : (

diff --git a/components/index.ts b/components/index.ts
@@ -11,6 +11,7 @@ export { default as PrimarySearch } from "./PrimarySearch";
 export { default as SearchListing } from "./SearchListing";
 export { default as SecondarySearch } from "./SecondarySearch";
 export { default as DemoSearch } from "./DemoSearch";
+export { default as NotificationBadge } from "./NotificationBadge";
 
 //buttons
 export { default as AddNew } from "./AddNew";
diff --git a/context/NotificationContext.tsx b/context/NotificationContext.tsx
@@ -0,0 +1,32 @@
+import React, { useState, createContext, useMemo } from "react";
+
+export const Notification = createContext(null);
+
+const NotificationContext = ({ children }: any) => {
+  const [notification, setNotification] = useState(false);
+
+  const handleNotification = () => {
+    const reset = () => {
+      setNotification(false);
+    };
+
+    setNotification(true);
+    setTimeout(reset, 2000);
+  };
+
+  const NotificationState = useMemo(
+    () => ({
+      notification,
+      handleNotification,
+    }),
+    [notification]
+  );
+
+  return (
+    <Notification.Provider value={NotificationState}>
+      {children}
+    </Notification.Provider>
+  );
+};
+
+export default NotificationContext;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,6 +1,11 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import NotificationContext from "../context/NotificationContext";
+import type { AppProps } from "next/app";
+import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <NotificationContext>
+      <Component {...pageProps} />
+    </NotificationContext>
+  );
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,7 +1,10 @@
 import Head from "next/head";
-import { Header, Hero, Listing, About, Footer } from "../components";
+import { useContext } from "react";
+import { Header, Hero, Listing, About, Footer, NotificationBadge } from "../components";
+import { Notification } from "../context/NotificationContext";
 
 export default function Home() {
+  const {notification} = useContext(Notification);
   return (
     <div>
       <Head>
@@ -15,6 +18,7 @@ export default function Home() {
         <Listing />
         <About />
         <Footer />
+        {notification && <NotificationBadge />}
       </main>
     </div>
   );

diff --git a/pages/search.tsx b/pages/search.tsx
@@ -1,9 +1,17 @@
 import Head from "next/head";
-import { useState } from "react";
-import { Header, Footer, SearchListing, SecondarySearch } from "../components";
+import { useState, useContext } from "react";
+import {
+  Header,
+  Footer,
+  SearchListing,
+  SecondarySearch,
+  NotificationBadge,
+} from "../components";
 import content from "../content/content.json";
+import { Notification } from "../context/NotificationContext";
 
 export default function Details() {
+  const { notification } = useContext(Notification);
   const [data, setData] = useState(content);
   const filterData = (query: string) => {
     const filtered = content.filter((item: any) => {
@@ -28,6 +36,7 @@ export default function Details() {
         <Header />
         <SecondarySearch onChange={filterData} />
         <SearchListing searchData={data} />
+        {notification && <NotificationBadge />}
         <Footer />
       </main>
     </div>