Add app grid.

c83e0e73 · Yuri Mikhin · Yuri Mikhin · ff56d4a8 · c83e0e73 · c83e0e73
Commit c83e0e73 authored Sep 16, 2022 by Yuri Mikhin Committed by Yuri Mikhin Sep 19, 2022
7 changed files
--- a/pages/[network_type]/[network_sub_type]/apps.tsx
+++ b/pages/[network_type]/[network_sub_type]/apps.tsx
+import Apps from '~/ui/pages/Apps';
+import Head from 'next/head';
+import React from 'react';
+
+const AppsPage = () => {
+  return (
+    <>
+      <Head><title>Apps</title></Head>
+      <Apps/>
+    </>
+  );
+};
+
+export default AppsPage;
--- a/types/client/apps.ts
+++ b/types/client/apps.ts
+export type AppCategory = {
+  id: string;
+  name: string;
+}
+
+export type AppItemPreview = {
+  id: string;
+  title: string;
+  logo: string;
+  shortDescription: string;
+  categories: Array<AppCategory>;
+}
+
+export type AppItemOverview = AppItemPreview & {
+  url: string;
+  description: string;
+  site: string;
+  twitter: string;
+  telegram: string;
+  github: string;
+}
--- a/ui/apps/AppCard.tsx
+++ b/ui/apps/AppCard.tsx
+import { Box, Image, Text, useColorModeValue } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AppItemPreview } from '~/types/client/apps';
+
+const AppCard = ({ title, logo, shortDescription, categories }: AppItemPreview) => {
+  const categoriesLabel = categories.map(c => c.name).join(', ');
+
+  return (
+    <Box
+      height="100%"
+      padding={{ base: '16px', md: '20px' }}
+      boxShadow={ `0 0 0 1px ${ useColorModeValue('var(--chakra-colors-gray-200)', 'var(--chakra-colors-gray-600)') }` }
+    >
+      <Box overflow="hidden" height="100%">
+        <Box
+          marginBottom={ 4 }
+          w={{ base: '64px', lg: '96px' }}
+          h={{ base: '64px', lg: '96px' }}
+        >
+          <Image
+            src={ logo }
+            alt={ `${ title } app icon` }
+          />
+        </Box>
+
+        <Text
+          as="h3"
+          marginBottom={ 2 }
+          fontSize={{ base: 'sm', lg: 'lg' }}
+          fontWeight="semibold"
+        >
+          { title }
+        </Text>
+
+        <Text
+          marginBottom={ 2 }
+          variant="secondary"
+          fontSize="xs"
+        >
+          { categoriesLabel }
+        </Text>
+
+        <Text
+          fontSize={{ base: 'xs', lg: 'sm' }}
+          lineHeight="20px"
+          style={{
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: 4,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+          }}
+          overflow="hidden"
+        >
+          { shortDescription }
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default AppCard;
--- a/ui/apps/AppList.tsx
+++ b/ui/apps/AppList.tsx
+import { Text, Grid, GridItem, VisuallyHidden } from '@chakra-ui/react';
+import AppCard from '~/ui/apps/AppCard';
+import React from 'react';
+
+import type { AppItemOverview } from '~/types/client/apps';
+
+type Props = {
+  apps: Array<AppItemOverview>;
+}
+
+const AppList = ({ apps }: Props) => {
+  return (
+    <>
+      <VisuallyHidden>
+        <Text as="h2">App list</Text>
+      </VisuallyHidden>
+
+      <Grid
+        templateColumns={{
+          base: 'repeat(auto-fill, minmax(140px, 1fr))',
+          lg: 'repeat(auto-fill, minmax(260px, 1fr))',
+        }}
+        autoRows="1fr"
+        gap={{ base: '1px', lg: '24px' }}
+      >
+        { apps.map((app) => (
+          <GridItem
+            key={ app.id }
+          >
+            <AppCard
+              id={ app.id }
+              title={ app.title }
+              logo={ app.logo }
+              shortDescription={ app.shortDescription }
+              categories={ app.categories }
+            />
+          </GridItem>
+        )) }
+      </Grid>
+    </>
+  );
+};
+
+export default AppList;
--- a/ui/apps/contants.ts
+++ b/ui/apps/contants.ts
--- a/ui/pages/Apps.tsx
+++ b/ui/pages/Apps.tsx
+import AppList from '~/ui/apps/AppList';
+import { TEMPORARY_DEMO_APPS } from '~/ui/apps/contants';
+import Page from '~/ui/shared/Page';
+import PageHeader from '~/ui/shared/PageHeader';
+import React from 'react';
+
+const Apps = () => {
+  return (
+    <Page>
+      <PageHeader text="Apps"/>
+      <AppList apps={ TEMPORARY_DEMO_APPS }></AppList>
+    </Page>
+  );
+};
+
+export default Apps;
--- a/ui/shared/Page.tsx
+++ b/ui/shared/Page.tsx
@@ -43,9 +43,7 @@ const Page = ({ children }: Props) => {
        <Header/>
        <Box
          as="main"
-          borderRadius="base"
          w="100%"
-          overflow="hidden"
          paddingTop={ isMobile ? '138px' : '52px' }
        >
          { children }