---
import Page from "../../layouts/Page.astro";
import "../../styles/cards.css";
import ThreeJSModels from "../../components/3DModels.jsx";
---
<Page title="3D Models" description="Things that I made using Blender">
    <main>
        <div class="grid">
            <div class="card">
                <h1>Test</h1>
                <p>Description</p>
                <ThreeJSModels modelName="/models/snug_cup_model.glb" client:load />
                <div class="column">
                    <a href="#">Download</a>
                    <small>Licensed with (license)</small>
                </div>
            </div>
            <div class="card">
                <h1>Test</h1>
                <p>Description</p>
                <ThreeJSModels modelName="/models/alee_logo.glb" client:load />
                <div class="column">
                    <a href="#">Download</a>
                    <small>Licensed with (license)</small>
                </div>
            </div>
            <div class="card">
                <h1>Test</h1>
                <p>Description</p>
                <!--<ThreeJSModels modelName="/models/snug_cup_model.glb" client:load />-->
                <div class="column">
                    <a href="#">Download</a>
                    <small>Licensed with (license)</small>
                </div>
            </div>
        </div>
    </main>
</Page>
<style>
    .column {
        display: flex;
        flex-direction: column;
        gap: 0.1em;
    }
</style>