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

Add heading component

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-11-24 22:39:33 +07:00
parent 24d36dc1c6
commit 9a188e8583
6 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/Home.jsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import CoverCard from './components/CoverCard';
import Heading from './components/Heading';
import useDocumentTitle from './hooks/useDocumentTitle';
import Layout from './layouts/Layout';
@@ -45,8 +46,8 @@ const Home = () => {
</div>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Layouts</h3>
<section>
<Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern="Holy grail" />
@@ -55,10 +56,10 @@ const Home = () => {
<CoverCard pattern="Sticky footer" />
<CoverCard pattern="Sticky header" />
</div>
</div>
</section>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Patterns</h3>
<section>
<Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4">
<CoverCard pattern="Badge" />
@@ -93,7 +94,7 @@ const Home = () => {
<CoverCard pattern="Toggle password visibility" />
<CoverCard pattern="Wizard" />
</div>
</div>
</section>
</div>
</Layout>
);

11
client/components/Heading.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
const Heading = ({ title }) => {
return (
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
</div>
);
};
export default Heading;

7
client/components/RelatedPatterns.jsx
View File

@@ -1,18 +1,19 @@
import React, { useEffect } from 'react';
import CoverCard from './CoverCard';
import Heading from './Heading';
const RelatedPatterns = ({ patterns }) => {
return (
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Related patterns</h3>
<section>
<Heading title="Related patterns" />
<div className="flex flex-wrap items-start pa4">
{
patterns.map(pattern => <CoverCard key={pattern} pattern={pattern} />)
}
</div>
</div>
</section>
);
};

10
client/layouts/Footer.jsx
View File

@@ -1,10 +1,12 @@
import React from 'react';
import Heading from '../components/Heading';
const Footer = () => {
return (
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
<div className="bt br b--black-20 relative" style={{ flex: 1 }}>
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>Products</h3>
<div className="br b--black-20" style={{ flex: 1 }}>
<Heading title="Products" />
<ul className="list ma0 pa0 lh-copy fw5 pa4">
<li>
@@ -25,8 +27,8 @@ const Footer = () => {
</ul>
</div>
<div className="bt b--black-20 relative" style={{ flex: 1 }}>
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>About</h3>
<div style={{ flex: 1 }}>
<Heading title="About" />
<div className="pa4">
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>

7
client/patterns/docked-at-corner/Details.jsx
View File

@@ -1,5 +1,6 @@
import React from 'react';
import Heading from '../../components/Heading';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
@@ -44,8 +45,8 @@ const Details = () => {
`}
/>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
<section>
<Heading title="Use cases" />
<div className="pa4">
<div className="mb4 w4 pa2 relative ba b--black-30 br2">
@@ -67,7 +68,7 @@ const Details = () => {
</div>
</div>
</div>
</div>
</section>
</DetailsLayout>
);
};

7
client/patterns/radio-switch/Details.jsx
View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import Heading from '../../components/Heading';
import RelatedPatterns from '../../components/RelatedPatterns';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -56,8 +57,8 @@ const Details = () => {
`}
/>
</div>
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
<section>
<Heading title="Use cases" />
<div className="pa4">
<div className="inline-flex br-pill bg-black-10 pa1">
@@ -71,7 +72,7 @@ const Details = () => {
</label>
</div>
</div>
</div>
</section>
<RelatedPatterns patterns={['Switch']} />
</DetailsLayout>
);