Improved the input for the pages

src/components/Inputs/WithLabel.tsx

@@ -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>
+  );
+}

src/pages/contents/index.tsx

@@ -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">
+      <WithLabel
-        <p className="flex-shrink-0">{langui.group_by}:</p>
+        label={langui.group_by}
-        <Select
+        input={
-          className="w-full"
+          <Select
-          options={[langui.category ?? "", langui.type ?? ""]}
+            className="w-full"
-          state={groupingMethod}
+            options={[langui.category ?? "", langui.type ?? ""]}
-          setState={setGroupingMethod}
+            state={groupingMethod}
-          allowEmpty
+            setState={setGroupingMethod}
-        />
+            allowEmpty
-      </div>
+          />
+        }
+      />
 
-      <div
+      <WithLabel
-        className={`flex flex-row place-items-center gap-2 coarse:hidden ${
+        label={langui.combine_related_contents}
-          searchName.length > 1
+        disabled={searchName.length > 1}
-            ? "text-dark brightness-150 contrast-75 grayscale"
+        input={
-            : ""
+          <Switch
-        }`}
+            setState={setCombineRelatedContent}
-      >
+            state={effectiveCombineRelatedContent}
-        <p className="flex-shrink-0">{langui.combine_related_contents}:</p>
+          />
-        <Switch
+        }
-          setState={setCombineRelatedContent}
+      />
-          state={effectiveCombineRelatedContent}
-          disabled={searchName.length > 1}
-        />
-      </div>
 
-      <div className="flex flex-row place-items-center gap-2 coarse:hidden">
+      <WithLabel
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
+        label={langui.always_show_info}
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+        input={<Switch setState={setKeepInfoVisible} state={keepInfoVisible} />}
-      </div>
+      />
     </SubPanel>
   );
   const contentPanel = (

src/pages/library/index.tsx

@@ -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">
+      <WithLabel
-        <p className="flex-shrink-0">{langui.group_by}:</p>
+        label={langui.group_by}
-        <Select
+        input={
-          className="w-full"
+          <Select
-          options={[
+            className="w-full"
-            langui.category ?? "Category",
+            options={[
-            langui.type ?? "Type",
+              langui.category ?? "Category",
-            langui.release_year ?? "Year",
+              langui.type ?? "Type",
-          ]}
+              langui.release_year ?? "Year",
-          state={groupingMethod}
+            ]}
-          setState={setGroupingMethod}
+            state={groupingMethod}
-          allowEmpty
+            setState={setGroupingMethod}
-        />
+            allowEmpty
-      </div>
+          />
+        }
+      />
 
-      <div className="flex flex-row place-items-center gap-2">
+      <WithLabel
-        <p className="flex-shrink-0">{langui.order_by}:</p>
+        label={langui.order_by}
-        <Select
+        input={
-          className="w-full"
+          <Select
-          options={[
+            className="w-full"
-            langui.name ?? "Name",
+            options={[
-            langui.price ?? "Price",
+              langui.name ?? "Name",
-            langui.release_date ?? "Release date",
+              langui.price ?? "Price",
-          ]}
+              langui.release_date ?? "Release date",
-          state={sortingMethod}
+            ]}
-          setState={setSortingMethod}
+            state={sortingMethod}
-        />
+            setState={setSortingMethod}
-      </div>
+          />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
+      <WithLabel
-        <p className="text-left">{langui.show_subitems}:</p>
+        label={langui.show_subitems}
-        <Switch state={showSubitems} setState={setShowSubitems} />
+        input={<Switch state={showSubitems} setState={setShowSubitems} />}
-      </div>
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
+      <WithLabel
-        <p className="text-left">{langui.show_primary_items}:</p>
+        label={langui.show_primary_items}
-        <Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
+        input={
-      </div>
+          <Switch state={showPrimaryItems} setState={setShowPrimaryItems} />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2">
+      <WithLabel
-        <p className="text-left">{langui.show_secondary_items}:</p>
+        label={langui.show_secondary_items}
-        <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
+        input={
-      </div>
+          <Switch state={showSecondaryItems} setState={setShowSecondaryItems} />
+        }
+      />
 
-      <div className="flex flex-row place-content-between place-items-center gap-2 coarse:hidden">
+      <WithLabel
-        <p className="text-left">{langui.always_show_info}:</p>
+        label={langui.always_show_info}
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+        input={<Switch state={keepInfoVisible} setState={setKeepInfoVisible} />}
-      </div>
+      />
     </SubPanel>
   );
   const contentPanel = (

src/pages/news/index.tsx

@@ -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">
+      <input
-        <p className="flex-shrink-0">{langui.always_show_info}:</p>
+        className="mb-6 w-full"
-        <Switch setState={setKeepInfoVisible} state={keepInfoVisible} />
+        type="text"
-      </div>
+        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;
+  });
+}