feat: implement search component

This commit is contained in:
jinhojang6 2023-04-19 00:23:16 +09:00
parent 18d5c18b03
commit d7669494e9
7 changed files with 28 additions and 11 deletions

View File

@ -9,7 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@acid-info/lsd-react": "^0.1.0-alpha.2",
"@acid-info/lsd-react": "^0.1.0-alpha.3",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@hookstate/core": "^4.0.1",

View File

@ -0,0 +1,8 @@
.searchBox {
width: 100% !important;
}
.searchBox > div {
border-left: none !important;
border-right: none !important;
}

View File

@ -0,0 +1,12 @@
import { Autocomplete } from "@acid-info/lsd-react";
import styles from "./Search.module.css";
export default function Search() {
return (
<Autocomplete
className={styles.searchBox}
placeholder="Search through the LPE posts.."
withIcon
/>
);
}

View File

@ -0,0 +1 @@
export { default as Search } from './Search';

View File

@ -1,8 +1,8 @@
import { Header } from "@/components/Header";
import { HeaderTags } from "@/components/HeaderTags";
import { Navbar } from "@/components/Navbar";
import { Search } from "@/components/Search";
import useIsDarkState from "@/states/isDarkState/isDarkState";
import { Autocomplete } from "@acid-info/lsd-react";
export default function HeaderLayout() {
const isDarkState = useIsDarkState();
@ -11,11 +11,7 @@ export default function HeaderLayout() {
<Navbar isDark={isDarkState.get()} toggle={isDarkState.toggle} />
<Header />
<HeaderTags />
<Autocomplete
placeholder="Search through the LPE posts.."
style={{ width: "100%" }}
withIcon
/>
<Search />
</>
);
}

View File

@ -2,10 +2,10 @@
# yarn lockfile v1
"@acid-info/lsd-react@^0.1.0-alpha.2":
version "0.1.0-alpha.2"
resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.2.tgz#79056cf561694454fcd3efc8eee1313a41ab041a"
integrity sha512-hZtNWqdRJ78ClolA22GfhJGs8ttxbZW3wnHi7JxLiZdtEF9huoiU/gTjIXW/q6v8mbweyHBvToELDOSauyUyKA==
"@acid-info/lsd-react@^0.1.0-alpha.3":
version "0.1.0-alpha.3"
resolved "https://registry.yarnpkg.com/@acid-info/lsd-react/-/lsd-react-0.1.0-alpha.3.tgz#c0103a4a8f79c7c204aa8110a304ba70ada37b00"
integrity sha512-oqeVWJQXTFh/6eqYLpraam7saf8CcprqWIIl08PYIL+LdBnrepfqVPyFZCEOGmtrM3khhNIpt/4l9LP9E7CI4g==
dependencies:
"@emotion/react" "^11.10.5"
"@emotion/styled" "^11.10.5"