[FEATURE] Added Copy button with Toast notification

Added Copy Button which copies the code snippet and gives a toast notification saying Code is Copied.

Author: AJAmit17

components/codePreview/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import "highlight.js/styles/atom-one-light.css";
 import { Algorithm } from "lib/models";
 import {
@@ -27,7 +27,9 @@ import {
   MoreHoriz,
   OpenInNew,
   PlayArrow,
+  FileCopyOutlined,
 } from "@material-ui/icons";
+import { toast } from "react-hot-toast";
 import NextLink from "next/link";
 import { StringParam, useQueryParam, withDefault } from "next-query-params";
 import classes from "./style.module.css";
@@ -45,6 +47,12 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
   const fabRef = useRef();
   const [mobileMoreMenuOpen, setMobileMoreMenuOpen] = useState(false);
 
+  const copyCode = useCallback(async () => {
+    const codeText = document.querySelector(".style_pre__k555n")?.textContent;
+    await navigator.clipboard.writeText(codeText);
+    toast.success("Code Snippet Copied!");
+  }, []);
+
   return (
     <div className={`${classes.container}`}>
       <div className={classes.codeBox}>
@@ -86,6 +94,10 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
                 <Fullscreen />
                 <Typography>{t("fullscreen")}</Typography>
               </MenuItem>
+              <MenuItem onClick={() => copyCode()}>
+                <FileCopyOutlined />
+                <Typography>{t("Copy Code")}</Typography>
+              </MenuItem>
               <Link
                 href={implementations[selectedLanguague].url}
                 target="_blank"
@@ -101,6 +113,9 @@ export default function CodePreview({ algorithm }: { algorithm: Algorithm }) {
         ) : (
           <>
             <div className={classes.buttonsTop}>
+              <IconButton className={classes.copycode} onClick={copyCode}>
+                <FileCopyOutlined />
+              </IconButton>
               <Button
                 startIcon={<OpenInNew />}
                 href={implementations[selectedLanguague].url}

components/searchBar/index.tsx

@@ -38,21 +38,13 @@ export default function SearchBar({
 
   function handleInput(event: FormEvent) {
     setQuery((event.target as HTMLInputElement).value);
-    const searchValue = (event.target as HTMLInputElement).value;
     // When input value is null, set error & empty state to `true` and do nothing.
 
-    if (!smallScreen) {
-      if (searchValue) {
-        debounce(() => {
-          router.push(`/search?q=${searchValue}`);
-        });
-      } else {
-        debounce(() => {
-          router.push(`/`);
-        });
-      }
-    }
-    if (!searchValue) {
+    if (!smallScreen)
+      debounce(() => {
+        router.push(`/search?q=${(event.target as HTMLInputElement).value}`);
+      });
+    if (!(event.target as HTMLInputElement).value) {
       setIsEmpty(true);
       setIsError(true);
       return;

hooks/toast-provider.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { Toaster } from "react-hot-toast";
+
+export default function ToastProvider() {
+  return <Toaster />;
+}

package.json

@@ -47,6 +47,7 @@
     "react": "^17.0.2",
     "react-devicons": "^2.11.0-rev.2",
     "react-dom": "^17.0.2",
+    "react-hot-toast": "^2.4.1",
     "rehype-highlight": "<5.0.0",
     "rehype-stringify": "<9.0.0",
     "remark-gfm": "<2.0.0",

pages/_app.tsx

@@ -11,6 +11,7 @@ import { QueryProvider } from "hooks/query";
 import { DarkThemeProvider } from "hooks/darkTheme";
 import DefaultLayout from "layouts/default";
 import { NextQueryParamProvider } from "next-query-params";
+import ToastProvider from "hooks/toast-provider";
 
 function MyApp({ Component, pageProps }: AppProps) {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
@@ -32,6 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
           <QueryProvider>
             <NextQueryParamProvider>
+              <ToastProvider />
               <Head />
               <CssBaseline />
               <NextNprogress

yarn.lock

@@ -2317,6 +2317,11 @@ globby@^11.1.0:
     merge2 "^1.4.1"
     slash "^3.0.0"
 
+goober@^2.1.10:
+  version "2.1.14"
+  resolved "https://registry.yarnpkg.com/goober/-/goober-2.1.14.tgz#4a5c94fc34dc086a8e6035360ae1800005135acd"
+  integrity sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -3802,6 +3807,13 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-hot-toast@^2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.4.1.tgz#df04295eda8a7b12c4f968e54a61c8d36f4c0994"
+  integrity sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==
+  dependencies:
+    goober "^2.1.10"
+
 react-i18next@^11.8.13:
   version "11.13.0"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-11.13.0.tgz#7b6f23f717154a44cf3f70d62a9368152bf8a73f"