Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

few changes, mobile searchbar not done

Browse Source
This commit is contained in:
benzbarquilla
2026-03-30 17:21:09 +08:00
parent 992d01ba9b
commit 02d53f69ad
8 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/icons/search.jsx
View File

@@ -12,7 +12,7 @@ const SearchIcon = (props) => {
>
<path
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
stroke="#858699"
stroke="currentColor" //858699
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"

13
frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
View File

@@ -1,12 +1,19 @@
import React from "react";
import React, { useState } from "react";
import styles from "./styles.module.css";
import SearchIcon from "../icons/search";
const MobileSearchBar = (props) => {
const [open, setOpen] = useState(false);
return (
<div className={styles.searchBarContainer}>
<input type="text" className={styles.searchBar} />
<form className={styles.searchBarContainer}>
<div
className={`${styles.searchBarWrapper} ${open ? styles.open : ""}`}
onClick={() => setOpen((open) => !open)}
>
<input type="text" placeholder="Search" className={styles.searchBar} />
<SearchIcon className={styles.searchIcon} />
</div>
</form>
);
};

45
frontend/src/app/components/mobileSearchBar/styles.module.css
View File

@@ -1,29 +1,62 @@
.searchBarContainer {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
position: relative;
}
.searchBarContainer > input {
.searchBarWrapper {
position: relative;
width: 100%;
border: 1px solid #31324a00;
transition: width 0.35s ease;
}
.open {
display: flex;
align-items: center;
gap: 8px;
border-radius: 6px;
border: 1px solid #31324a;
}
.searchBar {
width: 100%;
padding: 11px 12px;
padding-left: 40px;
background-color: transparent;
border: none;
opacity: 0;
/* pointer-events: none; */
transition: opacity 0.35s ease;
outline: none;
background-color: transparent;
color: white;
font-family: Inter;
font-size: 1.18rem;
outline: none;
font-style: normal;
font-weight: 400;
line-height: normal;
caret-color: #575bc7;
}
.searchBar::placeholder {
color: #85869b;
font-family: Inter;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: -0.09px;
}
.open > .searchBar {
opacity: 1; /*show input when open*/
}
.searchIcon {
position: absolute;
left: 10;
top: 50%;
left: 10px;
transform: translateY(-50%);
pointer-events: none; /* so clicking the icon focuses input */
color: #858699;
}
.searchIcon:hover {
color: #959aff;
}

5
frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from "react";
import CreateIcon from "../../icons/create";
import styles from "./styles.module.css";
import useIsMobile from "@/app/hooks/useIsMobile";
import SearchIcon from "../../icons/search";
const HeaderDropdown = ({
setOpen,
@@ -30,7 +31,7 @@ const HeaderDropdown = ({
</div>
{/* Search */}
<div className={styles.srchInputContainer}>
<div className={styles.srchInputGroup}>
<form className={styles.srchInputGroup}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
@@ -67,7 +68,7 @@ const HeaderDropdown = ({
id=""
placeholder="Search"
/>
</div>
</form>
</div>
</div>

2
frontend/src/app/components/navbar/navleft/styles.module.css
View File

@@ -255,7 +255,7 @@
background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
border-radius: 0;
position: fixed;
top: 90px;
top: 80px;
left: 0;
width: 100%;
margin-top: 0;

2
frontend/src/app/components/navbar/navright/styles.module.css
View File

@@ -169,7 +169,7 @@
gap: 16px;
background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
position: fixed;
top: 90px;
top: 80px;
left: 0;
width: 100%;
margin-top: 0;

17
frontend/src/app/components/searchbar/SearchBar.jsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from "react";
import searchBarStyle from "./styles.module.css";
import SearchIcon from "../icons/search";
const SearchBar = () => {
const [open, setOpen] = useState(false);
@@ -19,21 +20,7 @@ const SearchBar = () => {
className={searchBarStyle.searchBtn}
onClick={() => setOpen((open) => !open)}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
stroke="currentColor"
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<SearchIcon />
</div>
</form>
);

5
frontend/src/app/components/searchbar/styles.module.css
View File

@@ -10,17 +10,14 @@
transition: width 0.35s ease;
position: absolute;
}
.searchBarContainer:focus-within {
background: #292a36;
background: color(display-p3 0.1608 0.1647 0.2078);
}
.open {
width: 260px;
padding: 6px 6px 6px 12px;
justify-content: space-between;
border: 1px solid #31324a;
border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
border-radius: 6px;
}
.input {
@@ -31,7 +28,6 @@
opacity: 0; /*hide input kung collapse*/
transition: opacity 0.35s ease;
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 1.18rem;
font-style: normal;
@@ -48,7 +44,6 @@
.input::placeholder {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
text-align: start;
font-family: Inter;
font-size: 1.18rem;