fix(components page & minimal refactoring elsewhere): add icons to co…

…mpoents page and refactor

Refactor components page to include the icons available to this project; move components related to
the home page to that subfolder; update Hero Section, Button Component and Search Box to use Icon
component

src/features/ui/SearchBox/SearchBox.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
-import { search } from "@/assets";
 import debounce from "lodash/debounce";
 import PropTypes from "prop-types";
+import { Icon } from "@/features/ui/Icon";
 export const SearchBox = ({ onSearch }) => {
   const [localTerm, setLocalTerm] = useState("");
   const debouncedSearch = debounce(onSearch, 1500);
@@ -34,10 +34,10 @@ export const SearchBox = ({ onSearch }) => {
           className="w-full p-2 pl-6 text-sm rounded-l-full lg:text-base bg-earlyDawn-100 focus:outline-none placeholder:text-lava-300 text-lava-950 focus:ring-none"
         />
         <button
-          className="px-4 rounded-r-full bg-tangerine-400 hover:bg-tangerine-600"
+          className="px-4 rounded-r-full text-white bg-tangerine-400 hover:bg-tangerine-600 flex flex-col align-middle justify-center text-3xl"
           onClick={() => handleSearch()}
         >
-          <img src={search} alt="search icon" />
+          <Icon name="search" />
         </button>
       </form>
     </div>

src/features/ui/index.js

@@ -3,3 +3,4 @@ export * from "./StarRating";
 export * from "./SearchBox";
 export * from "./Footer";
 export * from "./Icon";
+export * from "./Heading";

src/pages/components/Buttons.jsx

@@ -0,0 +1,58 @@
+import { Button } from "@/features/ui/Button";
+import { Icon } from "@/features/ui/Icon";
+import { Heading } from "@/features/ui/Heading";
+
+function Buttons() {
+  return (
+    <section id="buttons">
+      <Heading level="h3" variant="tangerine">
+        Buttons
+      </Heading>
+      <div className="grid gap-3 grid-cols-2">
+        <ul className="grid gap-3">
+          <li>
+            <Button variant="primary" size="small">
+              Small, primary button
+              <Icon name="right-arrow" />
+            </Button>
+          </li>
+          <li>
+            <Button variant="primary" size="medium">
+              Medium, primary button
+              <Icon name="right-arrow" />
+            </Button>
+          </li>
+          <li>
+            <Button variant="primary" size="large">
+              Large, primary button!
+              <Icon name="right-arrow" />
+            </Button>
+          </li>
+        </ul>
+
+        <ul className="grid gap-3">
+          <li>
+            <Button variant="secondary" size="small">
+              Small, secondary button
+              <Icon name="right-arrow" className="scale-175" />
+            </Button>
+          </li>
+          <li>
+            <Button variant="secondary" size="medium">
+              Medium, secondary button
+              <Icon name="right-arrow" className="scale-175" />
+            </Button>
+          </li>
+          <li>
+            <Button variant="secondary" size="large">
+              Large, secondary button!
+              <Icon name="right-arrow" className="scale-175" />
+            </Button>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+}
+
+export default Buttons;

src/pages/components/Components.jsx

@@ -0,0 +1,20 @@
+import Buttons from "./Buttons";
+import Icons from "./Icons";
+import Headings from "./Headings";
+
+import { Heading } from "@/features/ui/Heading";
+
+function Components() {
+  return (
+    <section className="p-10">
+      <Heading level="h2" variant="lava" className="mb-6">
+        Components
+      </Heading>
+      <Buttons />
+      <Icons />
+      <Headings />
+    </section>
+  );
+}
+
+export default Components;