feat(review): review page template

i18n/en_US.yaml

@@ -517,6 +517,7 @@ ui:
       setting: Settings
       logout: Log out
       admin: Admin
+      review: Review
     search:
       placeholder: Search
   footer:
@@ -726,6 +727,9 @@ ui:
     logout: Log out
     verify: Verify
     add_question: Add question
+    approve: Approve
+    reject: Reject
+    skip: Skip
   search:
     title: Search Results
     keywords: Keywords
@@ -1173,3 +1177,11 @@ ui:
     invalid: is invalid
     btn_submit: Save
     not_found_props: "Required property {{ key }} not found."
+  page_review:
+    review: Reivew
+    proposed: proposed
+    question_edit: Question edit
+    answer_edit: Answer edit
+    tag_edit: Tag edit
+    edit_summary: Edit summary
+    empty: No review tasks left.

ui/src/components/Empty/index.tsx

@@ -1,13 +1,15 @@
-import { FC, memo } from 'react';
+import { FC, memo, ReactNode } from 'react';
 import { Trans } from 'react-i18next';
 
-const Index: FC = () => {
+const Index: FC<{ children?: ReactNode }> = ({ children }) => {
   return (
     <div className="text-center py-5">
-      <Trans i18nKey="personal.list_empty">
-        We couldn't find anything. <br /> Try different or less specific
-        keywords.
-      </Trans>
+      {children || (
+        <Trans i18nKey="personal.list_empty">
+          We couldn't find anything. <br /> Try different or less specific
+          keywords.
+        </Trans>
+      )}
     </div>
   );
 };

ui/src/components/Header/components/NavItems/index.tsx

@@ -56,6 +56,12 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
           {userInfo?.is_admin ? (
             <Dropdown.Item href="/admin">{t('header.nav.admin')}</Dropdown.Item>
           ) : null}
+          {/* TODO: use review permission */}
+          {userInfo?.is_admin ? (
+            <Dropdown.Item href="/review">
+              {t('header.nav.review')}
+            </Dropdown.Item>
+          ) : null}
           <Dropdown.Divider />
           <Dropdown.Item onClick={logOut}>
             {t('header.nav.logout')}

ui/src/components/Header/index.tsx

@@ -122,9 +122,6 @@ const Header: FC = () => {
               <NavLink className="nav-link" to="/tags">
                 {t('header.nav.tag')}
               </NavLink>
-              <NavLink className="nav-link d-none" to="/users">
-                {t('header.nav.user')}
-              </NavLink>
             </Nav>
           </Col>
           <hr className="hr lg-none mt-2" />

ui/src/pages/Review/index.tsx

@@ -0,0 +1,74 @@
+import { FC } from 'react';
+import {
+  Container,
+  Row,
+  Col,
+  Alert,
+  Badge,
+  Stack,
+  Button,
+} from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import { BaseUserCard, FormatTime, Empty } from '@/components';
+import { loggedUserInfoStore } from '@/stores';
+
+const Index: FC = () => {
+  const { t } = useTranslation('translation', { keyPrefix: 'page_review' });
+
+  const { user } = loggedUserInfoStore.getState();
+  return (
+    <Container className="pt-2 mt-4 mb-5">
+      <Row>
+        <Col lg={{ span: 7, offset: 1 }}>
+          <h3 className="mb-4">{t('review')}</h3>
+          <Alert variant="secondary">
+            <Stack className="align-items-start">
+              <Badge bg="secondary" className="mb-2">
+                {t('question_edit')}
+              </Badge>
+              <Link to="/review">
+                How do I test whether variable against multiple
+              </Link>
+              <p className="mb-0">
+                {t('edit_summary')}: Editing part of the code and correcting the
+                grammar.
+              </p>
+            </Stack>
+            <Stack
+              direction="horizontal"
+              gap={1}
+              className="align-items-baseline mt-2">
+              <BaseUserCard data={user} avatarSize="24" />
+              <FormatTime
+                time={Date.now()}
+                className="small text-secondary"
+                preFix={t('proposed')}
+              />
+            </Stack>
+          </Alert>
+        </Col>
+        <Col lg={{ span: 7, offset: 1 }}>Content</Col>
+        <Col lg={{ span: 7, offset: 1 }}>
+          <Stack direction="horizontal" gap={2}>
+            <Button variant="outline-primary">
+              {t('approve', { keyPrefix: 'btns' })}
+            </Button>
+            <Button variant="outline-primary">
+              {t('reject', { keyPrefix: 'btns' })}
+            </Button>
+            <Button variant="outline-primary">
+              {t('skip', { keyPrefix: 'btns' })}
+            </Button>
+          </Stack>
+        </Col>
+        <Col lg={{ span: 7, offset: 1 }}>
+          <Empty>{t('empty')}</Empty>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default Index;

ui/src/router/routes.ts

@@ -83,7 +83,7 @@ const routes: RouteNode[] = [
           return guard.activated();
         },
       },
-      // users
+      // for users
       {
         path: 'users/:username',
         page: 'pages/Users/Personal',
@@ -264,6 +264,11 @@ const routes: RouteNode[] = [
           },
         ],
       },
+      // for review
+      {
+        path: 'review',
+        page: 'pages/Review',
+      },
       {
         path: '*',
         page: 'pages/404',