From 7890b9be482a9a56710c6ce53885897aabfb8671 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 27 Sep 2021 21:31:54 +0700 Subject: [PATCH] Categorize patterns --- client/components/CoverCard.tsx | 32 --- client/components/Product.tsx | 2 +- client/components/RelatedPatterns.tsx | 2 +- client/constants/ProductList.ts | 71 ------- client/constants/ProductModel.ts | 11 - client/helpers/random.ts | 8 - client/helpers/randomFromArray.ts | 10 - client/helpers/slug.ts | 8 - client/layouts/DetailsLayout.tsx | 4 +- client/layouts/Footer.tsx | 86 -------- client/layouts/Header.tsx | 43 ---- client/layouts/Layout.tsx | 25 --- client/layouts/footer.css | 47 ---- client/layouts/header.css | 21 -- client/loaders/CoverLoader.tsx | 18 -- client/loaders/DetailsLoader.tsx | 53 ----- client/loaders/spinner.css | 21 -- client/pages/ExplorePage.tsx | 201 ------------------ client/pages/HomePage.tsx | 117 ---------- client/pages/PatternPage.tsx | 29 --- client/pages/explorePage.css | 9 - client/pages/homePage.css | 102 --------- components/CoverCard.tsx | 151 +++++++++++++ {client/constants => constants}/Pattern.ts | 11 +- pages/_document.tsx | 2 +- pages/index.tsx | 135 ++++++++++++ .../patterns => patterns}/accordion/Cover.tsx | 0 .../accordion/Details.tsx | 0 .../arrow-buttons/Cover.tsx | 0 .../arrow-buttons/Details.tsx | 0 .../avatar-list/Cover.tsx | 0 .../avatar-list/Details.tsx | 0 .../patterns => patterns}/avatar/Cover.tsx | 0 .../patterns => patterns}/avatar/Details.tsx | 0 {client/patterns => patterns}/badge/Cover.tsx | 0 .../patterns => patterns}/badge/Details.tsx | 0 .../breadcrumb/Cover.tsx | 0 .../breadcrumb/Details.tsx | 0 .../button-with-icon/Cover.tsx | 0 .../button-with-icon/Details.tsx | 0 .../card-layout/Cover.tsx | 0 .../card-layout/Details.tsx | 0 {client/patterns => patterns}/card/Cover.tsx | 0 .../patterns => patterns}/card/Details.tsx | 0 .../patterns => patterns}/centering/Cover.tsx | 0 .../centering/Details.tsx | 0 {client/patterns => patterns}/chip/Cover.tsx | 0 .../patterns => patterns}/chip/Details.tsx | 0 .../patterns => patterns}/chip/InputChip.tsx | 0 .../circular-navigation/Cover.tsx | 0 .../circular-navigation/Details.tsx | 0 .../close-button/Cover.tsx | 0 .../close-button/Details.tsx | 0 .../color-swatch/Cover.tsx | 0 .../color-swatch/Details.tsx | 0 .../concave-corners/Cover.tsx | 0 .../concave-corners/Details.tsx | 0 .../concave-corners/concave-corners.css | 0 .../cookie-banner/Cover.tsx | 0 .../cookie-banner/Details.tsx | 0 .../corner-ribbon/Cover.tsx | 0 .../corner-ribbon/Details.tsx | 0 .../curved-background/Cover.tsx | 0 .../curved-background/Details.tsx | 0 .../custom-checkbox-button/Cover.tsx | 0 .../custom-checkbox-button/Details.tsx | 0 .../custom-radio-button/Cover.tsx | 0 .../custom-radio-button/Details.tsx | 0 .../diagonal-section/Cover.tsx | 0 .../diagonal-section/Details.tsx | 0 .../docked-at-corner/Cover.tsx | 0 .../docked-at-corner/Details.tsx | 0 .../dot-leader/Cover.tsx | 0 .../dot-leader/Details.tsx | 0 .../dot-navigation/Cover.tsx | 0 .../dot-navigation/Details.tsx | 0 .../patterns => patterns}/drawer/Cover.tsx | 0 .../patterns => patterns}/drawer/Details.tsx | 0 .../patterns => patterns}/drop-area/Cover.tsx | 0 .../drop-area/Details.tsx | 0 .../patterns => patterns}/drop-cap/Cover.tsx | 0 .../drop-cap/Details.tsx | 0 .../drop-cap/dropcap.css | 0 .../patterns => patterns}/dropdown/Cover.tsx | 0 .../dropdown/Details.tsx | 0 .../dropdown/dropdown.css | 0 .../fading-long-section/Cover.tsx | 2 +- .../fading-long-section/Details.tsx | 0 .../feature-comparison/Cover.tsx | 0 .../feature-comparison/Details.tsx | 0 .../feature-list/Cover.tsx | 0 .../feature-list/Details.tsx | 0 .../fixed-at-corner/Cover.tsx | 0 .../fixed-at-corner/Details.tsx | 0 .../fixed-at-side/Cover.tsx | 0 .../fixed-at-side/Details.tsx | 0 .../floating-label/Cover.tsx | 0 .../floating-label/Details.tsx | 0 .../floating-label/floating-label.css | 0 .../folder-structure/Cover.tsx | 0 .../folder-structure/Details.tsx | 0 .../folder-structure/folder-structure.css | 0 .../full-background/Cover.tsx | 0 .../full-background/Details.tsx | 0 .../full-screen-menu/Cover.tsx | 0 .../full-screen-menu/Details.tsx | 0 .../holy-grail/Cover.tsx | 0 .../holy-grail/Details.tsx | 0 .../initial-avatar/Cover.tsx | 0 .../initial-avatar/Details.tsx | 0 .../input-addon/Cover.tsx | 0 .../input-addon/Details.tsx | 0 .../inverted-corners/Cover.tsx | 0 .../inverted-corners/Details.tsx | 0 .../inverted-corners/inverted-corners.css | 0 .../keyboard-shortcut/Cover.tsx | 0 .../keyboard-shortcut/Details.tsx | 0 .../layered-card/Cover.tsx | 0 .../layered-card/Details.tsx | 0 .../layered-card/styles.css | 0 .../lined-paper/Cover.tsx | 0 .../lined-paper/Details.tsx | 0 .../masonry-grid/Cover.tsx | 0 .../masonry-grid/Details.tsx | 0 .../masonry-grid/masonry-grid.css | 0 .../media-object/Cover.tsx | 0 .../media-object/Details.tsx | 0 .../patterns => patterns}/mega-menu/Cover.tsx | 0 .../mega-menu/Details.tsx | 0 .../mega-menu/mega-menu.css | 0 {client/patterns => patterns}/menu/Cover.tsx | 0 .../patterns => patterns}/menu/Details.tsx | 0 {client/patterns => patterns}/menu/menu.css | 0 {client/patterns => patterns}/modal/Cover.tsx | 0 .../patterns => patterns}/modal/Details.tsx | 0 .../nested-dropdowns/Cover.tsx | 0 .../nested-dropdowns/Details.tsx | 0 .../nested-dropdowns/nested-dropdowns.css | 0 .../notification/Cover.tsx | 0 .../notification/Details.tsx | 0 .../overlay-play-button/Cover.tsx | 0 .../overlay-play-button/Details.tsx | 0 .../pagination/Cover.tsx | 0 .../pagination/Details.tsx | 0 .../popover-arrow/Cover.tsx | 0 .../popover-arrow/Details.tsx | 0 .../presence-indicator/Cover.tsx | 0 .../presence-indicator/Details.tsx | 0 .../previous-next-buttons/Cover.tsx | 0 .../previous-next-buttons/Details.tsx | 0 .../patterns => patterns}/price-tag/Cover.tsx | 0 .../price-tag/Details.tsx | 0 .../price-tag/price-tag.css | 0 .../pricing-table/Cover.tsx | 0 .../pricing-table/Details.tsx | 0 .../progress-bar/Cover.tsx | 0 .../progress-bar/Details.tsx | 0 .../property-list/Cover.tsx | 0 .../property-list/Details.tsx | 0 .../questions-and-answers/Cover.tsx | 0 .../questions-and-answers/Details.tsx | 0 .../radial-progress-bar/Cover.tsx | 0 .../radial-progress-bar/Details.tsx | 0 .../radio-button-group/Cover.tsx | 0 .../radio-button-group/Details.tsx | 0 .../radio-button-group/radio-button-group.css | 0 .../radio-switch/Cover.tsx | 0 .../radio-switch/Details.tsx | 0 .../patterns => patterns}/rating/Cover.tsx | 0 .../patterns => patterns}/rating/Details.tsx | 0 {client/patterns => patterns}/rating/Star.tsx | 0 {client/patterns => patterns}/rating/star.css | 0 .../resizable-element/Cover.tsx | 0 .../resizable-element/Details.tsx | 0 .../patterns => patterns}/ribbon/Cover.tsx | 0 .../patterns => patterns}/ribbon/Details.tsx | 0 .../same-height-columns/Cover.tsx | 0 .../same-height-columns/Details.tsx | 0 .../search-box/Cover.tsx | 0 .../search-box/Details.tsx | 0 .../patterns => patterns}/separator/Cover.tsx | 0 .../separator/Details.tsx | 0 .../patterns => patterns}/sidebar/Cover.tsx | 0 .../patterns => patterns}/sidebar/Details.tsx | 0 .../simple-grid/Cover.tsx | 0 .../simple-grid/Details.tsx | 0 .../patterns => patterns}/slider/Cover.tsx | 0 .../patterns => patterns}/slider/Details.tsx | 0 .../spin-button/Cover.tsx | 0 .../spin-button/Details.tsx | 0 .../split-navigation/Cover.tsx | 0 .../split-navigation/Details.tsx | 0 .../split-screen/Cover.tsx | 0 .../split-screen/Details.tsx | 0 .../stacked-cards/Cover.tsx | 0 .../stacked-cards/Details.tsx | 0 .../stamp-border/Cover.tsx | 0 .../stamp-border/Details.tsx | 0 .../patterns => patterns}/statistic/Cover.tsx | 0 .../statistic/Details.tsx | 2 +- .../status-light/Cover.tsx | 0 .../status-light/Details.tsx | 0 .../stepper-input/Cover.tsx | 0 .../stepper-input/Details.tsx | 0 .../sticky-footer/Cover.tsx | 0 .../sticky-footer/Details.tsx | 0 .../sticky-header/Cover.tsx | 0 .../sticky-header/Details.tsx | 0 .../sticky-sections/Cover.tsx | 0 .../sticky-sections/Details.tsx | 0 .../sticky-table-column/Cover.tsx | 0 .../sticky-table-column/Details.tsx | 0 .../sticky-table-headers/Cover.tsx | 0 .../sticky-table-headers/Details.tsx | 0 .../patterns => patterns}/switch/Cover.tsx | 0 .../patterns => patterns}/switch/Details.tsx | 0 {client/patterns => patterns}/tab/Cover.tsx | 0 {client/patterns => patterns}/tab/Details.tsx | 0 .../patterns => patterns}/teardrop/Cover.tsx | 0 .../teardrop/Details.tsx | 0 .../three-dimensions-card/Cover.tsx | 0 .../three-dimensions-card/Details.tsx | 0 .../three-dimensions-card/styles.css | 0 .../patterns => patterns}/timeline/Cover.tsx | 0 .../timeline/Details.tsx | 0 .../toggle-password-visibility/Cover.tsx | 0 .../toggle-password-visibility/Details.tsx | 0 .../patterns => patterns}/tooltip/Cover.tsx | 0 .../patterns => patterns}/tooltip/Details.tsx | 0 .../patterns => patterns}/tooltip/tooltip.css | 0 .../tree-diagram/Cover.tsx | 0 .../tree-diagram/Details.tsx | 0 .../tree-diagram/tree-diagram.css | 0 .../triangle-buttons/Cover.tsx | 0 .../triangle-buttons/Details.tsx | 0 .../upload-button/Cover.tsx | 0 .../upload-button/Details.tsx | 0 .../validation-icon/Cover.tsx | 0 .../validation-icon/Details.tsx | 0 .../video-background/Cover.tsx | 0 .../video-background/Details.tsx | 0 .../patterns => patterns}/voting/Cover.tsx | 0 .../patterns => patterns}/voting/Details.tsx | 0 .../patterns => patterns}/watermark/Cover.tsx | 0 .../watermark/Details.tsx | 0 .../patterns => patterns}/wizard/Cover.tsx | 0 .../patterns => patterns}/wizard/Details.tsx | 0 .../zigzag-timeline/Cover.tsx | 0 .../zigzag-timeline/Details.tsx | 0 .../zigzag-timeline/zigzag-timeline.css | 0 .../placeholders => placeholders}/Block.tsx | 0 .../BrowserFrame.tsx | 0 .../placeholders => placeholders}/Circle.tsx | 0 .../placeholders => placeholders}/Frame.tsx | 0 .../placeholders => placeholders}/Line.tsx | 0 .../Rectangle.tsx | 0 .../placeholders => placeholders}/Square.tsx | 0 .../Triangle.tsx | 0 .../VerticalLine.tsx | 0 .../browserFrame.css | 0 .../blocks/_cover.scss | 11 +- styles/index.scss | 6 +- styles/pages/_home.scss | 28 +++ utils/random.ts | 1 + utils/randomFromArray.ts | 3 + {client/helpers => utils}/randomIterms.ts | 9 +- utils/slug.ts | 1 + 267 files changed, 337 insertions(+), 945 deletions(-) delete mode 100644 client/components/CoverCard.tsx delete mode 100644 client/constants/ProductList.ts delete mode 100644 client/constants/ProductModel.ts delete mode 100644 client/helpers/random.ts delete mode 100644 client/helpers/randomFromArray.ts delete mode 100644 client/helpers/slug.ts delete mode 100644 client/layouts/Footer.tsx delete mode 100644 client/layouts/Header.tsx delete mode 100644 client/layouts/Layout.tsx delete mode 100644 client/layouts/footer.css delete mode 100644 client/layouts/header.css delete mode 100644 client/loaders/CoverLoader.tsx delete mode 100644 client/loaders/DetailsLoader.tsx delete mode 100644 client/loaders/spinner.css delete mode 100644 client/pages/ExplorePage.tsx delete mode 100644 client/pages/HomePage.tsx delete mode 100644 client/pages/PatternPage.tsx delete mode 100644 client/pages/explorePage.css delete mode 100644 client/pages/homePage.css create mode 100644 components/CoverCard.tsx rename {client/constants => constants}/Pattern.ts (94%) rename {client/patterns => patterns}/accordion/Cover.tsx (100%) rename {client/patterns => patterns}/accordion/Details.tsx (100%) rename {client/patterns => patterns}/arrow-buttons/Cover.tsx (100%) rename {client/patterns => patterns}/arrow-buttons/Details.tsx (100%) rename {client/patterns => patterns}/avatar-list/Cover.tsx (100%) rename {client/patterns => patterns}/avatar-list/Details.tsx (100%) rename {client/patterns => patterns}/avatar/Cover.tsx (100%) rename {client/patterns => patterns}/avatar/Details.tsx (100%) rename {client/patterns => patterns}/badge/Cover.tsx (100%) rename {client/patterns => patterns}/badge/Details.tsx (100%) rename {client/patterns => patterns}/breadcrumb/Cover.tsx (100%) rename {client/patterns => patterns}/breadcrumb/Details.tsx (100%) rename {client/patterns => patterns}/button-with-icon/Cover.tsx (100%) rename {client/patterns => patterns}/button-with-icon/Details.tsx (100%) rename {client/patterns => patterns}/card-layout/Cover.tsx (100%) rename {client/patterns => patterns}/card-layout/Details.tsx (100%) rename {client/patterns => patterns}/card/Cover.tsx (100%) rename {client/patterns => patterns}/card/Details.tsx (100%) rename {client/patterns => patterns}/centering/Cover.tsx (100%) rename {client/patterns => patterns}/centering/Details.tsx (100%) rename {client/patterns => patterns}/chip/Cover.tsx (100%) rename {client/patterns => patterns}/chip/Details.tsx (100%) rename {client/patterns => patterns}/chip/InputChip.tsx (100%) rename {client/patterns => patterns}/circular-navigation/Cover.tsx (100%) rename {client/patterns => patterns}/circular-navigation/Details.tsx (100%) rename {client/patterns => patterns}/close-button/Cover.tsx (100%) rename {client/patterns => patterns}/close-button/Details.tsx (100%) rename {client/patterns => patterns}/color-swatch/Cover.tsx (100%) rename {client/patterns => patterns}/color-swatch/Details.tsx (100%) rename {client/patterns => patterns}/concave-corners/Cover.tsx (100%) rename {client/patterns => patterns}/concave-corners/Details.tsx (100%) rename {client/patterns => patterns}/concave-corners/concave-corners.css (100%) rename {client/patterns => patterns}/cookie-banner/Cover.tsx (100%) rename {client/patterns => patterns}/cookie-banner/Details.tsx (100%) rename {client/patterns => patterns}/corner-ribbon/Cover.tsx (100%) rename {client/patterns => patterns}/corner-ribbon/Details.tsx (100%) rename {client/patterns => patterns}/curved-background/Cover.tsx (100%) rename {client/patterns => patterns}/curved-background/Details.tsx (100%) rename {client/patterns => patterns}/custom-checkbox-button/Cover.tsx (100%) rename {client/patterns => patterns}/custom-checkbox-button/Details.tsx (100%) rename {client/patterns => patterns}/custom-radio-button/Cover.tsx (100%) rename {client/patterns => patterns}/custom-radio-button/Details.tsx (100%) rename {client/patterns => patterns}/diagonal-section/Cover.tsx (100%) rename {client/patterns => patterns}/diagonal-section/Details.tsx (100%) rename {client/patterns => patterns}/docked-at-corner/Cover.tsx (100%) rename {client/patterns => patterns}/docked-at-corner/Details.tsx (100%) rename {client/patterns => patterns}/dot-leader/Cover.tsx (100%) rename {client/patterns => patterns}/dot-leader/Details.tsx (100%) rename {client/patterns => patterns}/dot-navigation/Cover.tsx (100%) rename {client/patterns => patterns}/dot-navigation/Details.tsx (100%) rename {client/patterns => patterns}/drawer/Cover.tsx (100%) rename {client/patterns => patterns}/drawer/Details.tsx (100%) rename {client/patterns => patterns}/drop-area/Cover.tsx (100%) rename {client/patterns => patterns}/drop-area/Details.tsx (100%) rename {client/patterns => patterns}/drop-cap/Cover.tsx (100%) rename {client/patterns => patterns}/drop-cap/Details.tsx (100%) rename {client/patterns => patterns}/drop-cap/dropcap.css (100%) rename {client/patterns => patterns}/dropdown/Cover.tsx (100%) rename {client/patterns => patterns}/dropdown/Details.tsx (100%) rename {client/patterns => patterns}/dropdown/dropdown.css (100%) rename {client/patterns => patterns}/fading-long-section/Cover.tsx (97%) rename {client/patterns => patterns}/fading-long-section/Details.tsx (100%) rename {client/patterns => patterns}/feature-comparison/Cover.tsx (100%) rename {client/patterns => patterns}/feature-comparison/Details.tsx (100%) rename {client/patterns => patterns}/feature-list/Cover.tsx (100%) rename {client/patterns => patterns}/feature-list/Details.tsx (100%) rename {client/patterns => patterns}/fixed-at-corner/Cover.tsx (100%) rename {client/patterns => patterns}/fixed-at-corner/Details.tsx (100%) rename {client/patterns => patterns}/fixed-at-side/Cover.tsx (100%) rename {client/patterns => patterns}/fixed-at-side/Details.tsx (100%) rename {client/patterns => patterns}/floating-label/Cover.tsx (100%) rename {client/patterns => patterns}/floating-label/Details.tsx (100%) rename {client/patterns => patterns}/floating-label/floating-label.css (100%) rename {client/patterns => patterns}/folder-structure/Cover.tsx (100%) rename {client/patterns => patterns}/folder-structure/Details.tsx (100%) rename {client/patterns => patterns}/folder-structure/folder-structure.css (100%) rename {client/patterns => patterns}/full-background/Cover.tsx (100%) rename {client/patterns => patterns}/full-background/Details.tsx (100%) rename {client/patterns => patterns}/full-screen-menu/Cover.tsx (100%) rename {client/patterns => patterns}/full-screen-menu/Details.tsx (100%) rename {client/patterns => patterns}/holy-grail/Cover.tsx (100%) rename {client/patterns => patterns}/holy-grail/Details.tsx (100%) rename {client/patterns => patterns}/initial-avatar/Cover.tsx (100%) rename {client/patterns => patterns}/initial-avatar/Details.tsx (100%) rename {client/patterns => patterns}/input-addon/Cover.tsx (100%) rename {client/patterns => patterns}/input-addon/Details.tsx (100%) rename {client/patterns => patterns}/inverted-corners/Cover.tsx (100%) rename {client/patterns => patterns}/inverted-corners/Details.tsx (100%) rename {client/patterns => patterns}/inverted-corners/inverted-corners.css (100%) rename {client/patterns => patterns}/keyboard-shortcut/Cover.tsx (100%) rename {client/patterns => patterns}/keyboard-shortcut/Details.tsx (100%) rename {client/patterns => patterns}/layered-card/Cover.tsx (100%) rename {client/patterns => patterns}/layered-card/Details.tsx (100%) rename {client/patterns => patterns}/layered-card/styles.css (100%) rename {client/patterns => patterns}/lined-paper/Cover.tsx (100%) rename {client/patterns => patterns}/lined-paper/Details.tsx (100%) rename {client/patterns => patterns}/masonry-grid/Cover.tsx (100%) rename {client/patterns => patterns}/masonry-grid/Details.tsx (100%) rename {client/patterns => patterns}/masonry-grid/masonry-grid.css (100%) rename {client/patterns => patterns}/media-object/Cover.tsx (100%) rename {client/patterns => patterns}/media-object/Details.tsx (100%) rename {client/patterns => patterns}/mega-menu/Cover.tsx (100%) rename {client/patterns => patterns}/mega-menu/Details.tsx (100%) rename {client/patterns => patterns}/mega-menu/mega-menu.css (100%) rename {client/patterns => patterns}/menu/Cover.tsx (100%) rename {client/patterns => patterns}/menu/Details.tsx (100%) rename {client/patterns => patterns}/menu/menu.css (100%) rename {client/patterns => patterns}/modal/Cover.tsx (100%) rename {client/patterns => patterns}/modal/Details.tsx (100%) rename {client/patterns => patterns}/nested-dropdowns/Cover.tsx (100%) rename {client/patterns => patterns}/nested-dropdowns/Details.tsx (100%) rename {client/patterns => patterns}/nested-dropdowns/nested-dropdowns.css (100%) rename {client/patterns => patterns}/notification/Cover.tsx (100%) rename {client/patterns => patterns}/notification/Details.tsx (100%) rename {client/patterns => patterns}/overlay-play-button/Cover.tsx (100%) rename {client/patterns => patterns}/overlay-play-button/Details.tsx (100%) rename {client/patterns => patterns}/pagination/Cover.tsx (100%) rename {client/patterns => patterns}/pagination/Details.tsx (100%) rename {client/patterns => patterns}/popover-arrow/Cover.tsx (100%) rename {client/patterns => patterns}/popover-arrow/Details.tsx (100%) rename {client/patterns => patterns}/presence-indicator/Cover.tsx (100%) rename {client/patterns => patterns}/presence-indicator/Details.tsx (100%) rename {client/patterns => patterns}/previous-next-buttons/Cover.tsx (100%) rename {client/patterns => patterns}/previous-next-buttons/Details.tsx (100%) rename {client/patterns => patterns}/price-tag/Cover.tsx (100%) rename {client/patterns => patterns}/price-tag/Details.tsx (100%) rename {client/patterns => patterns}/price-tag/price-tag.css (100%) rename {client/patterns => patterns}/pricing-table/Cover.tsx (100%) rename {client/patterns => patterns}/pricing-table/Details.tsx (100%) rename {client/patterns => patterns}/progress-bar/Cover.tsx (100%) rename {client/patterns => patterns}/progress-bar/Details.tsx (100%) rename {client/patterns => patterns}/property-list/Cover.tsx (100%) rename {client/patterns => patterns}/property-list/Details.tsx (100%) rename {client/patterns => patterns}/questions-and-answers/Cover.tsx (100%) rename {client/patterns => patterns}/questions-and-answers/Details.tsx (100%) rename {client/patterns => patterns}/radial-progress-bar/Cover.tsx (100%) rename {client/patterns => patterns}/radial-progress-bar/Details.tsx (100%) rename {client/patterns => patterns}/radio-button-group/Cover.tsx (100%) rename {client/patterns => patterns}/radio-button-group/Details.tsx (100%) rename {client/patterns => patterns}/radio-button-group/radio-button-group.css (100%) rename {client/patterns => patterns}/radio-switch/Cover.tsx (100%) rename {client/patterns => patterns}/radio-switch/Details.tsx (100%) rename {client/patterns => patterns}/rating/Cover.tsx (100%) rename {client/patterns => patterns}/rating/Details.tsx (100%) rename {client/patterns => patterns}/rating/Star.tsx (100%) rename {client/patterns => patterns}/rating/star.css (100%) rename {client/patterns => patterns}/resizable-element/Cover.tsx (100%) rename {client/patterns => patterns}/resizable-element/Details.tsx (100%) rename {client/patterns => patterns}/ribbon/Cover.tsx (100%) rename {client/patterns => patterns}/ribbon/Details.tsx (100%) rename {client/patterns => patterns}/same-height-columns/Cover.tsx (100%) rename {client/patterns => patterns}/same-height-columns/Details.tsx (100%) rename {client/patterns => patterns}/search-box/Cover.tsx (100%) rename {client/patterns => patterns}/search-box/Details.tsx (100%) rename {client/patterns => patterns}/separator/Cover.tsx (100%) rename {client/patterns => patterns}/separator/Details.tsx (100%) rename {client/patterns => patterns}/sidebar/Cover.tsx (100%) rename {client/patterns => patterns}/sidebar/Details.tsx (100%) rename {client/patterns => patterns}/simple-grid/Cover.tsx (100%) rename {client/patterns => patterns}/simple-grid/Details.tsx (100%) rename {client/patterns => patterns}/slider/Cover.tsx (100%) rename {client/patterns => patterns}/slider/Details.tsx (100%) rename {client/patterns => patterns}/spin-button/Cover.tsx (100%) rename {client/patterns => patterns}/spin-button/Details.tsx (100%) rename {client/patterns => patterns}/split-navigation/Cover.tsx (100%) rename {client/patterns => patterns}/split-navigation/Details.tsx (100%) rename {client/patterns => patterns}/split-screen/Cover.tsx (100%) rename {client/patterns => patterns}/split-screen/Details.tsx (100%) rename {client/patterns => patterns}/stacked-cards/Cover.tsx (100%) rename {client/patterns => patterns}/stacked-cards/Details.tsx (100%) rename {client/patterns => patterns}/stamp-border/Cover.tsx (100%) rename {client/patterns => patterns}/stamp-border/Details.tsx (100%) rename {client/patterns => patterns}/statistic/Cover.tsx (100%) rename {client/patterns => patterns}/statistic/Details.tsx (98%) rename {client/patterns => patterns}/status-light/Cover.tsx (100%) rename {client/patterns => patterns}/status-light/Details.tsx (100%) rename {client/patterns => patterns}/stepper-input/Cover.tsx (100%) rename {client/patterns => patterns}/stepper-input/Details.tsx (100%) rename {client/patterns => patterns}/sticky-footer/Cover.tsx (100%) rename {client/patterns => patterns}/sticky-footer/Details.tsx (100%) rename {client/patterns => patterns}/sticky-header/Cover.tsx (100%) rename {client/patterns => patterns}/sticky-header/Details.tsx (100%) rename {client/patterns => patterns}/sticky-sections/Cover.tsx (100%) rename {client/patterns => patterns}/sticky-sections/Details.tsx (100%) rename {client/patterns => patterns}/sticky-table-column/Cover.tsx (100%) rename {client/patterns => patterns}/sticky-table-column/Details.tsx (100%) rename {client/patterns => patterns}/sticky-table-headers/Cover.tsx (100%) rename {client/patterns => patterns}/sticky-table-headers/Details.tsx (100%) rename {client/patterns => patterns}/switch/Cover.tsx (100%) rename {client/patterns => patterns}/switch/Details.tsx (100%) rename {client/patterns => patterns}/tab/Cover.tsx (100%) rename {client/patterns => patterns}/tab/Details.tsx (100%) rename {client/patterns => patterns}/teardrop/Cover.tsx (100%) rename {client/patterns => patterns}/teardrop/Details.tsx (100%) rename {client/patterns => patterns}/three-dimensions-card/Cover.tsx (100%) rename {client/patterns => patterns}/three-dimensions-card/Details.tsx (100%) rename {client/patterns => patterns}/three-dimensions-card/styles.css (100%) rename {client/patterns => patterns}/timeline/Cover.tsx (100%) rename {client/patterns => patterns}/timeline/Details.tsx (100%) rename {client/patterns => patterns}/toggle-password-visibility/Cover.tsx (100%) rename {client/patterns => patterns}/toggle-password-visibility/Details.tsx (100%) rename {client/patterns => patterns}/tooltip/Cover.tsx (100%) rename {client/patterns => patterns}/tooltip/Details.tsx (100%) rename {client/patterns => patterns}/tooltip/tooltip.css (100%) rename {client/patterns => patterns}/tree-diagram/Cover.tsx (100%) rename {client/patterns => patterns}/tree-diagram/Details.tsx (100%) rename {client/patterns => patterns}/tree-diagram/tree-diagram.css (100%) rename {client/patterns => patterns}/triangle-buttons/Cover.tsx (100%) rename {client/patterns => patterns}/triangle-buttons/Details.tsx (100%) rename {client/patterns => patterns}/upload-button/Cover.tsx (100%) rename {client/patterns => patterns}/upload-button/Details.tsx (100%) rename {client/patterns => patterns}/validation-icon/Cover.tsx (100%) rename {client/patterns => patterns}/validation-icon/Details.tsx (100%) rename {client/patterns => patterns}/video-background/Cover.tsx (100%) rename {client/patterns => patterns}/video-background/Details.tsx (100%) rename {client/patterns => patterns}/voting/Cover.tsx (100%) rename {client/patterns => patterns}/voting/Details.tsx (100%) rename {client/patterns => patterns}/watermark/Cover.tsx (100%) rename {client/patterns => patterns}/watermark/Details.tsx (100%) rename {client/patterns => patterns}/wizard/Cover.tsx (100%) rename {client/patterns => patterns}/wizard/Details.tsx (100%) rename {client/patterns => patterns}/zigzag-timeline/Cover.tsx (100%) rename {client/patterns => patterns}/zigzag-timeline/Details.tsx (100%) rename {client/patterns => patterns}/zigzag-timeline/zigzag-timeline.css (100%) rename {client/placeholders => placeholders}/Block.tsx (100%) rename {client/placeholders => placeholders}/BrowserFrame.tsx (100%) rename {client/placeholders => placeholders}/Circle.tsx (100%) rename {client/placeholders => placeholders}/Frame.tsx (100%) rename {client/placeholders => placeholders}/Line.tsx (100%) rename {client/placeholders => placeholders}/Rectangle.tsx (100%) rename {client/placeholders => placeholders}/Square.tsx (100%) rename {client/placeholders => placeholders}/Triangle.tsx (100%) rename {client/placeholders => placeholders}/VerticalLine.tsx (100%) rename {client/placeholders => placeholders}/browserFrame.css (100%) rename client/components/coverCard.css => styles/blocks/_cover.scss (63%) create mode 100644 styles/pages/_home.scss create mode 100644 utils/random.ts create mode 100644 utils/randomFromArray.ts rename {client/helpers => utils}/randomIterms.ts (59%) create mode 100644 utils/slug.ts diff --git a/client/components/CoverCard.tsx b/client/components/CoverCard.tsx deleted file mode 100644 index 350e12d..0000000 --- a/client/components/CoverCard.tsx +++ /dev/null @@ -1,32 +0,0 @@ -/** - * 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 { Link } from 'react-router-dom'; - -import Pattern from '../constants/Pattern'; -import slug from '../helpers/slug'; -import CoverLoader from '../loaders/CoverLoader'; -import './coverCard.css'; - -interface CoverCardProps { - pattern: Pattern; -} - -const CoverCard: React.FC = ({ pattern }) => { - return ( - - -

- {pattern} -

- - ); -}; - -export default CoverCard; diff --git a/client/components/Product.tsx b/client/components/Product.tsx index dcee56b..db153d1 100644 --- a/client/components/Product.tsx +++ b/client/components/Product.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import './product.css'; import ProductModel from '../constants/ProductModel'; -import slug from '../helpers/slug'; +import slug from '../../utils/slug'; interface ProductProps { product: ProductModel; diff --git a/client/components/RelatedPatterns.tsx b/client/components/RelatedPatterns.tsx index c403b3f..da38ae7 100644 --- a/client/components/RelatedPatterns.tsx +++ b/client/components/RelatedPatterns.tsx @@ -6,7 +6,7 @@ import * as React from 'react'; import Pattern from '../constants/Pattern'; -import CoverCard from './CoverCard'; +import CoverCard from '../../components/CoverCard'; import Heading from './Heading'; interface RelatedPatternsProps { diff --git a/client/constants/ProductList.ts b/client/constants/ProductList.ts deleted file mode 100644 index 0ab51a8..0000000 --- a/client/constants/ProductList.ts +++ /dev/null @@ -1,71 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import ProductModel from './ProductModel'; - -const ProductList: ProductModel[] = [ - { - name: 'Intersection Observer Examples', - url: 'https://intersectionobserver.io', - description: 'Practical, real world examples of Intersection Observer', - themeColor: '#024ca9', - }, - { - name: 'Blur Page', - url: 'https://blur.page', - description: 'A browser extension to hide sensitive information on a web page', - themeColor: '#4e7fb8', - }, - { - name: 'Check Browsers Support', - url: 'https://checkbrowsers.support', - description: 'A browser extension to check browser compatibility without leaving your tab', - themeColor: '#f33446', - }, - { - name: 'Form Validation', - url: 'https://formvalidation.io', - description: 'The best validation library for JavaScript', - themeColor: '#014ba6', - }, - { - name: 'React PDF Viewer', - url: 'https://react-pdf-viewer.dev', - description: 'A React component to view a PDF document', - themeColor: '#fb6303', - }, - { - name: '1 LOC', - url: 'https://1loc.dev', - description: 'Favorite JavaScript utilities in single line of code', - themeColor: '#000200', - }, - { - name: 'Front-end Tips', - url: 'https://getfrontend.tips', - description: 'Super tiny, quick tips, tricks and best practices of front-end development', - themeColor: '#2e2c74', - }, - { - name: 'HTML DOM', - url: 'https://htmldom.dev', - description: 'How to manage HTML DOM with vanilla JavaScript', - themeColor: '#5b5d8a', - }, - { - name: 'Responsive Design Patterns', - url: 'https://responsive.page', - description: 'A collection of patterns to create a responsive web page', - themeColor: '#43246d', - }, - { - name: 'this VS that', - url: 'https://thisthat.dev', - description: 'The differences between _ and _ in the front-end development', - themeColor: '#414293', - }, -]; - -export { ProductList }; diff --git a/client/constants/ProductModel.ts b/client/constants/ProductModel.ts deleted file mode 100644 index fbb1b99..0000000 --- a/client/constants/ProductModel.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -export default interface ProductModel { - name: string; - url: string; - description: string; - themeColor: string; -} diff --git a/client/helpers/random.ts b/client/helpers/random.ts deleted file mode 100644 index d1ca7fe..0000000 --- a/client/helpers/random.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min)); - -export default random; diff --git a/client/helpers/randomFromArray.ts b/client/helpers/randomFromArray.ts deleted file mode 100644 index af9da8c..0000000 --- a/client/helpers/randomFromArray.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -function randomFromArray(array: T[]): T { - return array[Math.floor(Math.random() * array.length)]; -}; - -export default randomFromArray; diff --git a/client/helpers/slug.ts b/client/helpers/slug.ts deleted file mode 100644 index 41fb445..0000000 --- a/client/helpers/slug.ts +++ /dev/null @@ -1,8 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -const slug = (item: string) => item.toLowerCase().split(' ').join('-'); - -export default slug; diff --git a/client/layouts/DetailsLayout.tsx b/client/layouts/DetailsLayout.tsx index 3c50e9f..a45f0f6 100644 --- a/client/layouts/DetailsLayout.tsx +++ b/client/layouts/DetailsLayout.tsx @@ -11,8 +11,8 @@ import Product from '../components/Product'; import { ProductList } from '../constants/ProductList'; import Pattern from '../constants/Pattern'; import randomItems from '../helpers/randomIterms'; -import slug from '../helpers/slug'; -import CoverLoader from '../loaders/CoverLoader'; +import slug from '../../utils/slug'; +import CoverLoader from '../../components/CoverLoader'; import Layout from './Layout'; interface DetailsLayoutProps { diff --git a/client/layouts/Footer.tsx b/client/layouts/Footer.tsx deleted file mode 100644 index 768833e..0000000 --- a/client/layouts/Footer.tsx +++ /dev/null @@ -1,86 +0,0 @@ -/** - * 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 './footer.css'; - -const Footer: React.FC<{}> = () => { - return ( - - ); -}; - -export default Footer; diff --git a/client/layouts/Header.tsx b/client/layouts/Header.tsx deleted file mode 100644 index 98c10f9..0000000 --- a/client/layouts/Header.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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 { Link } from 'react-router-dom'; - -import './header.css'; - -const STARS_KEY = 'stars'; - -const Header: React.FC<{}> = () => { - const stars = window.localStorage.getItem(STARS_KEY) || ''; - const [totalStars, setTotalStars] = React.useState(stars); - - React.useEffect(() => { - if (window.location.pathname === '/' || stars === '') { - fetch('https://api.github.com/repos/phuoc-ng/csslayout') - .then(res => res.json()) - .then(data => setTotalStars(data.stargazers_count)) - .catch(console.log); - } - }, []); - - React.useEffect(() => window.localStorage.setItem(STARS_KEY, totalStars), [totalStars]); - - return ( -
-
-
- - - - Patterns - {totalStars}★ -
-
-
- ); -}; - -export default Header; diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx deleted file mode 100644 index 0633eb8..0000000 --- a/client/layouts/Layout.tsx +++ /dev/null @@ -1,25 +0,0 @@ -/** - * 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 Footer from './Footer'; -import Header from './Header'; - -const Layout: React.FC<{}> = ({ children }) => { - React.useEffect(() => { - window.scrollTo(0, 0); - }, []); - - return ( - <> -
- {children} -