add grid system

package.json

@@ -21,10 +21,12 @@
   "devDependencies": {
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
+    "@types/classnames": "^2.2.10",
     "@types/webpack-env": "^1.15.2",
     "@typescript-eslint/eslint-plugin": "^3.8.0",
     "@typescript-eslint/parser": "^3.8.0",
     "autoprefixer": "^9.8.6",
+    "classnames": "^2.2.6",
     "eslint": "^7.6.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.4",

src/components/home/Headline.tsx

@@ -4,46 +4,54 @@ import { Button } from '~/components/ui/controls/Button';
 import { Avatar } from '~/components/ui/images/Avatar';
 import { Icon } from '~/components/ui/icons/Icon';
 import { Groups } from '~/components/ui/groups/Groups';
+import { Container } from '~/components/ui/containers/Container';
 
 const Root = styled.header`
 	${tw`bg-primary py-5 shadow-xs text-white`}
 `;
 
-const Container = styled.div`
-	${tw`container flex justify-between items-center px-6`}
-`;
-
 export default function Headline() {
 	return (
 		<Root>
-			<Container>
-				<div tw={'flex items-center'}>
+			<Container className={'md:justify-between'}>
+				<div tw={'flex items-center flex-col md:flex-row justify-center'}>
 					<Avatar
 						rounded={false}
 						src={
 							'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80'
 						}
 						size={48}
 					/>
-					<div tw={'ml-6'}>
+					<div
+						tw={
+							'md:ml-6 pt-2 md:pt-0 flex flex-col md:items-start items-center'
+						}
+					>
 						<h4 className={'type-h4'}> Tuan Nguyen</h4>
 						<h6 className={'text-2xl'}> Software Developer </h6>
-						<div tw={'flex items-center pt-2'}>
-							<Icon name={'mail'} size={24} color={'white'} />
-							<span tw={'pl-1'}> [email protected] </span>
-						</div>
-						<div tw={'flex items-center pt-2'}>
-							<Icon name={'phone'} size={24} color={'white'} />
-							<span tw={'pl-1'}> 0450082978 </span>
+						<div>
+							<div tw={'flex items-center pt-2'}>
+								<Icon name={'mail'} size={24} color={'white'} />
+								<span tw={'pl-1'}> [email protected] </span>
+							</div>
+							<div tw={'flex items-center pt-2'}>
+								<Icon name={'phone'} size={24} color={'white'} />
+								<span tw={'pl-1'}> 0450082978 </span>
+							</div>
+							<Groups
+								className={
+									'flex items-center pt-2 justify-center md:justify-start'
+								}
+								size={0.5}
+							>
+								<Icon name={'github'} size={24} />
+								<Icon name={'linkedin'} size={24} />
+								<Icon name={'facebook'} size={24} color={'white'} />
+							</Groups>
 						</div>
-						<Groups className={'flex items-center pt-2'} size={0.5}>
-							<Icon name={'github'} size={24} />
-							<Icon name={'linkedin'} size={24} />
-							<Icon name={'facebook'} size={24} color={'white'} />
-						</Groups>
 					</div>
 				</div>
-				<Button icon={'send'} size={'sm'}>
+				<Button icon={'send'} size={'sm'} className={'md:mt-0 mt-4'}>
 					CONTACT ME
 				</Button>
 			</Container>

src/components/home/HomeMain.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Container } from '~/components/ui/containers/Container';
+import tw from 'twin.macro';
+import { Grid } from '~/components/ui/containers/Grid';
+import { GridColumn } from '~/components/ui/containers/GridColumn';
+import { Card } from '~/components/ui/containers/Card';
+
+const Root = tw.div`
+	bg-gray-300  flex-grow
+`;
+export default function HomeMain() {
+	return (
+		<Root>
+			<Container>
+				<Grid gap={5} className={`pt-4`}>
+					<GridColumn md={8} sm={12}>
+						<Card>Test</Card>
+					</GridColumn>
+					<GridColumn md={4} sm={12}>
+						<Card>Test</Card>
+					</GridColumn>
+				</Grid>
+			</Container>
+		</Root>
+	);
+}

src/components/ui/containers/Card.tsx

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import 'twin.macro';
+
+type Props = {
+	children: any;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function Card({ children, ...props }: Props) {
+	return (
+		<div {...props} tw='rounded bg-white p-4 overflow-hidden shadow-lg'>
+			{children}
+		</div>
+	);
+}

src/components/ui/containers/Container.tsx

@@ -0,0 +1,5 @@
+import tw, { styled } from 'twin.macro';
+
+export const Container = styled.div`
+	${tw`container flex flex-col md:flex-row items-center px-6`}
+`;

src/components/ui/containers/Grid.tsx

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes } from 'react';
+import { GridColumn } from '~/components/ui/containers/GridColumn';
+
+type Props = {
+	gap: number;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function Grid({ gap, children, className }: Props) {
+	return (
+		<div className={`flex flex-wrap overflow-hidden min-w-full ${className}`}>
+			{React.Children.map(children, (child: any, i) => {
+				const { props } = child;
+				return (
+					<GridColumn key={i} className={`px-${gap} py-${gap}`} {...props} />
+				);
+			})}
+		</div>
+	);
+}

src/components/ui/containers/GridColumn.tsx

@@ -0,0 +1,36 @@
+import React, { HTMLAttributes } from 'react';
+import cn from 'classnames';
+
+type Props = {
+	sm?: number;
+	md?: number;
+	lg?: number;
+	all?: number;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function GridColumn({ sm, md, lg, all, className, ...props }: Props) {
+	md = md || all;
+	lg = lg || all;
+	sm = sm || all;
+
+	return (
+		<div
+			{...props}
+			className={cn(className, {
+				[`md:w-${getPercentage(md)}`]: !!md,
+				[`lg:w-${getPercentage(lg)}`]: !!lg,
+				[`w-${getPercentage(sm)}`]: !!sm,
+			})}
+		/>
+	);
+}
+
+function getPercentage(size?: number) {
+	if (!size) {
+		return '';
+	}
+	if (size === 12) {
+		return 'full';
+	}
+	return `${size}/12`;
+}

src/components/ui/controls/Button.tsx

@@ -18,6 +18,7 @@ export const Button: React.FC<Props> = ({
 	children,
 	rounded = true,
 	icon,
+	className,
 	...props
 }) => {
 	const sizeClass =
@@ -36,7 +37,7 @@ export const Button: React.FC<Props> = ({
 			{...props}
 			className={`${bgClass} text-${textColor} ${sizeClass} focus:outline-none font-semibold flex items-center py-2 px-4 ${
 				rounded ? 'rounded' : ''
-			}`}
+			} ${className}`}
 			css={css`
 				&:hover,
 				&:active {

src/pages/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import Headline from '~/components/home/Headline';
+import HomeMain from '~/components/home/HomeMain';
+import 'twin.macro';
 
 const IndexPage = () => (
-	<div>
+	<div tw={'min-h-screen flex flex-col'}>
 		<Headline />
+		<HomeMain />
 	</div>
 );