pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

moving search operations to /explore

Browse source
This commit is contained in:
Kim, Jimin 2021-06-23 10:31:45 +09:00
parent 9f27b34e9e
commit 1c517aa5f0
2 changed files with 14 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

16
source/src/components/Navbar.tsx
View file

@ -9,9 +9,9 @@ import { isMobile } from "react-device-detect"
import theming from "../theming"
import NavbarData from "../data/NavbarData"
import SearchBox from "./SearchBox"
import Sidebar from "./Sidebar"
import ThemeToggleButton from "./ThemeToggleButton"
import { faSearch } from "@fortawesome/free-solid-svg-icons"
const StyledNav = styled.nav`
position: absolute;
@ -102,7 +102,19 @@ export default class Navbar extends React.Component {
</ReactTooltip>
)}
<SearchBox />
<StyledALink
data-tip
data-for="search"
href={`${process.env.PUBLIC_URL}/explore`}
>
<FontAwesomeIcon icon={faSearch} />
</StyledALink>
{!isMobile && (
<ReactTooltip id="search" type="dark" effect="solid">
<span>Search</span>
</ReactTooltip>
)}
<Sidebar />
</StyledContainer>
</StyledNav>

61
source/src/components/SearchBox.tsx
View file

@ -1,61 +0,0 @@
import React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSearch } from "@fortawesome/free-solid-svg-icons"
import styled from "styled-components"
import theming from "../theming"
const StyledSearchBoxContainer = styled.div`
display: flex;
justify-content: left;
margin: 0.5rem;
align-items: center;
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "whitesmoke",
dark: "#2F3136",
})};
color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "black",
dark: "#CFD0D0",
})};
&:hover {
background-color: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "#eeeeee",
dark: "#36393F",
})};
}
`
const StyledSearchBox = styled.input`
width: 80%;
border: none;
border-right: 1rem;
outline: none;
padding: 10px 10px;
text-decoration: none;
background-color: inherit;
color: inherit;
`
const StyledSearchButton = styled(FontAwesomeIcon)`
cursor: pointer;
`
export default class Navbar extends React.Component {
render() {
return (
<StyledSearchBoxContainer>
<StyledSearchBox
type="text"
name="search"
placeholder="Search"
/>
<StyledSearchButton icon={faSearch} />
</StyledSearchBoxContainer>
)
}
}