<template>
	<div class="canvas">
		<card type="to-real-style" />
		<card type="scene-composition" />
		<card type="color-palette" />
		<card type="to-video" />
		<card type="to-3d-model" />
		<card type="add-print" />
		<card type="edit-material" />
	</div>
</template>

<script setup lang="ts">
	import card from './components/card.vue'
	import { computed, ref, markRaw, onMounted } from 'vue'
	import { useGlobalStore } from '@/stores'
	import { useRouter, useRoute } from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	const globalStore = useGlobalStore()
	onMounted(() => {
		globalStore.setHomeLeftNavCollapse(true)
	})
</script>

<style lang="less" scoped>
	.canvas {
		background-color: #fcf8f1;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		align-items: flex-start;
		padding: 2rem;
		gap: 2rem;
	}
</style>
