Compare commits

..

4 Commits

Author SHA1 Message Date
7190b306e7 Add EIN to footer
All checks were successful
Build Production Image / Build Production Image (push) Successful in 1m3s
2024-01-31 20:29:43 -08:00
d9225e36d7 Fix rental table styling in dark mode 2024-01-31 20:29:27 -08:00
c957b156d8 Fix invisible heading in dark mode 2024-01-31 20:29:03 -08:00
f936bae555 Add board of directors page 2024-01-31 20:28:13 -08:00
6 changed files with 204 additions and 45 deletions

View File

@ -0,0 +1,124 @@
import { type Metadata } from 'next'
import Link from 'next/link'
import clsx from 'clsx'
import { Container } from '@/components/Container'
import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
function SocialLink({
className,
href,
children,
icon: Icon,
}: {
className?: string
href: string
icon: React.ComponentType<{ className?: string }>
children: React.ReactNode
}) {
return (
<li className={clsx(className, 'flex')}>
<Link
href={href}
className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
>
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
<span className="ml-4">{children}</span>
</Link>
</li>
)
}
export const metadata: Metadata = {
title: 'West Sound Community Club - Board of Directory',
description:
'The West Sound Community Club on Orcas Island.',
}
export default function Club() {
return (
<Container className="mt-16 sm:mt-32">
<div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
<div className="lg:order-first lg:row-span-2">
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
The Board of Directors
</h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
<p>
Elections for the Board of Directors are held annually at the October member meeting and potluck.
</p>
<p>
If you are interested in being one the ballot at the upcoming
election, please
<a href="mailto:board@westsoundhall.org"
className="pl-1 text-blue-600 visited:text-purple-600 hover:underline">
contact the board
</a>.
</p>
</div>
<div className="overflow-x-auto -mx-4 sm:-mx-0">
<div className="inline-block min-w-full py-2 align-middle">
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0">Name</th>
<TableHeading>Position</TableHeading>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 ">
<tr>
<TableLeftHeading>Lisa Pedersen</TableLeftHeading>
<TableCell>President</TableCell>
</tr>
<tr>
<TableLeftHeading>Betsy Wareham</TableLeftHeading>
<TableCell>Vice President</TableCell>
</tr>
<tr>
<TableLeftHeading>Tony Grosinger</TableLeftHeading>
<TableCell>Secretary</TableCell>
</tr>
<tr>
<TableLeftHeading>Temporarily performed by Secretary</TableLeftHeading>
<TableCell>Treasurer</TableCell>
</tr>
<tr>
<TableLeftHeading>Mark Gasser</TableLeftHeading>
<TableCell>Director</TableCell>
</tr>
<tr>
<TableLeftHeading>Leslie Brown</TableLeftHeading>
<TableCell>Director</TableCell>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="lg:pl-20">
<ul role="list">
<SocialLink
href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon}
className="mt-4 border-zinc-100 dark:border-zinc-700/40"
>
contact@westsoundhall.org
</SocialLink>
<SocialLink
href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon}
className="mt-4 border-zinc-100 dark:border-zinc-700/40"
>
board@westsoundhall.org
</SocialLink>
</ul>
</div>
</div>
</Container>
)
}

View File

@ -5,7 +5,7 @@ import Link from 'next/link'
import clsx from 'clsx'
import { Container } from '@/components/Container'
import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
import { UserPlusIcon, GiftIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid'
import interiorEmptyImage from '@/images/photos/interior-empty.jpg'
import { ClubPayment } from './payment';
@ -98,6 +98,9 @@ export default function Club() {
>
contact@westsoundhall.org
</SocialLink>
<SocialLink href="/board-of-directors" icon={UserGroupIcon} className="mt-4">
Board of Directors
</SocialLink>
</ul>
</div>
<div>

View File

@ -143,7 +143,7 @@ export default async function Home() {
<div className="mx-auto max-w-7xl px-6 mt-24 lg:px-8">
<div className="relative px-4 sm:px-8 lg:px-12">
<div className="mx-auto max-w-2xl lg:mx-0 grid lg:max-w-none grid-cols-1 lg:grid-cols-2 lg:gap-x-8 gap-y-10">
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:col-span-2">
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-6xl lg:col-span-2">
West Sound Community Hall
</h1>
<div className="max-w-xl">

View File

@ -6,6 +6,8 @@ import clsx from 'clsx'
import { Container } from '@/components/Container'
import exteriorFront from '@/images/photos/exterior-front.png'
import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
import React from 'react'
import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
function SocialLink({
className,
@ -107,42 +109,42 @@ export default function Rental() {
<table className="min-w-full divide-y divide-gray-300">
<thead>
<tr>
<th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"></th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
<th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
<TableHeading>Half day (4 hr)</TableHeading>
<TableHeading>All day</TableHeading>
<TableHeading>Deposit</TableHeading>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 ">
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Orcas non-profit organizations</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td>
<TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
<TableCell>$50 or 2 hours for $30*</TableCell>
<TableCell>$100</TableCell>
<TableCell>None</TableCell>
</tr>
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">WSCC and OIYC Members</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td>
<TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
<TableCell>$50 or 2 hours for $30*</TableCell>
<TableCell>$100</TableCell>
<TableCell>None</TableCell>
</tr>
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Off-island non-profit organizations</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
<TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
<TableCell>$50</TableCell>
<TableCell>$100</TableCell>
<TableCell>$300</TableCell>
</tr>
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Individuals and non-public use</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
<TableLeftHeading>Individuals and non-public use</TableLeftHeading>
<TableCell>$40 per hour</TableCell>
<TableCell>$300</TableCell>
<TableCell>$300</TableCell>
</tr>
<tr>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Government sponsored activities</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td>
<TableLeftHeading>Government sponsored activities</TableLeftHeading>
<TableCell>$50</TableCell>
<TableCell>$50</TableCell>
<TableCell>None</TableCell>
</tr>
</tbody>
</table>
@ -168,6 +170,7 @@ export default function Rental() {
The West Sound Community Hall may not be used for either personal or
organizational monetary gain or to promote business activities.
The only exceptions to this restriction are:
</p>
<ol className="list-decimal ml-8 mt-5">
<li>
@ -183,7 +186,6 @@ export default function Rental() {
sponsoring nonprofit organization.)
</li>
</ol>
</p>
<p>
Any individual or organizational nonpublic use of the hall which

View File

@ -32,9 +32,14 @@ export function Footer() {
<NavLink href="/rental">Rental</NavLink>
<NavLink href="/club">Club</NavLink>
</div>
<div>
<p className="text-sm text-zinc-400 dark:text-zinc-500">
&copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved.
</p>
<p className="text-sm text-zinc-400 dark:text-zinc-500">
WSCC is a 501c3 nonprofit organization - 91-1283768
</p>
</div>
</div>
</ContainerInner>
</div>

25
src/components/Table.tsx Normal file
View File

@ -0,0 +1,25 @@
export function TableHeading({
children
}: {
children: React.ReactNode
}) {
return <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-zinc-100">{children}</th>
}
export function TableLeftHeading({
children
}: {
children: React.ReactNode
}) {
return <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-zinc-100 sm:pl-0">{children}</td>
}
export function TableCell({
children
}: {
children: React.ReactNode
}) {
return <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-zinc-400">{children}</td>
}