<template>
	<div class="container">

		<TopContainer background="#fff" padding="20px">
			<Text size="40px">I am top Fixed Container. I can be used like a NavBar</Text>
		</TopContainer>

		<h1>Hello</h1>

		<div style="margin-bottom: 20px">
			<TextInput placeholder="Username" />
		</div>

		<div style="margin-bottom: 20px">
			<TextInput type="date" placeholder="Username" />
		</div>

		<div style="margin-bottom: 20px">
			<Select>
				<option>Option 1</option>
				<option>Option 2</option>
				<option>Option 3</option>
			</Select>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonPrimary>Button Primary</ButtonPrimary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonPrimary disabled>Button Primary</ButtonPrimary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonPrimary outline>Button Primary Outline</ButtonPrimary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonSecondary>Button Secondary</ButtonSecondary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonSecondary outline>Button Secondary Outline</ButtonSecondary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonSecondary outline lighterBorder>Button Secondary Outline Lighter</ButtonSecondary>
		</div>

		<div style="margin-bottom: 20px">
			<ButtonWhite>Button White</ButtonWhite>
		</div>

		<div style="margin-bottom: 20px">
			<PageProgressBar value="0"></PageProgressBar>
		</div>

		<div style="margin-bottom: 20px">
			<TextPrimary size="2rem" weight="bold" align="left">Serenity Patient Portal</TextPrimary>
		</div>

		<div style="margin-bottom: 20px">
			<Text size="1rem" weight="lighter" color="blue">Serenity Patient Portal</Text>
		</div>

		<Container mb="20px" padding="40px" style="background: #ccc">
			<TextDark size="2rem" weight="bold">I am a text inside a container</TextDark>
		</Container>

		<div style="margin-bottom: 20px">
			<TextLight size="2rem">I am a text light</TextLight>
		</div>

		<Card mb="100px" height="100px" padding="20px" background="#c6c6c6">
			<Text size="30px">I am a Card with Rounded colors</Text>
		</Card>

		<FooterContainer height="83px" align="center" background="red" pt="30px">
			<TextWhite size="1rem" weight="bold">Hello there Footer</TextWhite>
		</FooterContainer>
	</div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import TextInput from "./components/form/TextInput";
import Select from "./components/form/Select";
import ButtonPrimary from "./components/button/ButtonPrimary";
import ButtonSecondary from "./components/button/ButtonSecondary";
import ButtonWhite from "./components/button/ButtonWhite";
import PageProgressBar from "./components/progress-bar/PageProgressBar";
import TextPrimary from "./components/text/TextPrimary";
import TextDark from "./components/text/TextDark";
import TextLight from "./components/text/TextLight";
import TextWhite from "./components/text/TextWhite";
import Text from "./components/text/Text";
import Container from "./components/container/Container";
import FooterContainer from "./components/container/FooterContainer";
import TopContainer from "./components/container/TopContainer"
import Card from "./components/card/Card"

export default {
	name: "App",
	components: {
		Container,
		FooterContainer,
		TopContainer,
		TextInput,
		Select,
		ButtonPrimary,
		ButtonSecondary,
		ButtonWhite,
		PageProgressBar,
		TextPrimary,
		TextWhite,
		TextDark,
		TextLight,
		Text,
		Card
	},
};
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
