Feature/request space page

package.json

@@ -23,6 +23,10 @@
  "@astrolib/analytics": "^0.5.0",
  "@astrolib/seo": "^1.0.0-beta.5",
  "@fontsource-variable/inter": "^5.0.19",
+ "@fullcalendar/core": "^6.1.15",
+ "@fullcalendar/daygrid": "^6.1.15",
+ "@fullcalendar/vue3": "^6.1.15",
+ "@popperjs/core": "^2.11.8",
  "astro": "^4.12.2",
  "astro-embed": "^0.7.2",
  "astro-icon": "^1.1.0",

src/components/ui/ItemGrid3.astro

@@ -0,0 +1,54 @@
+---
+import type { ItemGrid as Props } from '~/types';
+import { Icon } from 'astro-icon/components';
+import { twMerge } from 'tailwind-merge';
+import Button from './Button.astro';
+
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
+
+const {
+ container: containerClass = '',
+ // container: containerClass = "sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+ panel: panelClass = '',
+ title: titleClass = '',
+ description: descriptionClass = '',
+ icon: defaultIconClass = 'text-primary',
+} = classes;
+---
+
+{
+ items && (
+ <div
+ class={twMerge(
+ `grid gap-8 gap-x-12 sm:gap-y-8 ${
+ columns === 4
+ ? 'lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2'
+ : columns === 3
+ ? 'lg:grid-cols-3 sm:grid-cols-2'
+ : columns === 2
+ ? 'sm:grid-cols-2 '
+ : ''
+ }`,
+ containerClass
+ )}
+ >
+ {items.map(({ title, description, icon, callToAction, classes: itemClasses = {} }) => (
+ <div class={twMerge('relative flex place-content-between hover:shadow-xl', panelClass, itemClasses?.panel)}>
+ {(icon || defaultIcon) && (
+ <Icon name={icon || defaultIcon} class={twMerge('mb-2 w-10 h-10', defaultIconClass, itemClasses?.icon)} />
+ )}
+ <div class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</div>
+ {description && (
+ // <p class={twMerge('text-muted mt-2 align-center', descriptionClass, itemClasses?.description)} set:html={description} />
+ <p class={twMerge('text-xl ', descriptionClass, itemClasses?.description)} set:html={description} />
+ )}
+ {callToAction && (
+ <div class="mt-2">
+ <Button {...callToAction} />
+ </div>
+ )}
+ </div>
+ ))}
+ </div>
+ )
+}

src/components/ui/RequestForm.astro

@@ -0,0 +1,131 @@
+---
+import type { RequestForm as Props } from '~/types';
+import Button from '~/components/ui/Button.astro';
+
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '', materials = []} = Astro.props;
+---
+
+<form>
+ {
+ inputs &&
+ inputs.map(
+ ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
+ name && (
+ <div class="mb-6">
+ {label && (
+ <label for={name} class="block text-sm font-medium">
+ {label}
+ </label>
+ )}
+ <input
+ type={type}
+ name={name}
+ id={name}
+ autocomplete={autocomplete}
+ placeholder={placeholder}
+ class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+ />
+ </div>
+ )
+ )
+ }
+ <div class="grid gap-8 gap-x-12 sm:gay-y-8 lg:grid-cols-3 sm:grid-cols-2">
+ {
+ materials &&
+ materials.map(material => {
+ return <div class="flex flex-col">
+ <label for={material.name} class="block text-sm font-medium">
+ {material.name}
+ </label>
+ <input
+ id={material.name}
+ type="number" 
+ value="0"
+ min="0"
+ max={material.quantity}
+ class="py-3 px-4 rounded-lg border border-gray-200 dark:border-gray-700"
+ >
+ </div>
+ })
+ }
+ </div>
+
+ <div class="flex">
+ <div class="grow pr-2">
+ <label for="start-date" class="block text-sm font-medium">
+ Start Date
+ </label>
+ <input
+ id="start-date"
+ type="datetime-local"
+ class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+ />
+ </div>
+ <div class="grow pl-2">
+ <label for="start-date" class="block text-sm font-med">
+ End Date
+ </label>
+ <input
+ id="end-date"
+ type="datetime-local"
+ class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+ />
+ </div>
+ </div>
+
+ {
+ textarea && (
+ <div>
+ <label for="textarea" class="block text-sm font-medium">
+ {textarea.label}
+ </label>
+ <textarea
+ id="textarea"
+ name={textarea.name ? textarea.name : 'message'}
+ rows={textarea.rows ? textarea.rows : 4}
+ placeholder={textarea.placeholder}
+ class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+ />
+ </div>
+ )
+ }
+
+ {
+ disclaimer && (
+ <div class="mt-3 flex items-start">
+ <div class="flex mt-0.5">
+ <input
+ id="disclaimer"
+ name="disclaimer"
+ type="checkbox"
+ class="cursor-pointer mt-1 py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
+ />
+ </div>
+ <div class="ml-3">
+ <label for="disclaimer" class="cursor-pointer select-none text-sm text-gray-600 dark:text-gray-400">
+ {disclaimer.label}
+ </label>
+ </div>
+ </div>
+ )
+ }
+
+
+ {
+ button && (
+ <div class="mt-10 grid">
+ <Button variant="primary" type="submit">
+ {button}
+ </Button>
+ </div>
+ )
+ }
+
+ {
+ description && (
+ <div class="mt-3 text-center">
+ <p class="text-sm text-gray-600 dark:text-gray-400">{description}</p>
+ </div>
+ )
+ }
+</form>

