Merge pull request #44 from GenerateNU/cc-18-basic-home-page-and-nav-bar

Cc 18 basic home page and nav bar
GenerateNU · Nov 7, 2023 · 5fab4ac · 5fab4ac
2 parents 838d705 + e103ba1
commit 5fab4ac
Show file tree

Hide file tree

Showing 8 changed files with 355 additions and 7 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "axios": "^1.5.1",
+    "babel-plugin-macros": "^3.1.0",
+    "heroicons": "^2.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

diff --git a/client/src/components/CollectionItemUpdated.tsx b/client/src/components/CollectionItemUpdated.tsx
@@ -0,0 +1,33 @@
+import { Gift } from "../types.tsx";
+
+type CollectionItemProps = {
+  name: string;
+  gifts: Gift[];
+};
+
+function CollectionItem({ name }: CollectionItemProps) {
+  const circleStyle = {
+    width: "100px", 
+    height: "100px",
+    backgroundColor: "lightgrey",
+    borderRadius: "50%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "10px",
+  };
+
+
+
+  return (
+    <div>
+      <div style={circleStyle}>
+      </div>
+      <h2 className="text-sm text-black text-center" style={{marginBottom: "15px"}}>{name}</h2>
+    </div>
+  );
+}
+
+export default CollectionItem;
+
diff --git a/client/src/components/GiftSortNavBar.tsx b/client/src/components/GiftSortNavBar.tsx
@@ -0,0 +1,95 @@
+import { useState } from "react";
+
+const GiftSortNavbar = () => {
+  const [activeButton, setActiveButton] = useState("");
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selectedFeature, setSelectedFeature] = useState("Featured");
+
+  const handleButtonClick = (buttonName: any) => {
+    setActiveButton(buttonName);
+  };
+
+  const handleDropdownToggle = () => {
+    setDropdownOpen(!dropdownOpen);
+  };
+
+  const handleFeatureSelect = (feature: any) => {
+    setSelectedFeature(feature);
+    setDropdownOpen(false);
+  };
+
+  const buttonStyle =
+    "px-4 py-2 text-black text-xs rounded-md bg-gray-100 border-gray-400";
+  const activeButtonStyle = "bg-gray-400";
+
+  return (
+    <div className="bg-gray-100 p-2">
+    <div className="flex" style={{ maxWidth: "1440px" }}>
+      <div className="flex space-x-2 "  style={{ marginRight: "680px" }}>
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "Shop" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("Shop")}
+          >
+            Shop All Gifts
+          </button>
+        </div>
+
+          <div className="ml-auto flex items-center"> 
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth="1.5"
+              stroke="black"
+              className="w-4 h-4"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
+              />
+            </svg>
+            <div className="relative">
+              <button
+                className={`${buttonStyle} ${
+                  activeButton === "SignUp" ? activeButtonStyle : ""
+                }`}
+                onClick={handleDropdownToggle}
+              >
+                Sort By: {selectedFeature}
+              </button>
+              {dropdownOpen && (
+                <div className="absolute mt-2 right-0 border border-gray-300 rounded-md bg-gray-100 text-black text-sm shadow-lg z-10"> 
+                  <ul>
+                    <li
+                      onClick={() => handleFeatureSelect("Featured")}
+                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                    >
+                      Featured
+                    </li>
+                    <li
+                      onClick={() => handleFeatureSelect("Price")}
+                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                    >
+                      Price
+                    </li>
+                    <li
+                      onClick={() => handleFeatureSelect("Occasion")}
+                      className="cursor-pointer px-4 py-2 hover:bg-gray-300"
+                    >
+                      Occassion
+                    </li>
+                    {/* Add more options here */}
+                  </ul>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+  );
+};
+
+export default GiftSortNavbar;
diff --git a/client/src/components/NavBarUpdated.tsx b/client/src/components/NavBarUpdated.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+
+const Navbar = () => {
+  const [activeButton, setActiveButton] = useState("");
+
+  const handleButtonClick = (buttonName: any) => {
+    setActiveButton(buttonName);
+  };
+
+  const buttonStyle =
+    "px-4 py-2 text-black text-xs rounded-md border-gray-400";
+  const activeButtonStyle = "bg-gray-400";
+
+  return (
+    <div className="bg-gray-100 p-2">
+      <div className="flex" style={{ maxWidth: "1440px" }}>
+        <div className="flex space-x-2">
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "Shop" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("Shop")}
+          >
+            Shop
+          </button>
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "Request" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("Request")}
+          >
+            Request
+          </button>
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "More" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("More")}
+          >
+            More
+          </button>
+        </div>
+        <div className="ml-auto flex items-center">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
+    <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clip-rule="evenodd" />
+  </svg>
+
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-4 h-4" style={{ marginRight: '10px' }}>
+    <path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
+  </svg>
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "LogIn" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("LogIn")}
+          >
+            Log In
+          </button>
+          <button
+            className={`${buttonStyle} ${
+              activeButton === "SignUp" ? activeButtonStyle : ""
+            }`}
+            onClick={() => handleButtonClick("SignUp")}
+          >
+            Sign Up
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/client/src/components/SearchBar.tsx b/client/src/components/SearchBar.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+const SearchBar = () => {
+  const [searchText, setSearchText] = useState('');
+
+  const handleInputChange = (e: any) => {
+    setSearchText(e.target.value);
+  };
+
+  return (
+    <div className="bg-gray-100 p-4 w-full">
+      <div className="flex items-center relative">
+        <input
+          type="text"
+          className="w-full px-4 py-2 rounded-lg border border-gray-300 pl-10" 
+          placeholder="Search"
+          value={searchText}
+          onChange={handleInputChange}
+          style={{ color: 'black' }}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="black"
+          className="w-4 h-4 absolute left-3 top-3/5" 
+          style={{ pointerEvents: 'none' }} 
+        >
+          <path fillRule="evenodd" d="M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z" clipRule="evenodd" />
+        </svg>
+      </div>
+    </div>
+  );
+};
+
+export default SearchBar;
+
+
+
diff --git a/client/src/components/UpdatedGiftItem.tsx b/client/src/components/UpdatedGiftItem.tsx
@@ -0,0 +1,33 @@
+type GiftItemProps = {
+  name: string;
+  price: number;
+};
+
+function UpdatedGiftItem({ name, price }: GiftItemProps) {
+  return (
+    <div className="relative flex flex-col bg-gray-100 flex-start">
+      <div className="bg-gray-200 w-40 h-40 mx-auto mb-2 relative">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth="1.5"
+          stroke="black"
+          className="w-6 h-6 absolute bottom-2 right-2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+          />
+        </svg>
+      </div>
+      <div className="" style={{ marginLeft: "40px", marginBottom: "5px"}}>
+        <h2 className="text-sm text-black font-bold">{name}</h2>
+        <h2 className="text-xs text-black">${price}</h2>
+      </div>
+    </div>
+  );
+}
+
+export default UpdatedGiftItem;