tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[feat] sample page to render cards

Browse Source
This commit is contained in:
Thad Miller
2026-02-12 23:27:13 -05:00
parent 6391e6d5a5
commit 18b8774a89
6 changed files with 529 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/assets/css/_bootstrap.scss Normal file
View File

@@ -0,0 +1,51 @@
// Required functions import
@import 'bootstrap/scss/functions';
// Optional variable overrides
// $primary: #ffa500;
// Required imports
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/variables-dark';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
// Optional components
@import 'bootstrap/scss/utilities';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/nav';
// @import 'bootstrap/scss/accordion';
// @import 'bootstrap/scss/alert';
// @import 'bootstrap/scss/badge';
// @import 'bootstrap/scss/breadcrumb';
// @import 'bootstrap/scss/button-group';
// @import 'bootstrap/scss/buttons';
// @import 'bootstrap/scss/card';
// @import 'bootstrap/scss/carousel';
// @import 'bootstrap/scss/close';
// @import 'bootstrap/scss/dropdown';
// @import 'bootstrap/scss/forms';
@import 'bootstrap/scss/grid';
// @import 'bootstrap/scss/list-group';
// @import 'bootstrap/scss/modal';
// @import 'bootstrap/scss/navbar';
// @import 'bootstrap/scss/offcanvas';
// @import 'bootstrap/scss/pagination';
// @import 'bootstrap/scss/placeholders';
// @import 'bootstrap/scss/popover';
// @import 'bootstrap/scss/progress';
// @import 'bootstrap/scss/spinners';
// @import 'bootstrap/scss/tables';
// @import 'bootstrap/scss/toasts';
// @import 'bootstrap/scss/tooltip';
// @import 'bootstrap/scss/transitions';
// Optional helpers
// @import 'bootstrap/scss/helpers';
// Optional utilities
// @import 'bootstrap/scss/utilities/api';

3
src/assets/css/main.scss Normal file
View File

@@ -0,0 +1,3 @@
@import '_bootstrap';

17
src/layouts/Main.astro Normal file
View File

@@ -0,0 +1,17 @@
---
import '/src/assets/css/main.scss';
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" href="/favicon.ico" />
<title>Astro Pokemon</title>
</head>
<body>
<slot />
</body>
</html>

29
src/pages/pokemon.astro Normal file
View File

@@ -0,0 +1,29 @@
---
import Layout from '../layouts/Main.astro';
import * as schema from '../db/schema.ts';
import { eq } from 'drizzle-orm';
import { db } from '../db';
// Get some sample Pokemon data from the database
const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(10);
---
<Layout>
<div class="container">
<div class="row">
<div class="col-12">
<h1>Pokemon</h1>
</div>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{pokemon.map((card) => (
<div class="col">
<img src={`/public/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid" />
{card.productName} - {card.number}
</div>
))}
</div>
</div>
</Layout>