mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 10:46:13 +02:00
Categorize patterns
This commit is contained in:
Phuoc Nguyen
151
components/CoverCard.tsx
Normal file
151
components/CoverCard.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
import * as React from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { Pattern } from '../constants/Pattern';
|
||||
import { slug } from '../utils/slug';
|
||||
|
||||
interface CoverCardProps {
|
||||
pattern: Pattern;
|
||||
}
|
||||
|
||||
const CoverList = {
|
||||
// A
|
||||
[Pattern.Accordion]: dynamic(() => import('../patterns/accordion/Cover')),
|
||||
[Pattern.ArrowButtons]: dynamic(() => import('../patterns/arrow-buttons/Cover')),
|
||||
[Pattern.Avatar]: dynamic(() => import('../patterns/avatar/Cover')),
|
||||
[Pattern.AvatarList]: dynamic(() => import('../patterns/avatar-list/Cover')),
|
||||
// B
|
||||
[Pattern.Badge]: dynamic(() => import('../patterns/badge/Cover')),
|
||||
[Pattern.Breadcrumb]: dynamic(() => import('../patterns/breadcrumb/Cover')),
|
||||
[Pattern.ButtonWithIcon]: dynamic(() => import('../patterns/button-with-icon/Cover')),
|
||||
// C
|
||||
[Pattern.Card]: dynamic(() => import('../patterns/card/Cover')),
|
||||
[Pattern.CardLayout]: dynamic(() => import('../patterns/card-layout/Cover')),
|
||||
[Pattern.Centering]: dynamic(() => import('../patterns/centering/Cover')),
|
||||
[Pattern.Chip]: dynamic(() => import('../patterns/chip/Cover')),
|
||||
[Pattern.CircularNavigation]: dynamic(() => import('../patterns/circular-navigation/Cover')),
|
||||
[Pattern.CloseButton]: dynamic(() => import('../patterns/close-button/Cover')),
|
||||
[Pattern.ColorSwatch]: dynamic(() => import('../patterns/color-swatch/Cover')),
|
||||
[Pattern.ConcaveCorners]: dynamic(() => import('../patterns/concave-corners/Cover')),
|
||||
[Pattern.CookieBanner]: dynamic(() => import('../patterns/cookie-banner/Cover')),
|
||||
[Pattern.CornerRibbon]: dynamic(() => import('../patterns/corner-ribbon/Cover')),
|
||||
[Pattern.CurvedBackground]: dynamic(() => import('../patterns/curved-background/Cover')),
|
||||
[Pattern.CustomCheckboxButton]: dynamic(() => import('../patterns/custom-checkbox-button/Cover')),
|
||||
[Pattern.CustomRadioButton]: dynamic(() => import('../patterns/custom-radio-button/Cover')),
|
||||
// D
|
||||
[Pattern.DiagonalSection]: dynamic(() => import('../patterns/diagonal-section/Cover')),
|
||||
[Pattern.DockedAtCorner]: dynamic(() => import('../patterns/docked-at-corner/Cover')),
|
||||
[Pattern.DotLeader]: dynamic(() => import('../patterns/dot-leader/Cover')),
|
||||
[Pattern.DotNavigation]: dynamic(() => import('../patterns/dot-navigation/Cover')),
|
||||
[Pattern.Drawer]: dynamic(() => import('../patterns/drawer/Cover')),
|
||||
[Pattern.DropArea]: dynamic(() => import('../patterns/drop-area/Cover')),
|
||||
[Pattern.DropCap]: dynamic(() => import('../patterns/drop-cap/Cover')),
|
||||
[Pattern.Dropdown]: dynamic(() => import('../patterns/dropdown/Cover')),
|
||||
// F
|
||||
[Pattern.FadingLongSection]: dynamic(() => import('../patterns/fading-long-section/Cover')),
|
||||
[Pattern.FeatureComparison]: dynamic(() => import('../patterns/feature-comparison/Cover')),
|
||||
[Pattern.FeatureList]: dynamic(() => import('../patterns/feature-list/Cover')),
|
||||
[Pattern.FixedAtCorner]: dynamic(() => import('../patterns/fixed-at-corner/Cover')),
|
||||
[Pattern.FixedAtSide]: dynamic(() => import('../patterns/fixed-at-side/Cover')),
|
||||
[Pattern.FloatingLabel]: dynamic(() => import('../patterns/floating-label/Cover')),
|
||||
[Pattern.FolderStructure]: dynamic(() => import('../patterns/folder-structure/Cover')),
|
||||
[Pattern.FullBackground]: dynamic(() => import('../patterns/full-background/Cover')),
|
||||
[Pattern.FullScreenMenu]: dynamic(() => import('../patterns/full-screen-menu/Cover')),
|
||||
// H
|
||||
[Pattern.HolyGrail]: dynamic(() => import('../patterns/holy-grail/Cover')),
|
||||
// I
|
||||
[Pattern.InitialAvatar]: dynamic(() => import('../patterns/initial-avatar/Cover')),
|
||||
[Pattern.InputAddon]: dynamic(() => import('../patterns/input-addon/Cover')),
|
||||
[Pattern.InvertedCorners]: dynamic(() => import('../patterns/inverted-corners/Cover')),
|
||||
// K
|
||||
[Pattern.KeyboardShortcut]: dynamic(() => import('../patterns/keyboard-shortcut/Cover')),
|
||||
// L
|
||||
[Pattern.LayeredCard]: dynamic(() => import('../patterns/layered-card/Cover')),
|
||||
[Pattern.LinedPaper]: dynamic(() => import('../patterns/lined-paper/Cover')),
|
||||
// M
|
||||
[Pattern.MasonryGrid]: dynamic(() => import('../patterns/masonry-grid/Cover')),
|
||||
[Pattern.MediaObject]: dynamic(() => import('../patterns/media-object/Cover')),
|
||||
[Pattern.MegaMenu]: dynamic(() => import('../patterns/mega-menu/Cover')),
|
||||
[Pattern.Menu]: dynamic(() => import('../patterns/menu/Cover')),
|
||||
[Pattern.Modal]: dynamic(() => import('../patterns/modal/Cover')),
|
||||
// N
|
||||
[Pattern.NestedDropdowns]: dynamic(() => import('../patterns/nested-dropdowns/Cover')),
|
||||
[Pattern.Notification]: dynamic(() => import('../patterns/notification/Cover')),
|
||||
// O
|
||||
[Pattern.OverlayPlayButton]: dynamic(() => import('../patterns/overlay-play-button/Cover')),
|
||||
// P
|
||||
[Pattern.Pagination]: dynamic(() => import('../patterns/pagination/Cover')),
|
||||
[Pattern.PopoverArrow]: dynamic(() => import('../patterns/popover-arrow/Cover')),
|
||||
[Pattern.PresenceIndicator]: dynamic(() => import('../patterns/presence-indicator/Cover')),
|
||||
[Pattern.PreviousNextButtons]: dynamic(() => import('../patterns/previous-next-buttons/Cover')),
|
||||
[Pattern.PriceTag]: dynamic(() => import('../patterns/price-tag/Cover')),
|
||||
[Pattern.PricingTable]: dynamic(() => import('../patterns/pricing-table/Cover')),
|
||||
[Pattern.ProgressBar]: dynamic(() => import('../patterns/progress-bar/Cover')),
|
||||
[Pattern.PropertyList]: dynamic(() => import('../patterns/property-list/Cover')),
|
||||
// Q
|
||||
[Pattern.QuestionsAndAnswers]: dynamic(() => import('../patterns/questions-and-answers/Cover')),
|
||||
// R
|
||||
[Pattern.RadialProgressBar]: dynamic(() => import('../patterns/radial-progress-bar/Cover')),
|
||||
[Pattern.RadioButtonGroup]: dynamic(() => import('../patterns/radio-button-group/Cover')),
|
||||
[Pattern.RadioSwitch]: dynamic(() => import('../patterns/radio-switch/Cover')),
|
||||
[Pattern.Rating]: dynamic(() => import('../patterns/rating/Cover')),
|
||||
[Pattern.ResizableElement]: dynamic(() => import('../patterns/resizable-element/Cover')),
|
||||
[Pattern.Ribbon]: dynamic(() => import('../patterns/ribbon/Cover')),
|
||||
// S
|
||||
[Pattern.SameHeightColumns]: dynamic(() => import('../patterns/same-height-columns/Cover')),
|
||||
[Pattern.SearchBox]: dynamic(() => import('../patterns/search-box/Cover')),
|
||||
[Pattern.Separator]: dynamic(() => import('../patterns/separator/Cover')),
|
||||
[Pattern.Sidebar]: dynamic(() => import('../patterns/sidebar/Cover')),
|
||||
[Pattern.SimpleGrid]: dynamic(() => import('../patterns/simple-grid/Cover')),
|
||||
[Pattern.Slider]: dynamic(() => import('../patterns/slider/Cover')),
|
||||
[Pattern.SpinButton]: dynamic(() => import('../patterns/spin-button/Cover')),
|
||||
[Pattern.SplitNavigation]: dynamic(() => import('../patterns/split-navigation/Cover')),
|
||||
[Pattern.SplitScreen]: dynamic(() => import('../patterns/split-screen/Cover')),
|
||||
[Pattern.StackedCards]: dynamic(() => import('../patterns/stacked-cards/Cover')),
|
||||
[Pattern.StampBorder]: dynamic(() => import('../patterns/stamp-border/Cover')),
|
||||
[Pattern.Statistic]: dynamic(() => import('../patterns/statistic/Cover')),
|
||||
[Pattern.StatusLight]: dynamic(() => import('../patterns/status-light/Cover')),
|
||||
[Pattern.StepperInput]: dynamic(() => import('../patterns/stepper-input/Cover')),
|
||||
[Pattern.StickyFooter]: dynamic(() => import('../patterns/sticky-footer/Cover')),
|
||||
[Pattern.StickyHeader]: dynamic(() => import('../patterns/sticky-header/Cover')),
|
||||
[Pattern.StickySections]: dynamic(() => import('../patterns/sticky-sections/Cover')),
|
||||
[Pattern.StickyTableColumn]: dynamic(() => import('../patterns/sticky-table-column/Cover')),
|
||||
[Pattern.StickyTableHeaders]: dynamic(() => import('../patterns/sticky-table-headers/Cover')),
|
||||
[Pattern.Switch]: dynamic(() => import('../patterns/switch/Cover')),
|
||||
// T
|
||||
[Pattern.Tab]: dynamic(() => import('../patterns/tab/Cover')),
|
||||
[Pattern.Teardrop]: dynamic(() => import('../patterns/teardrop/Cover')),
|
||||
[Pattern.ThreeDimensionsCard]: dynamic(() => import('../patterns/three-dimensions-card/Cover')),
|
||||
[Pattern.Timeline]: dynamic(() => import('../patterns/timeline/Cover')),
|
||||
[Pattern.TogglePasswordVisibility]: dynamic(() => import('../patterns/toggle-password-visibility/Cover')),
|
||||
[Pattern.Tooltip]: dynamic(() => import('../patterns/tooltip/Cover')),
|
||||
[Pattern.TreeDiagram]: dynamic(() => import('../patterns/tree-diagram/Cover')),
|
||||
[Pattern.TriangleButtons]: dynamic(() => import('../patterns/triangle-buttons/Cover')),
|
||||
// U
|
||||
[Pattern.UploadButton]: dynamic(() => import('../patterns/upload-button/Cover')),
|
||||
// V
|
||||
[Pattern.ValidationIcon]: dynamic(() => import('../patterns/validation-icon/Cover')),
|
||||
[Pattern.VideoBackground]: dynamic(() => import('../patterns/video-background/Cover')),
|
||||
[Pattern.Voting]: dynamic(() => import('../patterns/voting/Cover')),
|
||||
// W
|
||||
[Pattern.Watermark]: dynamic(() => import('../patterns/watermark/Cover')),
|
||||
[Pattern.Wizard]: dynamic(() => import('../patterns/wizard/Cover')),
|
||||
// Z
|
||||
[Pattern.ZigzagTimeline]: dynamic(() => import('../patterns/zigzag-timeline/Cover')),
|
||||
};
|
||||
|
||||
export const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
|
||||
const Cover = CoverList[pattern];
|
||||
|
||||
return (
|
||||
<Link href={`/patterns/${slug(pattern)}`}>
|
||||
<a className="block-cover">
|
||||
<Cover />
|
||||
<h4 className="block-cover__name">
|
||||
{pattern}
|
||||
</h4>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user