import styled from 'styled';

import { Example, ExampleSvg } from '@template/project.default--static/images';
import { User } from '@template/project.default--ui';

export const Wrapper = styled.SafeAreaView`
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
`;

export const List = styled.SectionList`
	height: 100%;
	width: 100%;
`;

export const Text = styled.Text.attrs({
	children: 'Tjenis',
})`
	padding: 24px;
	text-align: center;

	background: purple;
`;

export const PngImage = styled.Image.attrs({
	resizeMode: 'cover',
	source: Example,
})`
	width: 200px;
	height: 200px;
	background: blue;
`;

export const SvgImage = styled(ExampleSvg).attrs({
	width: '200px',
	height: '200px',
})`
	background: red;
`;

export const Icon = styled(User)`
	width: 50px;
	height: 50px;

	color: white;
	background: green;
`;
