From f5ef787ee0ed2953ab85c2f2999031986f059ef2 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 00:13:53 +0300
Subject: feat: add Header and Button

---
 src/components/Button.tsx | 23 +++++++++++++++++++++++
 src/components/Header.tsx | 20 ++++++++++++++++++++
 src/index.tsx             | 19 ++++++++++++++++---
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/Header.tsx

(limited to 'src')

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..55ceda6
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+interface Props {
+  variant?: 'contained' | 'outlined'
+  children: string;
+}
+
+
+const styles = {
+  contained: "bg-black text-white",
+  outlined: "border-2 border-black"
+};
+
+const Button: React.FC<Props> = ({ children, variant = 'contained' }) => {
+
+  return (
+    <button className={`p-4 m-3 font-bold tracking-wide hover:underline focus:outline-none ${styles[variant]}`}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..e61ac63
--- /dev/null
+++ b/src/components/Header.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface Props {
+  navigation: {
+    name: string;
+    route: string;
+  }[];
+}
+
+const Header: React.FC<Props> = ({ children, navigation }) => {
+  return (
+    <header className="bg-black text-white flex">
+      {navigation.map(({ name, route }) => (
+        <a href={route} className="py-6 px-8 font-bold tracking-wide hover:underline">{name}</a>
+      ))}
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/index.tsx b/src/index.tsx
index 3b08ba8..779f0d0 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,12 +2,25 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'tailwindcss/tailwind.css';
 import Paper from './components/Paper';
+import Header from './components/Header';
+import Button from './components/Button';
 
+const navigation = [
+  { name: 'Главная', route: '/'},
+  { name: 'Товары', route: '/products'}
+];
 
 const App: React.FC = () => (
-  <Paper>
-    Hello, world!
-  </Paper>
+  <>
+    <Header navigation={navigation} />
+    <Paper>
+      <p>
+        Привет, мир!
+        <Button>Нажми меня</Button>
+        <Button variant="outlined">Отменить</Button>
+      </p>
+    </Paper>
+  </>
 );
 
 ReactDOM.render(
-- 
cgit v1.2.3