Merge pull request #123 from TienNHM/UI

improve showcase

i18n/en/code.json

@@ -88,7 +88,7 @@
     "message": "Filters"
   },
   "showcase.searchBar.placeholder": {
-    "message": "Search for site name..."
+    "message": "Search..."
   },
   "showcase.usersList.noResult": {
     "message": "No result"

src/pages/showcase/_components/ShowcaseCard/index.tsx

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
 import Image from '@theme/IdealImage';
-import FavoriteIcon from '@site/src/components/svgIcons/FavoriteIcon';
 import { Project } from '@site/src/shared/dto/Project';
 import { sortBy } from '@site/src/utils/jsUtils';
 import Heading from '@theme/Heading';

src/pages/showcase/_components/ShowcaseFilterToggle/index.tsx

@@ -2,9 +2,8 @@ import React, {useState, useEffect, useCallback} from 'react';
 import clsx from 'clsx';
 import {useHistory, useLocation} from '@docusaurus/router';
 
-import {prepareUserState} from '../../index';
-
 import styles from './styles.module.css';
+import { prepareUserState } from '../ShowcaseUserState';
 
 export type Operator = 'OR' | 'AND';
 

src/pages/showcase/_components/ShowcaseFilters/index.tsx

@@ -0,0 +1,67 @@
+import Translate, { translate } from "@docusaurus/Translate";
+import { ProjectTagList, ProjectTags } from "@site/src/shared/constants/ProjectConsts";
+import Heading from "@theme/Heading";
+import clsx from "clsx";
+import React from "react";
+import ShowcaseFilterToggle from "../ShowcaseFilterToggle";
+import ShowcaseTagSelect from "../ShowcaseTagSelect";
+import ShowcaseTooltip from "../ShowcaseTooltip";
+import { useFilteredUsers } from "../ShowcaseUserState";
+import { usePluralForm } from "@docusaurus/theme-common";
+import styles from './styles.module.css'
+
+export function useSiteCountPlural() {
+    const { selectMessage } = usePluralForm();
+    return (sitesCount: number) =>
+        selectMessage(
+            sitesCount,
+            translate(
+                {
+                    id: 'showcase.filters.resultCount',
+                    description: 'The number of sites found',
+                    message: '{sitesCount} sites',
+                },
+                { sitesCount },
+            ),
+        );
+}
+
+export default function ShowcaseFilters() {
+    const filteredUsers = useFilteredUsers();
+    const siteCountPlural = useSiteCountPlural();
+    return (
+        <section className="container margin-top--l margin-bottom--lg">
+            <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
+                <div>
+                    <Heading as="h2">
+                        <Translate id="showcase.filters.title">Filters</Translate>
+                    </Heading>
+                    <span>{siteCountPlural(filteredUsers.length)}</span>
+                </div>
+                <ShowcaseFilterToggle />
+            </div>
+            <ul className={clsx('clean-list', styles.checkboxList)}>
+                {ProjectTagList.map((tag, i) => {
+                    const { label, description, color } = ProjectTags[tag];
+                    const id = `showcase_checkbox_id_${tag}`;
+
+                    return (
+                        <li key={i} className={styles.checkboxListItem}>
+                            <ShowcaseTooltip id={id} text={description} anchorEl="#__docusaurus">
+                                <ShowcaseTagSelect tag={tag} id={id} label={label}
+                                    icon={
+                                        tag === 'favorite' ? (
+                                            <span style={{ marginLeft: '8px' }}>⭐</span>
+                                        ) : (
+                                            <span className={clsx(styles.dotColor)} style={{ backgroundColor: color }} />
+                                        )
+                                    }
+                                />
+                            </ShowcaseTooltip>
+                        </li>
+                    );
+                })}
+            </ul>
+        </section>
+    );
+}

src/pages/showcase/_components/ShowcaseFilters/styles.module.css

@@ -0,0 +1,45 @@
+.filterCheckbox {
+  justify-content: space-between;
+}
+
+.filterCheckbox,
+.checkboxList {
+  display: flex;
+  align-items: center;
+}
+
+.filterCheckbox > div:first-child {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+}
+
+.filterCheckbox > div > * {
+  margin-bottom: 0;
+  margin-right: 8px;
+}
+
+.checkboxList {
+  flex-wrap: wrap;
+}
+
+.checkboxListItem {
+  -webkit-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  height: 32px;
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.checkboxListItem:last-child {
+  margin-right: 0;
+}
+
+.dotColor {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-left: 8px;
+}

src/pages/showcase/_components/ShowcaseSearchBar/index.tsx

@@ -1,8 +1,8 @@
 import { translate } from '@docusaurus/Translate';
 import { useHistory, useLocation } from '@docusaurus/router';
 import React, { useEffect, useState } from 'react';
-import { prepareUserState } from '../..';
 import styles from './styles.module.css';
+import { prepareUserState } from '../ShowcaseUserState';
 
 export const SearchNameQueryKey = 'name';
 
@@ -28,7 +28,7 @@ export default function SearchBar() {
         <input
           id="searchbar"
           placeholder={translate({
-            message: 'Search for site name...',
+            message: 'Search...',
             id: 'showcase.searchBar.placeholder',
           })}
           value={value ?? undefined}

src/pages/showcase/_components/ShowcaseTagSelect/index.tsx

@@ -8,24 +8,23 @@ import React, {
 } from 'react';
 import {useHistory, useLocation} from '@docusaurus/router';
 import {toggleListItem} from '@site/src/utils/jsUtils';
-import type {TagType} from '@site/src/data/projects';
-
-import {prepareUserState} from '../../index';
 import styles from './styles.module.css';
+import { ProjectTagType } from '@site/src/shared/constants/ProjectConsts';
+import { prepareUserState } from '../ShowcaseUserState';
 
 interface Props extends ComponentProps<'input'> {
   icon: ReactElement<ComponentProps<'svg'>>;
   label: ReactNode;
-  tag: TagType;
+  tag: ProjectTagType;
 }
 
 const TagQueryStringKey = 'tags';
 
-export function readSearchTags(search: string): TagType[] {
-  return new URLSearchParams(search).getAll(TagQueryStringKey) as TagType[];
+export function readSearchTags(search: string): ProjectTagType[] {
+  return new URLSearchParams(search).getAll(TagQueryStringKey) as ProjectTagType[];
 }
 
-function replaceSearchTags(search: string, newTags: TagType[]) {
+function replaceSearchTags(search: string, newTags: ProjectTagType[]) {
   const searchParams = new URLSearchParams(search);
   searchParams.delete(TagQueryStringKey);
   newTags.forEach((tag) => searchParams.append(TagQueryStringKey, tag));

src/pages/showcase/index.tsx

@@ -1,76 +1,12 @@
 import React from 'react';
 import clsx from 'clsx';
-import Translate, { translate } from '@docusaurus/Translate';
-import { usePluralForm } from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
 import { sortedProjects } from '@site/src/data/projects';
 import { Project } from '@site/src/shared/dto/Project';
-import { ProjectTags, ProjectTagList } from '@site/src/shared/constants/ProjectConsts';
-import Heading from '@theme/Heading';
-import ShowcaseTagSelect from './_components/ShowcaseTagSelect';
-import ShowcaseFilterToggle from './_components/ShowcaseFilterToggle';
-import ShowcaseTooltip from './_components/ShowcaseTooltip';
-import styles from './styles.module.css';
 import ShowcaseHeader from './_components/ShowcaseHeader';
 import { SHOWCASE } from './constants';
-import { useFilteredUsers } from './_components/ShowcaseUserState';
 import ShowcaseCardList from './_components/ShowcaseCardList';
-
-function useSiteCountPlural() {
-  const { selectMessage } = usePluralForm();
-  return (sitesCount: number) =>
-    selectMessage(
-      sitesCount,
-      translate(
-        {
-          id: 'showcase.filters.resultCount',
-          description: 'The number of sites found',
-          message: '{sitesCount} sites',
-        },
-        { sitesCount },
-      ),
-    );
-}
-
-function ShowcaseFilters() {
-  const filteredUsers = useFilteredUsers();
-  const siteCountPlural = useSiteCountPlural();
-  return (
-    <section className="container margin-top--l margin-bottom--lg">
-      <div className={clsx('margin-bottom--sm', styles.filterCheckbox)}>
-        <div>
-          <Heading as="h2">
-            <Translate id="showcase.filters.title">Filters</Translate>
-          </Heading>
-          <span>{siteCountPlural(filteredUsers.length)}</span>
-        </div>
-        <ShowcaseFilterToggle />
-      </div>
-      <ul className={clsx('clean-list', styles.checkboxList)}>
-        {ProjectTagList.map((tag, i) => {
-          const { label, description, color } = ProjectTags[tag];
-          const id = `showcase_checkbox_id_${tag}`;
-
-          return (
-            <li key={i} className={styles.checkboxListItem}>
-              <ShowcaseTooltip id={id} text={description} anchorEl="#__docusaurus">
-                <ShowcaseTagSelect tag={tag} id={id} label={label}
-                  icon={
-                    tag === 'favorite' ? (
-                      <span style={{ marginLeft: '8px' }}>⭐</span>
-                    ) : (
-                      <span className={clsx(styles.dotColor)} style={{ backgroundColor: color }} />
-                    )
-                  }
-                />
-              </ShowcaseTooltip>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}
+import ShowcaseFilters from './_components/ShowcaseFilters';
 
 export default function Showcase(): JSX.Element {
   const favoriteUsers: Project[] = sortedProjects.filter((user) =>

src/pages/showcase/styles.module.css

@@ -1,45 +0,0 @@
-.filterCheckbox {
-  justify-content: space-between;
-}
-
-.filterCheckbox,
-.checkboxList {
-  display: flex;
-  align-items: center;
-}
-
-.filterCheckbox > div:first-child {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
-}
-
-.filterCheckbox > div > * {
-  margin-bottom: 0;
-  margin-right: 8px;
-}
-
-.checkboxList {
-  flex-wrap: wrap;
-}
-
-.checkboxListItem {
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  height: 32px;
-  font-size: 0.8rem;
-  margin-top: 0.5rem;
-  margin-right: 0.5rem;
-}
-
-.checkboxListItem:last-child {
-  margin-right: 0;
-}
-
-.dotColor {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-left: 8px;
-}