src/components/vue/CalendarComponent.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import FullCalendar from '@fullcalendar/vue3'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import type { CalendarEvent } from '~/types';
+
+export default {
+ props: {
+ events: Array<CalendarEvent>
+ },
+ components: {
+ FullCalendar // make the <FullCalendar> tag available
+ },
+ data: function(props) {
+ return {
+ calendarOptions: {
+ height:700, // Is this dangerous?
+ expandRows:true,
+ plugins: [dayGridPlugin],
+
+ initialView: 'dayGridMonth',
+ weekends: true,
+ events: props.events
+ /* [
+ {
+ title: 'Meeting',
+ start: '2024-07-28T10:30:00',
+ end: '2024-11-12T12:30:00'
+ },
+ {
+ title: 'All Day Event',
+ start: '2024-07-28'
+ },
+ ] */
+ }
+ }
+ }
+}
+</script>
+
+<template>
+ <FullCalendar :options='calendarOptions' />
+</template>

src/components/widgets/Calendar.astro

@@ -0,0 +1,16 @@
+---
+import WidgetWrapper from "../ui/WidgetWrapper.astro";
+import FullCalendar from "../vue/CalendarComponent.vue";
+const {
+ events,
+
+ id,
+ isDark = false,
+ classes = {},
+ bg = await Astro.slots.render('bg'),
+} = Astro.props
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}` } bg={bg}>
+ <FullCalendar client:visible events={events}/>
+</WidgetWrapper>

src/components/widgets/Features4.astro

@@ -0,0 +1,38 @@
+---
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import Headline from '~/components/ui/Headline.astro';
+import type { Features as Props } from '~/types';
+import ItemGrid3 from '../ui/ItemGrid3.astro';
+
+const {
+ title = await Astro.slots.render('title'),
+ subtitle = await Astro.slots.render('subtitle'),
+ tagline = await Astro.slots.render('tagline'),
+ items = [],
+ columns = 3,
+ defaultIcon,
+
+ id,
+ isDark = false,
+ classes = {},
+ bg = await Astro.slots.render('bg'),
+} = Astro.props;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+ <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+ <ItemGrid3
+ items={items}
+ columns={columns}
+ defaultIcon={defaultIcon}
+ classes={{
+ container: 'gap-4 md:gap-6',
+ panel:
+ 'rounded-lg shadow-[0_4px_30px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur border border-[#ffffff29] bg-white dark:bg-slate-900 p-6',
+ // panel:
+ // "text-center bg-page items-center md:text-left rtl:md:text-right md:items-start p-6 p-6 rounded-md shadow-xl dark:shadow-none dark:border dark:border-slate-800",
+ icon: 'w-12 h-12 mb-6 text-primary',
+ ...((classes?.items as Record<string, never>) ?? {}),
+ }}
+ />
+</WidgetWrapper>

src/components/widgets/Request.astro

@@ -0,0 +1,41 @@
+---
+import RequestForm from "../ui/RequestForm.astro"
+import Headline from "../ui/Headline.astro"
+import WidgetWrapper from "../ui/WidgetWrapper.astro"
+
+const {
+ title,
+ subtitle,
+ tagline,
+ inputs,
+ textarea,
+ disclamer,
+ button,
+ description,
+ materials,
+
+ id,
+ isDark = false,
+ classes = {},
+ bg = await Astro.slots.render('bg'),
+} = Astro.props
+---
+
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+ <Headline title={title} subtitle={subtitle} tagline={tagline} />
+ {
+ inputs && (
+ <div>
+ <RequestForm
+ inputs={inputs} 
+ textarea={textarea}
+ disclaimer={disclamer}
+ button={button}
+ description={description}
+ materials={materials}
+ />
+ </div>
+ )
+ }
+</WidgetWrapper>

src/content/config.ts

@@ -77,7 +77,15 @@ const presidentsCollection = defineCollection({
  })
 });
 
+const materialCollection = defineCollection({
+ schema: z.object({
+ name: z.string(),
+ quantity: z.number(),
+ description: z.string().optional(),
+ })
+})
+
 export const collections = {
  post: postCollection,
- presidents: presidentsCollection
-};
+ presidents: presidentsCollection,
+ material: materialCollection}

src/content/material/chairs.md

@@ -0,0 +1,4 @@
+---
+name: Chairs
+quantity: 100
+---

src/content/material/glass_water_bottle.md

@@ -0,0 +1,4 @@
+---
+name: Glass Water Bottle
+quantity: 3
+---

src/content/material/kit_stand.md

@@ -0,0 +1,5 @@
+---
+name: Kit Stand
+quantity: 2
+description: Lorem Ipsum
+---

src/content/material/paper_cup.md

@@ -0,0 +1,4 @@
+---
+name: Paper Cup
+quantity: 500
+---

src/content/material/sofas.md

@@ -0,0 +1,4 @@
+---
+name: Sofa
+quantity: 3
+---

src/content/material/support_tables.md

@@ -0,0 +1,5 @@
+---
+name: Support Tables
+quantity: 17
+description: Lorem Ipsum
+---