Fixed homepage redirect and modal appearance

technoph1le · technoph1le · commit b1e7c4c6af7a · 2024-11-06T00:22:15.000+02:00
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>QuickSnip</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,27 +2,41 @@ import Footer from "./layouts/Footer";
 import Header from "./layouts/Header";
 import SnippetList from "./components/SnippetList";
 import Sidebar from "./layouts/Sidebar";
+import { Navigate, useLocation } from "react-router-dom";
+import SnippetModal from "./components/SnippetModal";
 
 const App = () => {
+  const location = useLocation();
+
+  if (location.pathname === "/") {
+    return <Navigate to="/javascript/dom-manipulation" replace />;
+  }
+
   return (
-    <div className="container flow" data-flow-space="lg">
-      <Header />
-      <div className="heading">
-        <h1 className="main-title">
-          Made to save your <span className="text-highlight">time.</span>
-        </h1>
-        <p>
-          Find the necessary snippet in seconds, across multiple languages. Just
-          search and copy!
-        </p>
+    <>
+      {/* Had to put the modal in App.tsx as well for it to work despite
+        it's also being created in HTML with portal. 
+        If you know why it's that way, please let me know. */}
+      <SnippetModal />
+      <div className="container flow" data-flow-space="xl">
+        <Header />
+        <div className="heading">
+          <h1 className="main-title">
+            Made to save your <span className="text-highlight">time.</span>
+          </h1>
+          <p>
+            Find the necessary snippet in seconds, across multiple languages.
+            Just search and copy!
+          </p>
+        </div>
+        <main className="main">
+          <Sidebar />
+          <SnippetList />
+        </main>
+        <hr className="divider" />
+        <Footer />
       </div>
-      <main className="main">
-        <Sidebar />
-        <SnippetList />
-      </main>
-      <hr className="divider" />
-      <Footer />
-    </div>
+    </>
   );
 };
 
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,10 +1,11 @@
-import { ReactNode } from "react";
+import { MouseEventHandler, ReactNode } from "react";
 
 type ButtonProps = {
   as?: "button" | "link";
   href?: string;
   className?: string;
   isIcon?: boolean;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
   children: ReactNode;
 };
 
@@ -14,11 +15,13 @@ const Button = ({
   className,
   children,
   isIcon,
+  onClick,
   ...props
 }: ButtonProps) => {
   return as === "button" ? (
     <button
-      className={`button ${isIcon ?? "button--icon"} ${className}`}
+      className={`button ${isIcon ? "button--icon" : ""} ${className}`}
+      onClick={onClick}
       {...props}
     >
       {children}
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -126,6 +126,21 @@ export const ExpandIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
   </svg>
 );
 
+export const CloseIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
+  <svg
+    width="31"
+    height="30"
+    viewBox="0 0 31 30"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.5 23.75L6.75 22L13.75 15L6.75 8L8.5 6.25L15.5 13.25L22.5 6.25L24.25 8L17.25 15L24.25 22L22.5 23.75L15.5 16.75L8.5 23.75Z"
+      fill={fillColor}
+    />
+  </svg>
+);
+
 export const CopyIcon = ({
   gradient_1 = DEFAULT_GRADIENT_COLORS[0],
   gradient_2 = DEFAULT_GRADIENT_COLORS[1],
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
@@ -3,16 +3,16 @@ import ReactDOM from "react-dom";
 import { useNavigate, useParams } from "react-router-dom";
 import { LanguageData, SnippetType } from "../types";
 import { getSnippetByTitleAndCategory } from "../utils/filters";
+import { CloseIcon } from "./Icons";
+import Button from "./Button";
 
 const SnippetModal = () => {
-  console.log("hello modal");
   const modalRoot = document.getElementById("modal-root");
   if (!modalRoot) return null;
 
   const { language, category, snippet_title } = useParams();
   const [snippet, setSnippet] = useState<SnippetType | null>(null);
   const navigate = useNavigate();
-  console.log(language, category, snippet_title);
 
   useEffect(() => {
     const fetchSnippets = async () => {
@@ -37,15 +37,36 @@ const SnippetModal = () => {
     };
 
     fetchSnippets();
-  }, []);
+  }, [snippet_title]);
 
   if (!snippet) return null;
 
   return ReactDOM.createPortal(
     <div className="modal-overlay">
-      <div className="modal-content">
-        {snippet.title}
-        <button onClick={() => navigate(-1)}>Close</button>
+      <div className="modal | flow" data-flow-space="lg">
+        <div className="modal__header">
+          <h2 className="section-title">{snippet.title}</h2>
+          <Button isIcon={true} onClick={() => navigate(-1)}>
+            <CloseIcon />
+          </Button>
+        </div>
+        <div className="code-preview">
+          <pre>{snippet.code}</pre>
+        </div>
+        <p>
+          <b>Description: </b>
+          {snippet.description}
+        </p>
+        <p>
+          Contributed by <b>{snippet.author}</b>
+        </p>
+        <ul role="list" className="modal__tags">
+          {snippet.tags.map((tag) => (
+            <li key={tag} className="modal__tag">
+              {tag}
+            </li>
+          ))}
+        </ul>
       </div>
     </div>,
     modalRoot
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -40,6 +40,7 @@
   --border-color: var(--clr-neutral-500);
 
   --ff-primary: "Source Sans 3", sans-serif;
+  --ff-mono: monospace;
 
   --fs-400: 1rem;
   --fs-500: 1.125rem;
@@ -143,7 +144,7 @@ ol:where([role="list"]) {
 \*------------------------------------*/
 /* Layout */
 .container {
-  max-width: 90rem;
+  max-width: 100rem;
   width: 100%;
   padding-inline: clamp(1rem, 4vw, 3rem);
   margin-inline: auto;
@@ -153,14 +154,18 @@ ol:where([role="list"]) {
   --_flow-space: 1em;
   display: grid;
   gap: var(--_flow-space);
+}
 
-  &[data-flow-space="sm"] {
-    --_flow-space: 0.5em;
-  }
+.flow[data-flow-space="sm"] {
+  --_flow-space: 0.5em;
+}
 
-  &[data-flow-space="lg"] {
-    --_flow-space: 2em;
-  }
+.flow[data-flow-space="lg"] {
+  --_flow-space: 1.5em;
+}
+
+.flow[data-flow-space="xl"] {
+  --_flow-space: 2em;
 }
 
 /* Text */
@@ -342,7 +347,6 @@ ol:where([role="list"]) {
   --_gap: 1.5rem;
   display: grid;
   gap: var(--_gap);
-  align-content: start;
   grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
 }
 
@@ -400,20 +404,44 @@ ol:where([role="list"]) {
   z-index: 1000;
 }
 
-.modal-content {
-  background-color: #2e2e2e;
-  color: #ffffff;
+.modal {
+  background-color: var(--bg-secondary);
   padding: 2rem;
   width: 80%;
   max-width: 600px;
-  border-radius: 8px;
+  border-radius: var(--br-lg);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   position: relative;
+  gap: 1rem;
+}
+
+.modal__header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
   gap: 1rem;
 }
 
+.code-preview {
+  background-color: var(--bg-primary);
+  padding: 0.5em 1em;
+  border-radius: var(--br-md);
+}
+
+.modal__tags {
+  display: flex;
+  gap: 1em;
+}
+
+.modal__tag {
+  padding: 0.5em 1em;
+  border: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+  text-transform: lowercase;
+  font-family: var(--ff-mono);
+  font-weight: var(--fw-bold);
+}
+
 /*------------------------------------*\
   #FOOTER
 \*------------------------------------*/
