caperren/caperren-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Education page finished, improvements to carousel, placeholder content from old website

Browse Source
This commit is contained in:
Corwin Perren
2025-11-06 16:47:10 -08:00
parent d6e75ae2ea
commit 128dc14459
9 changed files with 190 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/CustomCarousel.astro
View File

@@ -4,6 +4,9 @@ import {Image} from 'astro:assets';
import type {carouselGroup} from "@interfaces/image-carousel.ts";
const groupToShow: carouselGroup = Astro.props.carouselGroup;
const limitByHeightClasses = "sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl";
const limitByWidthClasses = "max-h-fit";
---
<custom-carousel class="flex flex-col relative w-full"
@@ -11,13 +14,14 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
data-custom-carousel-interval={groupToShow.interval}>
<!-- Carousel wrapper -->
<div class="relative overflow-hidden h-56 md:h-156">
<div class="relative overflow-hidden w-full h-56 md:h-156">
{
groupToShow.images.map((image, index) => (
<div class="hidden duration-700 ease-in-out" data-custom-carousel-item>
<div class="hidden duration-700 ease-in-out" data-custom-carousel-item={index}>
<Image src={image}
class="relative sm:max-w-xl md:max-w-3xl lg:max-w-5xl xl:max-w-7xl -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
class="absolute inset-0 m-auto h-full w-auto max-h-full max-w-full object-contain"
alt="..."
layout='constrained'
loading="eager"/>
</div>
))
@@ -26,7 +30,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
{(groupToShow.images.length > 1) && (
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-8 md:bottom-2 left-1/2 space-x-3 rounded-full">
<div class="absolute z-30 flex -translate-x-1/2 bottom-2 left-1/2 space-x-3 rounded-full">
{
groupToShow.images.map((_, index) => (
<button type="button"
@@ -106,7 +110,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
this._options = this._getOptions();
this._carousel = new Carousel(this, this._items, this._options);
if (this._slide) this._carousel.cycle();
if (this._slide && this._items.length > 0) this._carousel.cycle();
this._attachHandlers()
@@ -126,7 +130,7 @@ const groupToShow: carouselGroup = Astro.props.carouselGroup;
let customIndicators = this.querySelectorAll('[data-custom-carousel-slide-to]') || [];
return {
defaultPosition: 1,
defaultPosition: 0,
interval: this.dataset.customCarouselInterval ? Number(this.dataset.customCarouselInterval) : 8000,
indicators: {

34
src/components/Table.astro Normal file
View File

@@ -0,0 +1,34 @@
---
import type {tableData} from "@interfaces/table.ts";
const data: tableData = Astro.props.data;
const columnPadding: number = data.columnPadding || 2;
const rowPadding: number = data.columnPadding || 2;
const paddingClasses: string = `px-${columnPadding} py-${rowPadding}`;
---
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left ">
<thead class="text-xs border-b-4 border-caperren-green uppercase bg-black">
<tr>
{data.header.map(headingText => (
<th scope="col" class={paddingClasses}>
{headingText}
</th>
))}
</tr>
</thead>
<tbody>
{data.rows.map(row => (
<tr class=" border-b dark:bg-black border-caperren-green">
{row.map(rowColumnText => (
<th scope="row"
class={paddingClasses + " font-medium whitespace-nowrap"}>
{rowColumnText}
</th>
))}
</tr>
))}
</tbody>
</table>
</div>