/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io) * (c) 2019 - 2021 Nguyen Huu Phuoc */ import * as React from 'react'; import { Helmet } from 'react-helmet'; import Pattern from '../../constants/Pattern'; import random from '../../helpers/random'; import DetailsLayout from '../../layouts/DetailsLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return (
...
...
`} css={` .container { /* Center the content */ align-items: center; display: inline-flex; flex-direction: column; } .container__value { /* Big font size */ font-size: 4rem; font-weight: 500; } .container__label { /* Smaller font size */ font-size: 1rem; font-weight: 700; /* Uppercase the label */ text-transform: uppercase; } `} >
{random(1000, 9999).toLocaleString()}
stars
); }; export default Details;