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

Add typescript types for patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-24 23:36:43 +07:00
parent 154a61de91
commit 6d3d9da384
88 changed files with 146 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/patterns/badge/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/badge/Details.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Badge">
<div className="ph4 pv5">

2
client/patterns/breadcrumb/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/breadcrumb/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Breadcrumb">
<div className="ph4 pv5">

2
client/patterns/button-with-icon/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

2
client/patterns/button-with-icon/Details.tsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Button with icon">
<div className="ph4 pv5">

2
client/patterns/card/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column h-100 pa2">

2
client/patterns/card/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Card">
<div className="ph4 pv5">

2
client/patterns/centering/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/centering/Details.tsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Centering">
<div className="ph4 pv5">

2
client/patterns/docked-at-corner/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/docked-at-corner/Details.tsx
View File

@@ -5,7 +5,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Docked at corner">
<div className="ph4 pv5">

2
client/patterns/dot-navigation/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

8
client/patterns/dot-navigation/Details.tsx
View File

@@ -3,10 +3,14 @@ import React, { useState } from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
interface DotProps {
index: number;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(0);
const Dot = ({ index }) => {
const Dot: React.FC<DotProps> = ({ index }) => {
const isActive = index === activeItem;
const click = () => setActiveItem(index);
return (

2
client/patterns/feature-list/Cover.tsx
View File

@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column justify-center h-100 pa2 w-100">

2
client/patterns/feature-list/Details.tsx
View File

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Feature list">
<div className="ph4 pv5">

2
client/patterns/fixed-at-corner/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Triangle from '../../placeholders/Triangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="relative">

2
client/patterns/fixed-at-corner/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Triangle from '../../placeholders/Triangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Fixed at corner">
<div className="ph4 pv5">

2
client/patterns/holy-grail/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

2
client/patterns/holy-grail/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Holy grail">
<div className="ph4 pv5">

2
client/patterns/input-add-on/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">

2
client/patterns/input-add-on/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Input add-on">
<div className="ph4 pv5">

2
client/patterns/media-object/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex h-100 items-start pa2 w-100">

2
client/patterns/media-object/Details.tsx
View File

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Media object">
<div className="ph4 pv5">

2
client/patterns/menu/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa3">

2
client/patterns/menu/Details.tsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Menu">
<div className="ph4 pv5">

2
client/patterns/modal/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex flex-column h-100 items-center justify-center pa3">

2
client/patterns/modal/Details.tsx
View File

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Modal">
<div className="ph4 pv5">

2
client/patterns/notification/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/notification/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Notification">
<div className="ph4 pv5">

2
client/patterns/pagination/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

2
client/patterns/pagination/Details.tsx
View File

@@ -5,7 +5,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Pagination">
<div className="ph4 pv5">

2
client/patterns/previous-next-buttons/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/previous-next-buttons/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Previous and next buttons">
<div className="ph4 pv5">

2
client/patterns/pricing-table/Cover.tsx
View File

@@ -5,7 +5,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center ph2">

2
client/patterns/pricing-table/Details.tsx
View File

@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Pricing table">
<div className="ph4 pv5">

2
client/patterns/progress-bar/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

2
client/patterns/progress-bar/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import useInterval from '../../hooks/useInterval';
const Details = () => {
const Details: React.FC<{}> = () => {
const [progress, setProgress] = useState(0);
useInterval(() => {
setProgress(v => v === 100 ? 0 : v + 1);

2
client/patterns/questions-and-answers/Cover.tsx
View File

@@ -5,7 +5,7 @@ import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

9
client/patterns/questions-and-answers/Details.tsx
View File

@@ -6,10 +6,15 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Triangle from '../../placeholders/Triangle';
const Details = () => {
interface ItemProps {
index: number;
title: React.ReactNode;
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(-1);
const Item = ({ index, title, children }) => {
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
const click = () => setActiveItem(isOpened ? -1 : index);
return (

2
client/patterns/radio-switch/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

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

@@ -5,7 +5,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [isFirstChecked, setFirstChecked] = useState(false);
const toggle = () => setFirstChecked(c => !c);

2
client/patterns/same-height-columns/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="flex h-100 pa2">

2
client/patterns/same-height-columns/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Same height columns">
<div className="ph4 pv5">

2
client/patterns/search-box/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

2
client/patterns/search-box/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Search box">
<div className="ph4 pv5">

2
client/patterns/separator/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/separator/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Separator">
<div className="ph4 pv5">

2
client/patterns/sidebar/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex">

2
client/patterns/sidebar/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Block from '../../placeholders/Block';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sidebar">
<div className="ph4 pv5">

2
client/patterns/simple-grid/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/simple-grid/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Simple grid">
<div className="ph4 pv5">

2
client/patterns/slider/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/slider/Details.tsx
View File

@@ -5,7 +5,7 @@ import Circle from '../../placeholders/Circle';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Slider">
<div className="ph4 pv5">

2
client/patterns/split-navigation/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/split-navigation/Details.tsx
View File

@@ -4,7 +4,7 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Split navigation">
<div className="ph4 pv5">

2
client/patterns/split-screen/Cover.tsx
View File

@@ -4,7 +4,7 @@ import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex">

2
client/patterns/split-screen/Details.tsx
View File

@@ -6,7 +6,7 @@ import Block from '../../placeholders/Block';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Split screen">
<div className="ph4 pv5">

2
client/patterns/stepper-input/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex items-center justify-center pa2">

4
client/patterns/stepper-input/Details.tsx
View File

@@ -4,11 +4,11 @@ import { Link } from 'react-router-dom';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [value, setValue] = useState(0);
const decrease = () => setValue(value - 1);
const increase = () => setValue(value + 1);
const change = (e) => setValue(parseInt(e.target.value, 10));
const change = (e: React.ChangeEvent<HTMLInputElement>) => setValue(parseInt(e.target.value, 10));
return (
<DetailsLayout title="Stepper input">

2
client/patterns/sticky-footer/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

2
client/patterns/sticky-footer/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sticky footer">
<div className="ph4 pv5">

2
client/patterns/sticky-header/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column">

2
client/patterns/sticky-header/Details.tsx
View File

@@ -5,7 +5,7 @@ import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Sticky header">
<div className="ph4 pv5">

2
client/patterns/switch/Cover.tsx
View File

@@ -2,7 +2,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

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

@@ -4,7 +4,7 @@ import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [checked, setChecked] = useState(false);
const toggle = () => setChecked(c => !c);

2
client/patterns/tab/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

8
client/patterns/tab/Details.tsx
View File

@@ -4,10 +4,14 @@ import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
const Details = () => {
interface TabProps {
tabIndex: number;
}
const Details: React.FC<{}> = () => {
const [activeTab, setActiveTab] = useState(0);
const Tab = ({ tabIndex, children }) => {
const Tab: React.FC<TabProps> = ({ tabIndex, children }) => {
const isActive = tabIndex === activeTab;
const click = () => setActiveTab(tabIndex);
return (

2
client/patterns/toggle-password-visibility/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center pa2">

2
client/patterns/toggle-password-visibility/Details.tsx
View File

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details = () => {
const Details: React.FC<{}> = () => {
const [visible, setVisible] = useState(false);
const toggle = () => setVisible(v => !v);

2
client/patterns/wizard/Cover.tsx
View File

@@ -3,7 +3,7 @@ import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover = () => {
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div className="h-100 flex flex-column items-center justify-center">

2
client/patterns/wizard/Details.tsx
View File

@@ -6,7 +6,7 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Line from '../../placeholders/Line';
const Details = () => {
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Wizard">
<div className="ph4 pv5">