mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00
Code Issues Releases Wiki Activity

Create TS type for pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-25 08:40:32 +07:00
parent 60612ba11c
commit 0b42feb697
7 changed files with 88 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
client/Home.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import CoverCard from './components/CoverCard';
import Heading from './components/Heading';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
@@ -57,11 +58,11 @@ const Home = () => {
<Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern="Holy grail" />
<CoverCard pattern="Sidebar" />
<CoverCard pattern="Split screen" />
<CoverCard pattern="Sticky footer" />
<CoverCard pattern="Sticky header" />
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} />
<CoverCard pattern={Pattern.StickyFooter} />
<CoverCard pattern={Pattern.StickyHeader} />
</div>
</section>
@@ -69,37 +70,37 @@ const Home = () => {
<Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern="Badge" />
<CoverCard pattern="Breadcrumb" />
<CoverCard pattern="Button with icon" />
<CoverCard pattern="Card" />
<CoverCard pattern="Centering" />
<CoverCard pattern="Docked at corner" />
<CoverCard pattern="Dot navigation" />
<CoverCard pattern="Feature list" />
<CoverCard pattern="Fixed at corner" />
<CoverCard pattern="Input add-on" />
<CoverCard pattern="Media object" />
<CoverCard pattern="Menu" />
<CoverCard pattern="Modal" />
<CoverCard pattern="Notification" />
<CoverCard pattern="Pagination" />
<CoverCard pattern="Previous next buttons" />
<CoverCard pattern="Pricing table" />
<CoverCard pattern="Progress bar" />
<CoverCard pattern="Questions and answers" />
<CoverCard pattern="Radio switch" />
<CoverCard pattern="Same height columns" />
<CoverCard pattern="Search box" />
<CoverCard pattern="Separator" />
<CoverCard pattern="Simple grid" />
<CoverCard pattern="Slider" />
<CoverCard pattern="Split navigation" />
<CoverCard pattern="Stepper input" />
<CoverCard pattern="Switch" />
<CoverCard pattern="Tab" />
<CoverCard pattern="Toggle password visibility" />
<CoverCard pattern="Wizard" />
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.InputAddOn} />
<CoverCard pattern={Pattern.MediaObject} />
<CoverCard pattern={Pattern.Menu} />
<CoverCard pattern={Pattern.Modal} />
<CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
</div>

3
client/components/CoverCard.tsx
View File

@@ -1,11 +1,12 @@
import React from 'react';
import { Link } from 'react-router-dom';
import Pattern from '../constants/Pattern';
import slug from '../helpers/slug';
import CoverLoader from '../loaders/CoverLoader';
interface CoverCardProps {
pattern: string;
pattern: Pattern;
}
const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {

3
client/components/RelatedPatterns.tsx
View File

@@ -1,10 +1,11 @@
import React, { useEffect } from 'react';
import Pattern from '../constants/Pattern';
import CoverCard from './CoverCard';
import Heading from './Heading';
interface RelatedPatternsProps {
patterns: string[];
patterns: Pattern[];
}
const RelatedPatterns: React.FC<RelatedPatternsProps> = ({ patterns }) => {

40
client/constants/Pattern.ts Normal file
View File

@@ -0,0 +1,40 @@
enum Pattern {
Badge = 'Badge',
Breadcrumb = 'Breadcrumb',
ButtonWithIcon = 'Button with icon',
Card = 'Card',
Centering = 'Centering',
DockedAtCorner = 'Docked at corner',
DotNavigation = 'Dot navigation',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',
HolyGrail = 'Holy grail',
InputAddOn = 'Input add-on',
MediaObject = 'Media object',
Menu = 'Menu',
Modal = 'Modal',
Notification = 'Notification',
Pagination = 'Pagination',
PreviousNextButtons = 'Previous next buttons',
PricingTable = 'Pricing table',
ProgressBar = 'Progress bar',
QuestionsAndAnswers = 'Questions and answers',
RadioSwitch = 'Radio switch',
SameHeightColumns = 'Same height columns',
SearchBox = 'Search box',
Separator = 'Separator',
Sidebar = 'Sidebar',
SimpleGrid = 'Simple grid',
Slider = 'Slider',
SplitNavigation = 'Split navigation',
SplitScreen = 'Split screen',
StepperInput = 'Stepper input',
StickyFooter = 'Sticky footer',
StickyHeader = 'Sticky header',
Switch = 'Switch',
Tab = 'Tab',
TogglePasswordVisibility = 'Toggle password visibility',
Wizard = 'Wizard',
}
export default Pattern;

4
client/loaders/CoverLoader.tsx
View File

@@ -1,7 +1,9 @@
import loadable, { LoadableComponent } from '@loadable/component';
import Pattern from '../constants/Pattern';
interface CoverLoaderProps {
pattern: string;
pattern: Pattern;
}
const slug = (item: string) => item.toLowerCase().split(' ').join('-');

3
client/patterns/radio-switch/Details.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -79,7 +80,7 @@ const Details: React.FC<{}> = () => {
</div>
</div>
</section>
<RelatedPatterns patterns={['Switch']} />
<RelatedPatterns patterns={[Pattern.Switch]} />
</DetailsLayout>
);
};

3
client/patterns/switch/Details.tsx
View File

@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import RelatedPatterns from '../../components/RelatedPatterns';
import Pattern from '../../constants/Pattern';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -65,7 +66,7 @@ const Details: React.FC<{}> = () => {
`}
/>
</div>
<RelatedPatterns patterns={['Radio switch']} />
<RelatedPatterns patterns={[Pattern.RadioSwitch]} />
</DetailsLayout>
);
};