components#Card TypeScript Examples

Daily: FunctionComponent = () => {
    const { data, loading } = useFetch<DailyType[]>(API_BASEURL + 'daily')(
        data => data
            .map((item, index) => {
                item.confirmed.perDay = getPerDayStats({ data, index, stats: 'confirmed' })
                item.recovered.perDay = getPerDayStats({ data, index, stats: 'recovered' })
                item.deaths.perDay = getPerDayStats({ data, index, stats: 'deaths' })
                return item
            })
            .sort(({ reportDate: prev }, { reportDate: next }) => (
                new Date(next).getTime() - new Date(prev).getTime()
            ))
    )

    return (
        <ScrollableList<DailyType> title="Daily Update" data={data} loading={loading}>
            {daily => (
                <Card
                    className="text-center"
                    header={<h5 className="text-center">{dateFormat(daily.reportDate)}</h5>}
                    footer={
                        <>
                            <h3>Total</h3>
                            <div className="divider-line mt-2 mb-4" style={{ width: '30%' }} />
                            <p>Confirmed: <span className="font is-weight-bold color is-txt-warning">{daily.confirmed.total}</span></p>
                            {/* <p>Recovered: <span className="font is-weight-bold color is-txt-success">{daily.recovered.total} ({getPercentage(daily.recovered.total, daily.confirmed.total)})</span></p> */}
                            <p>Deaths: <span className="font is-weight-bold color is-txt-danger">{daily.deaths.total} ({getPercentage(daily.deaths.total, daily.confirmed.total)})</span></p>
                        </>
                    }
                >
                    <p>Confirmed: <span className="font is-weight-bold color is-txt-warning">{daily.confirmed.perDay}</span></p>
                    {/* <p>Recovered: <span className="font is-weight-bold color is-txt-success">{daily.recovered.perDay}</span></p> */}
                    <p>Deaths: <span className="font is-weight-bold color is-txt-danger">{daily.deaths.perDay}</span></p>
                </Card>
            )}
        </ScrollableList>
    )
}

Daily: FunctionComponent = () => {
    const { data, loading } = useFetch<IDFormat<IDDaily[]>>(API_INDONESIA + 'harian')(
        data => {
            data.data = data.data
                .filter(({ jumlahKasusKumulatif }) => jumlahKasusKumulatif)
                .sort(({ tanggal: prev }, { tanggal: next }) => next - prev)
            return data
        }
    )

    return (
        <ScrollableList<IDDaily> title="Daily Update" loading={loading} data={data?.data}>
            {data => (
                <Card
                    className="text-center"
                    header={<h5 className="text-center">(Hari ke-#{data.harike}) {dateFormat(data.tanggal, false, 'id-ID')}</h5>}
                    footer={
                        <>
                            <h3>Akumulasi</h3>
                            <div className="divider-line mt-2 mb-4" style={{ width: '30%' }} />
                            <p>Positif: <span className="font is-weight-bold color is-txt-warning">{data.jumlahKasusKumulatif}</span></p>
                            <p>Aktif: <span className="font is-weight-bold color is-txt-warning">{data.jumlahpasiendalamperawatan} ({getPercentage(data.jumlahpasiendalamperawatan, data.jumlahKasusKumulatif)})</span></p>
                            <p>Sembuh: <span className="font is-weight-bold color is-txt-success">{data.jumlahPasienSembuh} ({getPercentage(data.jumlahPasienSembuh, data.jumlahKasusKumulatif)})</span></p>
                            <p>Meninggal: <span className="font is-weight-bold color is-txt-danger">{data.jumlahPasienMeninggal} ({getPercentage(data.jumlahPasienMeninggal, data.jumlahKasusKumulatif)})</span></p>
                        </>
                    }
                >
                    <p>Positif: <span className="font is-weight-bold color is-txt-warning">{data.jumlahKasusBaruperHari}</span></p>
                    <p>Sembuh: <span className="font is-weight-bold color is-txt-success">{data.jumlahKasusSembuhperHari}</span></p>
                    <p>Meninggal: <span className="font is-weight-bold color is-txt-danger">{data.jumlahKasusMeninggalperHari}</span></p>
                </Card>
            )}
        </ScrollableList>
    )
}

describe('Card Footer', () => {
  it('should render correctly', () => {
    const wrapper = mount(
      <Card>
        <p>card</p>
        <Card.Footer>footer</Card.Footer>
      </Card>,
    )
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work properly when use alone', () => {
    const wrapper = mount(<Card.Footer>footer</Card.Footer>)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should work with disable-auto-margin', () => {
    const wrapper = mount(<Card.Footer disableAutoMargin>footer</Card.Footer>)
    expect(wrapper.html()).toMatchSnapshot()
    expect(() => wrapper.unmount()).not.toThrow()
  })
})

Colors: React.FC<React.PropsWithChildren<unknown>> = () => {
  const theme = useTheme()

  return (
    <div className="colors">
      <Grid.Container gap={1} pl={0} mr="10px">
        {types.map((type, index) => {
          return (
            <Grid xs={12} key={`${type}-${index}`}>
              <Card w="100%" type={type as CardTypes}>
                {type}
              </Card>
            </Grid>
          )
        })}
      </Grid.Container>
      <style jsx>{`
        .colors {
          display: flex;
          flex-wrap: wrap;
        }

        .color-card {
          display: flex;
          width: 9rem;
          margin-right: ${theme.layout.gapHalf};
          margin-bottom: ${theme.layout.gapHalf};
        }
      `}</style>
    </div>
  )
}

export default function Home() {
  const { demos, searchText, setSearchText } = useSearchApi();

  const handleChange = ({
    target: { value },
  }: ChangeEvent<HTMLInputElement>) => {
    setSearchText(value);
  };

  const handleClear = () => {
    setSearchText('');
  };

  return (
    <>
      <InputSearch
        placeholder="Search by API names"
        value={searchText}
        onClear={handleClear}
        onChange={handleChange}
      />

      {demos.length ? (
        <div
          className="
            tw-w-full
            tw-max-w-container
            tw-m-auto
            tw-mt-4
            md:tw-mt-8
            tw-grid
            tw-grid-cols-1
            tw-gap-4
            md:tw-grid-cols-2
            lg:tw-grid-cols-3
            xl:tw-grid-cols-4
          "
        >
          {demos.map((demo: Demo, index: number) => (
            <Card data={demo} key={index} />
          ))}
        </div>
      ) : (
        <div className="not-found">{NOT_FOUND_TEXT}</div>
      )}
    </>
  );
}

Page: NextPage = () => {
    const { data, loading } = useFetch<IDFormat<IDCases[]>>(API_INDONESIA + 'kasus/old')()

    return (
        <>
            <Head>
                <title>Indonesia Case Details | COVID-19 Visualized</title>
                {meta}
            </Head>

            <div className="text-center my-12">
                <h1 className="my-2">Indonesia Detail Cases</h1>
                <h6 className="color is-txt-warning">{data?.warning}</h6>
            </div>

            <div className="divider-line" />

            <div className="btn-link my-24">
                <Link href="/indonesia">
                    <Button block color="secondary" text="< Back to Indonesia Cases" />
                </Link>
            </div>
            
            <ScrollableList<IDCases> title="Data Cases" data={data?.data} loading={loading}>
                {data => (
                    <Card
                        className="text-center"
                        header={<h5 className="text-center">(#{data.no}) {data.kota ? `${data.kota}, ${data.provinsi}` : data.provinsi}</h5>}
                        footer={
                            <span className="font is-size-small">
                                {data.keterangan || 'Tidak ada keterangan'}; {data.dirawatdi ? `(Sedang dirawat di ${data.dirawatdi}); ` : ''}{data.kondisiKesehatan ? `Kodisi: ${data.kondisiKesehatan};` : ''}
                            </span>
                        }
                    >
                        <p>Usia: <span className="font is-weight-bold">{data.usia ? `${data.usia} tahun` : 'Tidak diketahui'}</span></p>
                        <p>Jenis Kelamin: <span className="font is-weight-bold">{data.jk === 'P'
                            ? 'Wanita'
                            : data.jk === 'L'
                                ? 'Pria'
                                : 'Tidak diketahui'
                        }</span></p>
                        <p>Status: <span className={`font color is-weight-bold is-txt-${data.status === 'Aktif' ? 'warning' : data.status === 'Sembuh' ? 'success' : data.status === 'Meninggal' ? 'danger' : ''}`}>{data.status || 'Tidak diketahui'}</span></p>
                        <p>Kluster: <span className="font is-weight-bold ">{data.kluster || 'Tidak diketahui'}</span></p>
                        <p className="mt-8">Positif: <span className="font is-weight-bold">{data.positif ? dateFormat(+data.positif, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                        <p>Mulai Gejala: <span className="font is-weight-bold">{data.mulaiGejala ? dateFormat(+data.mulaiGejala, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                        <p>Mulai Di Isolasi: <span className="font is-weight-bold">{data.mulaiDiisolasi ? dateFormat(+data.mulaiDiisolasi, false, 'id-ID') : 'Tidak diketahui'}</span></p>
                    </Card>
                )}
            </ScrollableList>
        </>
    )
}

describe('Card', () => {
  it('should render correctly', () => {
    const wrapper = mount(<Card>card</Card>)
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should support shadow and hoverable', () => {
    const wrapper = render(
      <div>
        <Card hoverable>card</Card>
        <Card shadow>card</Card>
        <Card shadow hoverable>
          card
        </Card>
      </div>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('should support card types', () => {
    const wrapper = mount(
      <div>
        <Card type="secondary">card</Card>
        <Card type="success">card</Card>
        <Card type="violet">card</Card>
        <Card type="lite">card</Card>
        <Card type="cyan">card</Card>
        <Card type="secondary">card</Card>
        <Card type="warning">card</Card>
      </div>,
    )
    expect(() => wrapper.unmount()).not.toThrow()
  })

  it('should render correctly when nested', () => {
    const wrapper = render(
      <Card>
        <Card shadow>
          <Card>card</Card>
        </Card>
      </Card>,
    )
    expect(wrapper).toMatchSnapshot()
  })

  it('the component Card.Content should be injected automatically', () => {
    const card = mount(<Card>test-value</Card>)
    const content = mount(
      <Card>
        <Card.Content>test-value</Card.Content>
      </Card>,
    )
    expect(card.html()).toEqual(content.html())
  })
})

HomeCell: React.FC<HomeCellProps> = ({ url, title, desc, icon }) => {
  const theme = useTheme()
  return (
    <NextLink href={url} passHref>
      <Link>
        <Card padding="5px" shadow width="100%">
          <h4 className="feature__title">
            <div className="feature__icon">{icon}</div>
            {title}
          </h4>
          <p className="feature__description">{desc}</p>
        </Card>
        <style jsx>{`
          .feature__title {
            display: flex;
            flex-direction: row;
            align-items: center;
          }
          .feature__icon {
            height: 2.5rem;
            width: 2.5rem;
            padding: 0.625rem;
            margin-right: ${theme.layout.gapHalf};
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(#3291ff, #0761d1);
            color: #fff;
            border-radius: 2rem;
          }
          .feature__icon :global(svg) {
            width: 100%;
            height: 100%;
          }
          .feature__description {
            color: ${theme.palette.accents_6};
          }
        `}</style>
      </Link>
    </NextLink>
  )
}

IconsGallery: React.FC<unknown> = () => {
  const { isChinese } = useConfigs()
  const { setVisible, bindings: modalBindings } = useModal()
  const { state: query, bindings } = useInput('')
  const [importStr, setImportStr] = useState({ title: '', single: '', normal: '' })
  const icons = Object.entries(Icons).filter(
    ([name]) => !query || name.toLowerCase().includes(query.toLowerCase()),
  )
  const onCellClick = (name: string) => {
    const { single, normal } = getImportString(name)
    setImportStr({ title: name, single, normal })
    setVisible(true)
  }

  return (
    <>
      <h3 className="title">{isChinese ? '图标画廊' : 'Icons Gallery'}</h3>
      <Card>
        <Input
          width="100%"
          icon={<Icons.Search />}
          placeholder={isChinese ? '搜索' : 'Search'}
          {...bindings}
        />
        <div className="icons-grid">
          {icons.map(([name, component], index) => (
            <IconsCell
              name={name}
              component={component}
              key={`${name}-${index}`}
              onClick={onCellClick}
            />
          ))}
        </div>
        <Modal {...modalBindings}>
          <Modal.Title>{importStr.title}</Modal.Title>
          <Modal.Content>
            <p>{isChinese ? '引入:' : 'Import:'}</p>
            <ImportSnippet>{importStr.normal}</ImportSnippet>
            <p>{isChinese ? '引入单个组件:' : 'Import single component:'}</p>
            <ImportSnippet>{importStr.single}</ImportSnippet>
          </Modal.Content>
        </Modal>
      </Card>
      <style jsx>{`
        .title {
          line-height: 1;
          margin-top: 75px;
          margin-bottom: 30px;
        }

        :global(input) {
          margin-bottom: 4px !important;
        }

        .icons-grid {
          display: flex;
          flex-wrap: wrap;
          margin-top: 8pt;
          justify-content: space-around;
        }
      `}</style>
    </>
  )
}

AttributesTable: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
  const theme = useTheme()

  return (
    <Card className="attr">
      {children}
      <style jsx global>{`
        .attr .pre {
          margin-top: 12px !important;
        }
        .attr table {
          margin-top: 12px;
          margin-right: ${theme.layout.gap};
        }
        .attr h4.title {
          margin-top: calc(${theme.layout.gap} * 2.2);
        }
        .attr h4.title:first-of-type {
          margin-top: 0;
        }
        .attr table {
          border-collapse: separate;
          border-spacing: 0;
          width: 100%;
        }
        .attr thead th td {
          height: 2.5rem;
        }
        .attr tbody tr td {
          height: 3.333rem;
        }
        .attr th,
        .attr td {
          padding: 0 0.625rem;
          text-align: left;
        }
        .attr th {
          height: 2.5rem;
          color: ${theme.palette.accents_5};
          font-size: 0.75rem;
          font-weight: 400;
          letter-spacing: 0;
          background: ${theme.palette.accents_1};
          border-bottom: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
        }
        .attr th:nth-child(1) {
          border-bottom: 1px solid ${theme.palette.border};
          border-left: 1px solid ${theme.palette.border};
          border-radius: 4px 0 0 4px;
          border-top: 1px solid ${theme.palette.border};
        }
        .attr th:last-child {
          border-bottom: 1px solid ${theme.palette.border};
          border-radius: 0 4px 4px 0;
          border-right: 1px solid ${theme.palette.border};
          border-top: 1px solid ${theme.palette.border};
        }
        .attr tr td {
          border-bottom: 1px solid ${theme.palette.border};
          color: ${theme.palette.accents_6};
          font-size: 0.875rem;
          height: 2.5rem;
        }
        .attr td:nth-child(1) {
          border-left: 1px solid transparent;
        }
        @media only screen and (max-width: ${theme.layout.breakpointMobile}) {
          .attr {
            overflow-x: scroll;
          }
          .attr::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
        }
      `}</style>
    </Card>
  )
}