<script setup>
import ProjectsList from '../../Share/ProjectsList.vue';
import CategoriesList from '../../Share/CategoriesList.vue';

defineProps({
    categories: {
        type: Array,
        required: true,
    },
    projects: {
        type: Array,
        required: true,
    },
});
</script>

<template>
    <InertiaHead title="Dashboard" />
    <div class="p-4">
        <header class="pb-4">
            <h1 class="text-3xl font-roboto font-light">Dashboard</h1>
        </header>
        <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-3">
            <ProjectsList class="md:col-span-2 lg:col-span-3" :projects="projects" />
            <CategoriesList class="col-span-1" :categories="categories" />
        </div>
    </div>
</template>
