Commit b454c744 authored by DESKTOP-J7QTMBR\mikke's avatar DESKTOP-J7QTMBR\mikke
Browse files

Page layout#5

parent c07a1b0a
import React from 'react';
import './App.css';
import { CardContainer } from './components/display/CardContainer';
import Layout from './components/Layout';
function App() {
return (
<div className="App">
<header className="App-header">
<CardContainer/>
</header>
<Layout title="s">
<CardContainer/>
</Layout>
</div>
);
}
......
.Layout {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: left;
font-size: calc(10px + 2vmin);
color: white;
}
\ No newline at end of file
import React from 'react';
import { Header } from './header/Header';
import "./Layout.css"
interface IProps {
title: string
};
const Layout: React.FC<IProps> = ({
title,
children
}) => {
return (
<div className="Layout">
<React.Fragment >
<Header>
<input/>
<h1>Tekst</h1>
<button>Hallo</button>
</Header>
<div className="Layout__Content">
<main>{children}</main>
</div>
</React.Fragment>
</div>
);
};
export default Layout;
\ No newline at end of file
......@@ -11,7 +11,7 @@ type IProps = {}
export const CardContainer: FunctionComponent<IProps> = () => {
return (
<Container>
<Row xs={1} md={4} className="justify-content-md-center">
<Row xs={1} md={2} className="justify-content-md-center">
<Provider store={store}>
{dummyData.map((country_data, index) =>
<Col md="auto" key={index}>
......@@ -22,7 +22,9 @@ export const CardContainer: FunctionComponent<IProps> = () => {
</Container>
)
}
function getDataFromBackEnd(){
return dummyData;
}
const dummyData: Country[] = [
{name: "Norway", population: 20, area: 10},
{name: "Sweden", population: 25, area: 11},
......
.Header__Logo {
height: 20vmin;
pointer-events: none;
}
header{
display: flex;
flex-direction: left;
align-content: center;
content: initial;
}
.Header__Content{
display: flex;
justify-content: center;
align-items: center;
border: 3px solid green;
width: calc(60vw);
height: 20vmin;
}
import React from 'react';
import logo from '../../logo.svg';
import "./Header.css"
export const Header: React.FC = ({
children
}) => {
return (
<header>
<img src={logo} alt="Logo" className="Header__Logo"/>
<div className="Header__Content">{children}</div>
</header>
);
};
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment