Finished snippets and categories styling

Author: technoph1le

src/App.tsx

@@ -5,7 +5,7 @@ import SnippetList from "./layouts/SnippetList";
 
 const App = () => {
   return (
-    <div className="container">
+    <div className="container flow" data-flow-space="lg">
       <Header />
       <div className="heading">
         <h1 className="main-title">
@@ -16,7 +16,7 @@ const App = () => {
           search and copy!
         </p>
       </div>
-      <main>
+      <main className="main">
         <Sidebar />
         <SnippetList />
       </main>

src/components/Category.tsx

@@ -2,8 +2,10 @@ import { CategoryProps } from "../types";
 
 const Category = ({ title }: CategoryProps) => {
   return (
-    <li>
-      <a href="#">{title}</a>
+    <li className={`category ${title === "API Requests" ? "active" : null}`}>
+      <a className="category__link" href="#">
+        {title}
+      </a>
     </li>
   );
 };

src/components/CategoryList.tsx

@@ -21,7 +21,7 @@ const CategoryList = () => {
   ];
 
   return (
-    <ul role="list">
+    <ul role="list" className="categories">
       {sampleData.map((category) => (
         <Category {...category} />
       ))}

src/components/Icons.tsx

@@ -92,14 +92,14 @@ export const GitHubIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
 
 export const SwitchIcon = ({ fillColor = DEFAULT_ICON_COLOR }) => (
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3 9.5H21L15 3.5M21.3995 14.5H3.3995L9.3995 20.5"
+      d="M2.75 8.70833H19.25L13.75 3.20833M19.6162 13.2917H3.11621L8.61621 18.7917"
       stroke={fillColor}
       strokeWidth="2"
       strokeLinecap="round"

src/components/LanguageSwitch.tsx

@@ -1,14 +1,13 @@
-import slugify from "../utils/slugify";
+import { SwitchIcon } from "./Icons";
 
 const LanguageSwitch = () => {
-  const sampleData = ["JavaScript", "Python", "Java"];
+  // const sampleData = ["JavaScript", "Python", "Java"];
 
   return (
-    <select id="languages">
-      {sampleData.map((lan) => (
-        <option value={slugify(lan)}>{lan}</option>
-      ))}
-    </select>
+    <div className="language-switcher">
+      <h2 className="section-title">JavaScript</h2>
+      <SwitchIcon />
+    </div>
   );
 };
 

src/layouts/Footer.tsx

@@ -1,5 +1,42 @@
+import Logo from "../components/Logo";
+
 const Footer = () => {
-  return <p>Footer</p>;
+  return (
+    <footer className="footer">
+      <div className="footer__content flow" data-flow-space="sm">
+        <Logo />
+        <p>
+          <b>QuickSnip</b> is your go-to collection of handy code snippets,
+          making repetitive tasks easier and faster for developers across
+          different programming languages.
+        </p>
+        <p>
+          Built by <a href="#">Technophile</a>, and powered by awesome{" "}
+          <a href="#">community</a>.
+        </p>
+      </div>
+      <nav>
+        <ul className="flow" data-flow-space="sm">
+          <li>
+            <a href="#">Add your own snippet</a>
+          </li>
+          <li>
+            <a href="#">Edit this page on GitHub</a>
+          </li>
+        </ul>
+      </nav>
+      <nav>
+        <ul className="flow" data-flow-space="sm">
+          <li>
+            <a href="#">See the community</a>
+          </li>
+          <li>
+            <a href="#">Support this project</a>
+          </li>
+        </ul>
+      </nav>
+    </footer>
+  );
 };
 
 export default Footer;

src/layouts/Sidebar.tsx

@@ -3,7 +3,7 @@ import LanguageSwitch from "../components/LanguageSwitch";
 
 const Sidebar = () => {
   return (
-    <aside>
+    <aside className="sidebar flow">
       <LanguageSwitch />
       <CategoryList />
     </aside>

src/layouts/SnippetList.tsx

@@ -9,12 +9,21 @@ const SnippetList = () => {
     {
       title: "POST Request",
     },
+    {
+      title: "fetch() Request",
+    },
+    {
+      title: "Async/Await",
+    },
+    {
+      title: "Fetching with Axios",
+    },
   ];
 
   return (
-    <section>
-      <h2>API Requests</h2>
-      <ul role="list">
+    <section className="flow">
+      <h2 className="section-title">API Requests</h2>
+      <ul role="list" className="snippets">
         {sampleData.map((snippet) => (
           <SnippetCard {...snippet} />
         ))}

src/styles/main.css

@@ -135,19 +135,34 @@ ul:where([role="list"]),
 ol:where([role="list"]) {
   list-style: none;
   padding-left: 0;
+  margin: 0;
 }
 
 /*------------------------------------*\
   #UTILS
 \*------------------------------------*/
 /* Layout */
 .container {
-  max-width: 80rem;
+  max-width: 90rem;
   width: 100%;
   padding-inline: clamp(1rem, 4vw, 3rem);
   margin-inline: auto;
 }
 
+.flow {
+  --_flow-space: 1em;
+  display: grid;
+  gap: var(--_flow-space);
+
+  &[data-flow-space="sm"] {
+    --_flow-space: 0.5em;
+  }
+
+  &[data-flow-space="lg"] {
+    --_flow-space: 2em;
+  }
+}
+
 /* Text */
 .main-title {
   font-size: var(--fs-800);
@@ -258,17 +273,78 @@ ol:where([role="list"]) {
 .heading {
   display: grid;
   gap: 0.5em;
-  padding-block: 2rem;
+  padding-bottom: 1rem;
   text-align: center;
 }
 
+.main {
+  display: grid;
+  gap: 2rem;
+  align-items: start;
+
+  @media (width > 50em) {
+    grid-template-columns: 2fr 5fr;
+  }
+}
+
+/*------------------------------------*\
+  #SIDEBAR
+\*------------------------------------*/
+.language-switcher {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.language-switcher option {
+  font-size: var(--fs-400);
+}
+
+.categories {
+  display: grid;
+  background-color: var(--bg-secondary);
+  padding: 1.25rem;
+  padding-bottom: 2rem;
+  border-radius: var(--br-lg);
+}
+
+.category {
+  border-bottom: 1px solid var(--border-color);
+  border-radius: var(--br-md);
+}
+
+.category.active {
+  background-image: var(--gradient-secondary);
+  border: 1px solid var(--border-color);
+}
+
+.category__link {
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+  padding: 0.75em 1em;
+  width: 100%;
+
+  &:is(:hover, :focus) {
+    color: var(--text-primary);
+  }
+}
+
 /*------------------------------------*\
   #SNIPPET
 \*------------------------------------*/
+.snippets {
+  --_gap: 1.5rem;
+  display: grid;
+  gap: var(--_gap);
+  align-content: start;
+  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
+}
+
 .snippet {
   display: grid;
   gap: 0.5em;
-  width: 300px;
+  width: 100%;
   background-color: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: var(--br-lg);
@@ -297,3 +373,25 @@ ol:where([role="list"]) {
   justify-content: space-between;
   align-items: center;
 }
+
+/*------------------------------------*\
+  #FOOTER
+\*------------------------------------*/
+.footer {
+  display: flex;
+  gap: 2rem;
+  justify-content: space-between;
+  padding-bottom: 3rem;
+}
+
+.footer a {
+  color: var(--text-secondary);
+
+  &:is(:hover, :focus) {
+    color: var(--text-primary);
+  }
+}
+
+.footer__content {
+  width: 60ch;
+}