From 0e9201429c48e22e93f6687a55ba3f42d0fafea1 Mon Sep 17 00:00:00 2001
From: christodharma <13521009@std.stei.itb.ac.id>
Date: Fri, 17 Nov 2023 08:46:04 +0700
Subject: [PATCH] feat: searchattribute on navigation bar
---
.../NavigationBar/SearchBar/index.tsx | 77 +++++++++++++++++++
src/components/NavigationBar/index.tsx | 12 +--
src/pages/CatalogPage/index.tsx | 2 +-
3 files changed, 84 insertions(+), 7 deletions(-)
create mode 100644 src/components/NavigationBar/SearchBar/index.tsx
diff --git a/src/components/NavigationBar/SearchBar/index.tsx b/src/components/NavigationBar/SearchBar/index.tsx
new file mode 100644
index 0000000..17e1e26
--- /dev/null
+++ b/src/components/NavigationBar/SearchBar/index.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { MagnifyingGlassIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
+
+const FilterMenu = () => {
+ return (
+ <div
+ className="relative bottom-[-55%]"
+ id="filterMenuContainer">
+ <div className="rounded-xl absolute w-[60vw] h-fit -translate-x-[50%] bg-slate-300 py-4 px-2 text-left flex flex-col gap-2">
+ <h1 className="text-xl font-bold">Search Attribute</h1>
+ <div className="flex bg-slate-200 rounded-xl p-4">
+ <form name="typeFilter"
+ className="text-black grow flex flex-col">
+ <p>Type: </p>
+ <div className="flex gap-1">
+ <input
+ type="radio" id="userFilter" name="typeFilter" value={"userFilter"}></input>
+ <label
+ htmlFor="userFilter">User</label>
+ </div>
+ <div className="flex gap-1">
+ <input
+ type="radio" id="productFilter" name="typeFilter" value={"productFilter"}></input>
+ <label htmlFor="productFilter">Product</label>
+ </div>
+ </form>
+ <form name="sortFilter"
+ className="text-black grow flex flex-col">
+ <p>Sort: </p>
+ <div className="flex gap-1">
+ <input
+ type="radio" id="ascendingFilter" name="sortFilter" value={"ascendingFilter"}></input>
+ <label
+ htmlFor="ascendingFilter">Ascending</label>
+ </div>
+ <div className="flex gap-1">
+ <input
+ type="radio" id="descendingFilter" name="sortFilter" value={"descendingFilter"}></input>
+ <label htmlFor="descendingFilter">Descending</label>
+ </div>
+ </form>
+ </div>
+ <button className="btn-primary ml-auto bg-secondary rounded-xl px-4" type="submit" name="typeFilter">Set</button>
+ </div>
+ </div>
+ )
+}
+
+const SearchBar = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ // if (location.pathname!="/catalog"){
+ // navigate("/catalog");
+ // }
+ const [isFilterMenuVisible, setFilterMenuVisible] = useState(false);
+ function filterMenuToggle() {
+ setFilterMenuVisible(!isFilterMenuVisible);
+ }
+ return (
+ <div className="text-white gap-1 flex items-center">
+ <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
+ <input className="placeholder:italic bg-transparent placeholder:text-inherit inline grow" placeholder="Search..">
+ </input>
+ <div>
+ <button onClick={filterMenuToggle}
+ className="btn-primary hover:bg-quinary rounded-full">
+ {!isFilterMenuVisible && (<ChevronDownIcon className="h-6 w-6 text-inherit inline"/>) || (<ChevronUpIcon className="h-6 w-6 text-inherit inline"/>) }
+ </button>
+ {isFilterMenuVisible && (<FilterMenu />)}
+ </div>
+ </div>
+ )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index cdd3fcf..bff4626 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/src/components/NavigationBar/index.tsx
@@ -1,15 +1,19 @@
import React, { useState } from "react";
import ReactDOM from 'react-dom/client';
-import { Bars3Icon , ShoppingCartIcon, UserIcon, MagnifyingGlassIcon, BookOpenIcon} from '@heroicons/react/24/solid';
+import { Bars3Icon , ShoppingCartIcon, UserIcon, BookOpenIcon } from '@heroicons/react/24/solid';
import logo from '../../assets/images/logo.svg';
import '../../assets/styles/Button/Button.css'
import { useLocation } from "react-router-dom";
+import SearchBar from "./SearchBar";
const NavigationBar = () => {
const location = useLocation();
const NavbarExcludedPages = ["/login", "/register"]
if (NavbarExcludedPages.indexOf(location.pathname) != -1) {
return null;
+ }
+ function searchFilterMenu() {
+
}
return (
<>
@@ -29,11 +33,7 @@ const NavigationBar = () => {
</a>
</div>
<div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary">
- <div className="text-white gap-1 flex">
- <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
- <input className="placeholder:italic bg-transparent placeholder:text-inherit inline grow" placeholder="Search..">
- </input>
- </div>
+ <SearchBar />
</div>
<div className="sm:ml-auto btn-primary text-tertiary">
<a href="/catalog">
diff --git a/src/pages/CatalogPage/index.tsx b/src/pages/CatalogPage/index.tsx
index 177f165..ece3c0e 100644
--- a/src/pages/CatalogPage/index.tsx
+++ b/src/pages/CatalogPage/index.tsx
@@ -14,7 +14,7 @@ const CatalogPage = () => {
description : "no_description",
price : 0,
quantity : 0,
- seller_username : "no_seller " + (index + 1)
+ seller_username : "seller_" + (index + 1)
}
dummyArr.push(elem);
}
--
GitLab