<template>
	<div class="arca-icon-page">
		<h1>arca-icon</h1>

		<p>
			<span class="span-component-name">arca-icon</span> è un componente utilizzato per visualizzare icone specifiche di Arca.
		</p>

		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">name</i></h2>

		<p>
			Per scieglere quale icona visualizzare, bisogna assegnare il nome dell'icona all'attributo <span class="token attr-name">name</span>.
		</p>

		<div class="showcase">
			<arca-icon name="edit" />
		</div>

		<code-sample lang="html" :code="codeSamples.icon" />

		<hr class="section-separator">

		<h2>Colore e grandezza</h2>

		<p>
			Le <span class="span-component-name">arca-icon</span> si comportano come testo, quindi per modificare il colore e la grandezza bisogna farlo tramite CSS utilizzando gli attributi color e font-size.
		</p>

		<div class="showcase">
			<div class="row">
				<div class="square">
					<arca-icon name="edit" style="font-size: 12px;" />
					<div class="size">12px</div>
				</div>
				<div class="square">
					<arca-icon name="edit"  style="font-size: 24px;"/>
					<div class="size">24px</div>
				</div>
				<div class="square">
					<arca-icon name="edit" style="font-size: 48px;" />
					<div class="size">48px</div>
				</div>
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.size" />

		<div class="showcase">
			<div class="row">
				<arca-icon name="edit" style="color: #FF4444;" />
				<arca-icon name="edit" style="color: #44FF44;" />
				<arca-icon name="edit" style="color: #4444FF;" />
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.color" />

		<hr class="section-separator">

		<h2>Lista intera delle icone</h2>

		<div class="icon-grid">
			<div class="icon-thumbnail" v-for="icon in iconList" :key="icon" :name="icon">
				<arca-icon :name="icon" />
				<div class="icon-name">{{ icon }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class ArcaIconPage extends Vue
{
	codeSamples = {
		icon: `<arca-icon name="edit" />`,

		size:	`<arca-icon name="edit" style="font-size: 12px;" />\n` +
				`<arca-icon name="edit" style="font-size: 24px;" />\n` +
				`<arca-icon name="edit" style="font-size: 48px;" />`,

		color:	`<arca-icon name="edit" style="color: #FF4444;" />\n` +
					`<arca-icon name="edit" style="color: #44FF44;" />\n` +
					`<arca-icon name="edit" style="color: #4444FF;" />`,
	}

	iconList = require.context("@arcadash/commons/Assets/Icons", true, /svg$/).keys().map(path => path.match(/[\\/](.+)\.svg/)[1])
}
</script>

<style lang="less" scoped>
.arca-icon-page {
	.square {
		padding: 8px;

		display: inline-block;
		text-align: center;

		border: 1px solid #AAAAAA;
	}
	.icon-grid {
		margin: -10px;
		.icon-thumbnail {
			min-width: 80px;
			height: 80px;
	
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 10px;
			margin: 10px;
	
			border: 1px solid #EEEEEE;
	
			> .arca-icon {
				font-size: 24px;
				display: block;
			}
	
			.icon-name {
				white-space: nowrap;
			}
		}
	}
}
</style>