Improved the input for the pages
This commit is contained in:
DrMint
parent
6adae3fb3f
commit
16c540181d
25
src/components/Inputs/WithLabel.tsx
Normal file
25
src/components/Inputs/WithLabel.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import { Immutable } from "helpers/types";
|
||||
|
||||
interface Props {
|
||||
label: string | null | undefined;
|
||||
input: JSX.Element;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function WithLabel(props: Immutable<Props>): JSX.Element {
|
||||
const { label, input, disabled } = props;
|
||||
return (
|
||||
<div
|
||||
className={`flex flex-row place-content-between place-items-center gap-2 ${
|
||||
disabled ? "text-dark brightness-150 contrast-75 grayscale" : ""
|
||||
}`}
|
||||
>
|
||||
{label && (
|
||||
<p className={`text-left ${label.length < 10 ? "flex-shrink-0" : ""}`}>
|
||||
{label}:
|
||||
</p>
|
||||
)}
|
||||
{input}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -17,6 +17,7 @@ import { Immutable } from "helpers/types";
|
||||
import { GetStaticPropsContext } from "next";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { Icon } from "components/Ico";
|
||||
import { WithLabel } from "components/Inputs/WithLabel";
|
||||
|
||||
interface Props extends AppStaticProps {
|
||||
contents: NonNullable<GetContentsQuery["contents"]>["data"];
|
||||
@ -83,36 +84,34 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-items-center gap-2">
|
||||
<p className="flex-shrink-0">{langui.group_by}:</p>
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[langui.category ?? "", langui.type ?? ""]}
|
||||
state={groupingMethod}
|
||||
setState={setGroupingMethod}
|
||||
allowEmpty
|
||||
/>
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.group_by}
|
||||
input={
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[langui.category ?? "", langui.type ?? ""]}
|
||||
state={groupingMethod}
|
||||
setState={setGroupingMethod}
|
||||
allowEmpty
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`flex flex-row place-items-center gap-2 coarse:hidden ${
|
||||
searchName.length > 1
|
||||
? "text-dark brightness-150 contrast-75 grayscale"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<p className="flex-shrink-0">{langui.combine_related_contents}:</p>
|
||||
<Switch
|
||||
setState={setCombineRelatedContent}
|
||||
state={effectiveCombineRelatedContent}
|
||||
disabled={searchName.length > 1}
|
||||
/>
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.combine_related_contents}
|
||||
disabled={searchName.length > 1}
|
||||
input={
|
||||
<Switch
|
||||
setState={setCombineRelatedContent}
|
||||
state={effectiveCombineRelatedContent}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
|
||||
<p className="flex-shrink-0">{langui.always_show_info}:</p>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.always_show_info}
|
||||
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
const contentPanel = (
|
||||
|
||||
@ -22,6 +22,7 @@ import { Immutable } from "helpers/types";
|
||||
import { GetStaticPropsContext } from "next";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { Icon } from "components/Ico";
|
||||
import { WithLabel } from "components/Inputs/WithLabel";
|
||||
|
||||
interface Props extends AppStaticProps {
|
||||
items: NonNullable<GetLibraryItemsPreviewQuery["libraryItems"]>["data"];
|
||||
@ -104,54 +105,62 @@ export default function Library(props: Immutable<Props>): JSX.Element {
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-items-center gap-2">
|
||||
<p className="flex-shrink-0">{langui.group_by}:</p>
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
langui.category ?? "Category",
|
||||
langui.type ?? "Type",
|
||||
langui.release_year ?? "Year",
|
||||
]}
|
||||
state={groupingMethod}
|
||||
setState={setGroupingMethod}
|
||||
allowEmpty
|
||||
/>
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.group_by}
|
||||
input={
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
langui.category ?? "Category",
|
||||
langui.type ?? "Type",
|
||||
langui.release_year ?? "Year",
|
||||
]}
|
||||
state={groupingMethod}
|
||||
setState={setGroupingMethod}
|
||||
allowEmpty
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-items-center gap-2">
|
||||
<p className="flex-shrink-0">{langui.order_by}:</p>
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
langui.name ?? "Name",
|
||||
langui.price ?? "Price",
|
||||
langui.release_date ?? "Release date",
|
||||
]}
|
||||
state={sortingMethod}
|
||||
setState={setSortingMethod}
|
||||
/>
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.order_by}
|
||||
input={
|
||||
<Select
|
||||
className="w-full"
|
||||
options={[
|
||||
langui.name ?? "Name",
|
||||
langui.price ?? "Price",
|
||||
langui.release_date ?? "Release date",
|
||||
]}
|
||||
state={sortingMethod}
|
||||
setState={setSortingMethod}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-content-between place-items-center gap-2">
|
||||
<p className="text-left">{langui.show_subitems}:</p>
|
||||
<Switch state={showSubitems} setState={setShowSubitems} />
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.show_subitems}
|
||||
input={<Switch state={showSubitems} setState={setShowSubitems} />}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-content-between place-items-center gap-2">
|
||||
<p className="text-left">{langui.show_primary_items}:</p>
|
||||
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.show_primary_items}
|
||||
input={
|
||||
<Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-content-between place-items-center gap-2">
|
||||
<p className="text-left">{langui.show_secondary_items}:</p>
|
||||
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.show_secondary_items}
|
||||
input={
|
||||
<Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-content-between place-items-center gap-2 coarse:hidden">
|
||||
<p className="text-left">{langui.always_show_info}:</p>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
<WithLabel
|
||||
label={langui.always_show_info}
|
||||
input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
const contentPanel = (
|
||||
|
||||
@ -13,8 +13,9 @@ import { getReadySdk } from "graphql/sdk";
|
||||
import { prettyDate, prettySlug } from "helpers/formatters";
|
||||
import { Immutable } from "helpers/types";
|
||||
import { GetStaticPropsContext } from "next";
|
||||
import { Fragment, useState } from "react";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { Icon } from "components/Ico";
|
||||
import { WithLabel } from "components/Inputs/WithLabel";
|
||||
|
||||
interface Props extends AppStaticProps {
|
||||
posts: NonNullable<GetPostsPreviewQuery["posts"]>["data"];
|
||||
@ -25,6 +26,15 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
const posts = sortPosts(props.posts);
|
||||
|
||||
const [keepInfoVisible, setKeepInfoVisible] = useState(true);
|
||||
const [searchName, setSearchName] = useState("");
|
||||
|
||||
const [filteredItems, setFilteredItems] = useState(
|
||||
filterItems(posts, searchName)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setFilteredItems(filterItems(posts, searchName));
|
||||
}, [posts, searchName]);
|
||||
|
||||
const subPanel = (
|
||||
<SubPanel>
|
||||
@ -34,10 +44,22 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
description={langui.news_description}
|
||||
/>
|
||||
|
||||
<div className="flex flex-row place-items-center gap-2 coarse:hidden">
|
||||
<p className="flex-shrink-0">{langui.always_show_info}:</p>
|
||||
<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
|
||||
</div>
|
||||
<input
|
||||
className="mb-6 w-full"
|
||||
type="text"
|
||||
name="name"
|
||||
id="name"
|
||||
placeholder={langui.search_title ?? undefined}
|
||||
onChange={(event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
setSearchName(input.value);
|
||||
}}
|
||||
/>
|
||||
|
||||
<WithLabel
|
||||
label={langui.always_show_info}
|
||||
input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
|
||||
/>
|
||||
</SubPanel>
|
||||
);
|
||||
|
||||
@ -47,7 +69,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
className="grid grid-cols-1 items-end gap-8
|
||||
desktop:grid-cols-[repeat(auto-fill,_minmax(20rem,1fr))]"
|
||||
>
|
||||
{posts.map((post) => (
|
||||
{filteredItems.map((post) => (
|
||||
<Fragment key={post.id}>
|
||||
{post.attributes && (
|
||||
<PreviewCard
|
||||
@ -80,6 +102,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
|
||||
navTitle={langui.news}
|
||||
subPanel={subPanel}
|
||||
contentPanel={contentPanel}
|
||||
subPanelIcon={Icon.Search}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
@ -115,3 +138,19 @@ function sortPosts(
|
||||
.reverse();
|
||||
return sortedPosts as Immutable<Props["posts"]>;
|
||||
}
|
||||
|
||||
function filterItems(posts: Immutable<Props["posts"]>, searchName: string) {
|
||||
return [...posts].filter((post) => {
|
||||
if (searchName.length > 1) {
|
||||
if (
|
||||
post.attributes?.translations?.[0]?.title
|
||||
.toLowerCase()
|
||||
.includes(searchName.toLowerCase())
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user