From f66c74d21466dc567757a1368bfd5f8f35d495a9 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 23:21:52 +0700 Subject: [PATCH] feat: Statistic --- contents/_includes/patterns/statistic.njk | 8 +++ contents/index.njk | 6 ++ contents/statistic.md | 52 ++++++++++++++ pages/statistic/index.tsx | 82 ----------------------- patterns/statistic/Cover.tsx | 36 ---------- styles/index.scss | 1 + styles/patterns/_statistic.scss | 21 ++++++ 7 files changed, 88 insertions(+), 118 deletions(-) create mode 100644 contents/_includes/patterns/statistic.njk create mode 100644 contents/statistic.md delete mode 100644 pages/statistic/index.tsx delete mode 100644 patterns/statistic/Cover.tsx create mode 100644 styles/patterns/_statistic.scss diff --git a/contents/_includes/patterns/statistic.njk b/contents/_includes/patterns/statistic.njk new file mode 100644 index 0000000..3e36453 --- /dev/null +++ b/contents/_includes/patterns/statistic.njk @@ -0,0 +1,8 @@ +
+
+ 9k+ +
+
+ stars +
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index b295572..af53ba7 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -247,6 +247,12 @@ eleventyExcludeFromCollections: true
Stamp border
+
+ +
{% include "patterns/statistic.njk" %}
+
Statistic
+ +
{% include "patterns/video-background.njk" %}
diff --git a/contents/statistic.md b/contents/statistic.md new file mode 100644 index 0000000..0e5791f --- /dev/null +++ b/contents/statistic.md @@ -0,0 +1,52 @@ +--- +layout: layouts/post.njk +title: Statistic +description: Create a statistic component with CSS flexbox +keywords: css flexbox, css statistic +--- + +## HTML + +```html +
+ +
+ ... +
+ + +
+ ... +
+
+``` + +## CSS + +```css +.statistic { + /* Center the content */ + align-items: center; + display: inline-flex; + flex-direction: column; +} + +.statistic__value { + /* Big font size */ + font-size: 4rem; + font-weight: 500; +} + +.statistic__label { + /* Smaller font size */ + font-size: 1rem; + font-weight: 700; + + /* Uppercase the label */ + text-transform: uppercase; +} +``` + +{% demo %} +{% include "patterns/statistic.njk" %} +{% enddemo %} diff --git a/pages/statistic/index.tsx b/pages/statistic/index.tsx deleted file mode 100644 index 32c9666..0000000 --- a/pages/statistic/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { random } from '../../utils/random'; -import { PatternLayout } from '../../layouts/PatternLayout'; -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; diff --git a/patterns/statistic/Cover.tsx b/patterns/statistic/Cover.tsx deleted file mode 100644 index edf3994..0000000 --- a/patterns/statistic/Cover.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
1k+
-
- stars -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 8c9ce43..a3aefd6 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -50,6 +50,7 @@ @import './patterns/separator'; @import './patterns/stacked-cards'; @import './patterns/stamp-border'; +@import './patterns/statistic'; @import './patterns/triangle-buttons'; @import './patterns/video-background'; @import './patterns/voting'; diff --git a/styles/patterns/_statistic.scss b/styles/patterns/_statistic.scss new file mode 100644 index 0000000..06b5821 --- /dev/null +++ b/styles/patterns/_statistic.scss @@ -0,0 +1,21 @@ +.statistic { + /* Center the content */ + align-items: center; + display: inline-flex; + flex-direction: column; +} + +.statistic__value { + /* Big font size */ + font-size: 3rem; + font-weight: 500; +} + +.statistic__label { + /* Smaller font size */ + font-size: 1rem; + font-weight: 700; + + /* Uppercase the label */ + text-transform: uppercase; +}