added localizatioon to search page
This commit is contained in:
parent
63ab00614e
commit
0bdfcd1768
2 changed files with 112 additions and 104 deletions
|
|
@ -1,10 +1,13 @@
|
|||
import styled, { ThemeConsumer } from "styled-components"
|
||||
import { useContext } from "react"
|
||||
import styled from "styled-components"
|
||||
import Select from "react-select"
|
||||
|
||||
import theming from "../../styles/theming"
|
||||
|
||||
import _map from "../../data/map.json"
|
||||
import { Map } from "../../../types/types"
|
||||
import { globalContext } from "../../globalContext"
|
||||
|
||||
import type { Map } from "../../../types/types"
|
||||
|
||||
const map: Map = _map
|
||||
|
||||
|
|
@ -29,104 +32,103 @@ interface TagSelectProps {
|
|||
}
|
||||
|
||||
const TagSelect = (props: TagSelectProps) => {
|
||||
const { globalState } = useContext(globalContext)
|
||||
const locale = globalState.locale
|
||||
const currentTheme = globalState.theme
|
||||
const { onChange, defaultValue: selectedTags } = props
|
||||
|
||||
return (
|
||||
<StyledReactTagsContainer>
|
||||
<ThemeConsumer>
|
||||
{(currentTheme) => (
|
||||
<Select
|
||||
placeholder="Select tags..."
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
colors: {
|
||||
...theme.colors,
|
||||
neutral0: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
neutral5: "hsl(0, 0%, 20%)",
|
||||
neutral10: "hsl(0, 0%, 30%)",
|
||||
neutral20: "hsl(0, 0%, 40%)",
|
||||
neutral30: "hsl(0, 0%, 50%)",
|
||||
neutral40: "hsl(0, 0%, 60%)",
|
||||
neutral50: "hsl(0, 0%, 70%)",
|
||||
neutral60: "hsl(0, 0%, 80%)",
|
||||
neutral70: "hsl(0, 0%, 90%)",
|
||||
neutral80: "hsl(0, 0%, 95%)",
|
||||
neutral90: "hsl(0, 0%, 100%)",
|
||||
primary25: "hotpink",
|
||||
primary: "black",
|
||||
},
|
||||
})}
|
||||
styles={{
|
||||
option: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
color: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})
|
||||
.toString(),
|
||||
cursor: "pointer",
|
||||
padding: 10,
|
||||
":hover": {
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})
|
||||
.toString(),
|
||||
},
|
||||
}),
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
border: theming.theme(currentTheme.currentTheme, {
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
}),
|
||||
}),
|
||||
multiValue: (styles) => ({
|
||||
...styles,
|
||||
color: "white",
|
||||
backgroundColor: theming.light.linkColor,
|
||||
borderRadius: "5px",
|
||||
}),
|
||||
multiValueLabel: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
marginRight: "0.2rem",
|
||||
}),
|
||||
multiValueRemove: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
":hover": {
|
||||
backgroundColor: "white",
|
||||
color: theming.light.linkColor,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
defaultValue={selectedTags}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
isMulti
|
||||
/>
|
||||
)}
|
||||
</ThemeConsumer>
|
||||
<Select
|
||||
placeholder={locale == "en" ? "Select tags..." : "태그를 선택하세요"}
|
||||
theme={(theme) => ({
|
||||
...theme,
|
||||
colors: {
|
||||
...theme.colors,
|
||||
neutral0: theming
|
||||
.theme(currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
neutral5: "hsl(0, 0%, 20%)",
|
||||
neutral10: "hsl(0, 0%, 30%)",
|
||||
neutral20: "hsl(0, 0%, 40%)",
|
||||
neutral30: "hsl(0, 0%, 50%)",
|
||||
neutral40: "hsl(0, 0%, 60%)",
|
||||
neutral50: "hsl(0, 0%, 70%)",
|
||||
neutral60: "hsl(0, 0%, 80%)",
|
||||
neutral70: "hsl(0, 0%, 90%)",
|
||||
neutral80: "hsl(0, 0%, 95%)",
|
||||
neutral90: "hsl(0, 0%, 100%)",
|
||||
primary25: "hotpink",
|
||||
primary: "black",
|
||||
},
|
||||
})}
|
||||
styles={{
|
||||
option: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
color: theming
|
||||
.theme(currentTheme, {
|
||||
light: theming.light.color1,
|
||||
dark: theming.dark.color1,
|
||||
})
|
||||
.toString(),
|
||||
cursor: "pointer",
|
||||
padding: 10,
|
||||
":hover": {
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme, {
|
||||
light: theming.light.backgroundColor0,
|
||||
dark: theming.dark.backgroundColor0,
|
||||
})
|
||||
.toString(),
|
||||
},
|
||||
}),
|
||||
control: (styles) => ({
|
||||
...styles,
|
||||
backgroundColor: theming
|
||||
.theme(currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
dark: theming.dark.backgroundColor1,
|
||||
})
|
||||
.toString(),
|
||||
border: theming.theme(currentTheme, {
|
||||
light: "1px solid #ccc",
|
||||
dark: "1px solid #555",
|
||||
}),
|
||||
}),
|
||||
multiValue: (styles) => ({
|
||||
...styles,
|
||||
color: "white",
|
||||
backgroundColor: theming.light.linkColor,
|
||||
borderRadius: "5px",
|
||||
}),
|
||||
multiValueLabel: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
marginRight: "0.2rem",
|
||||
}),
|
||||
multiValueRemove: (styles) => ({
|
||||
...styles,
|
||||
marginLeft: "0.2rem",
|
||||
":hover": {
|
||||
backgroundColor: "white",
|
||||
color: theming.light.linkColor,
|
||||
},
|
||||
}),
|
||||
}}
|
||||
defaultValue={selectedTags}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
isMulti
|
||||
/>
|
||||
</StyledReactTagsContainer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useContext, useEffect, useState } from "react"
|
||||
import styled from "styled-components"
|
||||
import { useSearchParams } from "react-router-dom"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
|
|
@ -19,12 +19,13 @@ import MainContent from "../../components/MainContent"
|
|||
import SearchBar from "./SearchBar"
|
||||
import TagSelect, { TagsData } from "./TagSelect"
|
||||
import { ClearDateButton, DateRangeControl, StyledDateRange } from "./DateRange"
|
||||
|
||||
import { Map } from "../../../types/types"
|
||||
import { globalContext } from "../../globalContext"
|
||||
|
||||
import "react-date-range/dist/styles.css"
|
||||
import "react-date-range/dist/theme/default.css"
|
||||
|
||||
import type { Map } from "../../../types/types"
|
||||
|
||||
const map: Map = _map
|
||||
|
||||
const searchIndex = elasticlunr.Index.load(searchData as never)
|
||||
|
|
@ -98,6 +99,9 @@ function isSelectedTagsInPost(selectedTags?: TagsData[], postTags?: string[]) {
|
|||
}
|
||||
|
||||
const Search = () => {
|
||||
const { globalState } = useContext(globalContext)
|
||||
const locale = globalState.locale
|
||||
|
||||
// URL search parameters
|
||||
const [URLSearchParams, setURLSearchParams] = useSearchParams()
|
||||
|
||||
|
|
@ -219,11 +223,11 @@ const Search = () => {
|
|||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>pomp | Search</title>
|
||||
<title>pomp | {locale == "en" ? "Search" : "검색"}</title>
|
||||
</Helmet>
|
||||
|
||||
<StyledSearch>
|
||||
<h1>Search</h1>
|
||||
<h1>{locale == "en" ? "Search" : "검색"}</h1>
|
||||
|
||||
<StyledSearchContainer>
|
||||
<DateRangeControl>
|
||||
|
|
@ -232,7 +236,7 @@ const Search = () => {
|
|||
setDateRange(defaultDateRange)
|
||||
}}
|
||||
>
|
||||
Reset range
|
||||
{locale == "en" ? "Reset date range" : "날짜 범위 초기화"}
|
||||
</ClearDateButton>
|
||||
<StyledDateRange
|
||||
editableDateInputs
|
||||
|
|
@ -253,13 +257,15 @@ const Search = () => {
|
|||
type="search"
|
||||
value={searchInput}
|
||||
autoComplete="off"
|
||||
placeholder="Search"
|
||||
placeholder={locale == "en" ? "Search" : "검색"}
|
||||
onChange={(event) => setSearchInput(event.target.value)}
|
||||
onKeyPress={(event) => {
|
||||
event.key === "Enter" && searchInput && doSearch()
|
||||
}}
|
||||
/>
|
||||
{postCards.length} {postCards.length > 1 ? "results" : "result"}
|
||||
{locale == "kr" && "결과: "}
|
||||
{postCards.length}{" "}
|
||||
{locale == "en" && (postCards.length > 1 ? "results" : "result")}
|
||||
<TagSelect
|
||||
defaultValue={selectedTags}
|
||||
onChange={(newValue) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue