components#Card TypeScript Examples
The following examples show how to use
components#Card.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From covid19-visualized with MIT License | 6 votes |
|
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>
)
}
Example #2
| Source File: index.tsx From covid19-visualized with MIT License | 6 votes |
|
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>
)
}
Example #3
| Source File: footer.test.tsx From geist-ui with MIT License | 6 votes |
|
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()
})
})
Example #4
| Source File: colors.tsx From geist-ui with MIT License | 6 votes |
|
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>
)
}
Example #5
| Source File: index.page.tsx From webapis-playground with MIT License | 5 votes |
|
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>
)}
</>
);
}
Example #6
| Source File: cases.tsx From covid19-visualized with MIT License | 5 votes |
|
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>
</>
)
}
Example #7
| Source File: index.test.tsx From geist-ui with MIT License | 5 votes |
|
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())
})
})
Example #8
| Source File: home-cell.tsx From geist-ui with MIT License | 5 votes |
|
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>
)
}
Example #9
| Source File: icons-gallery.tsx From geist-ui with MIT License | 5 votes |
|
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>
</>
)
}
Example #10
| Source File: attributes-table.tsx From geist-ui with MIT License | 4 votes |
|
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>
)
}
