namae/pages/s/[query].tsx

import { useRouter } from 'next/router';
import Tooltip from 'rc-tooltip';
import React from 'react';
import { Helmet } from 'react-helmet';
import { useTranslation } from 'react-i18next';
import { IoIosFlash, IoIosRocket } from 'react-icons/io';
import styled from '@emotion/styled';
import Cards from '../../components/cards';
import {
  AvailableIcon,
  COLORS as ResultColor,
  ResultIcon,
  ResultItem,
  ResultName,
} from '../../components/cards/core';
import Form from '../../components/Form';
import { useStoreState } from '../../store';
import { Content, Header } from '../../src/theme';
import { mobile } from '../../src/util/css';
import { sanitize } from '../../src/util/text';

export default function Search() {
  const router = useRouter();
  const { query } = router.query;
  const currentQuery = sanitize((query as string) ?? '');
  const { t } = useTranslation();

  return (
    <>
      <Helmet>
        <title>Search for &quot;{currentQuery}&quot; — namae</title>
      </Helmet>
      <Header>
        <Form initialValue={currentQuery} />
      </Header>
      <Content>
        <Legend>
          <Stat />
          <ResultItem color={ResultColor.available}>
            <ResultIcon>
              <IoIosRocket />
            </ResultIcon>
            <ResultName>{t('available')}</ResultName>
            <AvailableIcon>
              <IoIosFlash />
            </AvailableIcon>
          </ResultItem>
          <ResultItem color={ResultColor.unavailable}>
            <ResultIcon>
              <IoIosRocket />
            </ResultIcon>
            <ResultName>{t('unavailable')}</ResultName>
          </ResultItem>
        </Legend>
        <Cards query={currentQuery} />
      </Content>
    </>
  );
}

function Stat() {
  const totalCount = useStoreState((state) => state.stats.totalCount);
  const availableCount = useStoreState((state) => state.stats.availableCount);
  const { t } = useTranslation();

  const uniqueness = availableCount !== 0 ? availableCount / totalCount : 0.0;
  const uniquenessText = ((n) => {
    if (n > 0.7 && n <= 1.0) {
      return t('uniqueness.high');
    } else if (n > 0.4 && n <= 0.7) {
      return t('uniqueness.moderate');
    } else {
      return t('uniqueness.low');
    }
  })(uniqueness);

  return (
    <UniquenessIndicator>
      <Tooltip
        overlay={t('uniqueness.description')}
        placement="top"
        trigger={['hover']}
      >
        <span>
          {uniquenessText} ({(uniqueness * 100).toFixed(1)} UNIQ)
        </span>
      </Tooltip>
    </UniquenessIndicator>
  );
}

export const Legend = styled.div`
  margin-top: -100px;
  padding: 100px 0 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  user-select: none;
  cursor: default;
  background-color: #f6f6fa;

  ${mobile} {
    flex-direction: column;
    align-items: center;
    margin-top: -80px;
    padding: 70px 0 30px;
    background-color: none;
  }

  > * {
    margin: 0 10px 0;
  }
`;

export const UniquenessIndicator = styled.div`
  color: #7b7b7b;
`;