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 clsx from 'clsx'
import { Container } from '@/components/Container' 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 interiorEmptyImage from '@/images/photos/interior-empty.jpg'
import { ClubPayment } from './payment'; import { ClubPayment } from './payment';
@ -98,6 +98,9 @@ export default function Club() {
> >
contact@westsoundhall.org contact@westsoundhall.org
</SocialLink> </SocialLink>
<SocialLink href="/board-of-directors" icon={UserGroupIcon} className="mt-4">
Board of Directors
</SocialLink>
</ul> </ul>
</div> </div>
<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="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="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"> <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 West Sound Community Hall
</h1> </h1>
<div className="max-w-xl"> <div className="max-w-xl">

View File

@ -6,6 +6,8 @@ import clsx from 'clsx'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import exteriorFront from '@/images/photos/exterior-front.png' import exteriorFront from '@/images/photos/exterior-front.png'
import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid' import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
import React from 'react'
import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
function SocialLink({ function SocialLink({
className, className,
@ -107,42 +109,42 @@ export default function Rental() {
<table className="min-w-full divide-y divide-gray-300"> <table className="min-w-full divide-y divide-gray-300">
<thead> <thead>
<tr> <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="py-3.5 pl-4 pr-3 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> <TableHeading>Half day (4 hr)</TableHeading>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th> <TableHeading>All day</TableHeading>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th> <TableHeading>Deposit</TableHeading>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-200"> <tbody className="divide-y divide-gray-200 ">
<tr> <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> <TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td> <TableCell>$50 or 2 hours for $30*</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td> <TableCell>$100</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td> <TableCell>None</TableCell>
</tr> </tr>
<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> <TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td> <TableCell>$50 or 2 hours for $30*</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td> <TableCell>$100</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td> <TableCell>None</TableCell>
</tr> </tr>
<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> <TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td> <TableCell>$50</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td> <TableCell>$100</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td> <TableCell>$300</TableCell>
</tr> </tr>
<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> <TableLeftHeading>Individuals and non-public use</TableLeftHeading>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td> <TableCell>$40 per hour</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td> <TableCell>$300</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td> <TableCell>$300</TableCell>
</tr> </tr>
<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> <TableLeftHeading>Government sponsored activities</TableLeftHeading>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td> <TableCell>$50</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td> <TableCell>$50</TableCell>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None</td> <TableCell>None</TableCell>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -168,23 +170,23 @@ export default function Rental() {
The West Sound Community Hall may not be used for either personal or The West Sound Community Hall may not be used for either personal or
organizational monetary gain or to promote business activities. organizational monetary gain or to promote business activities.
The only exceptions to this restriction are: The only exceptions to this restriction are:
<ol className="list-decimal ml-8 mt-5">
<li>
Use for fund raising activities sponsored by the West Sound
Community Club, a nonprofit corporation, for purposes specified in
Article II of the Bylaws of the West Sound Community Club.
</li>
<li>
Use for fund raising activities sponsored by qualified nonprofit
organizations with prior approval by the President of the West Sound
Community Club. (Such activities must be less than five days in
length and more than 50% of the proceeds must be distributed to the
sponsoring nonprofit organization.)
</li>
</ol>
</p> </p>
<ol className="list-decimal ml-8 mt-5">
<li>
Use for fund raising activities sponsored by the West Sound
Community Club, a nonprofit corporation, for purposes specified in
Article II of the Bylaws of the West Sound Community Club.
</li>
<li>
Use for fund raising activities sponsored by qualified nonprofit
organizations with prior approval by the President of the West Sound
Community Club. (Such activities must be less than five days in
length and more than 50% of the proceeds must be distributed to the
sponsoring nonprofit organization.)
</li>
</ol>
<p> <p>
Any individual or organizational nonpublic use of the hall which Any individual or organizational nonpublic use of the hall which
requires payment of a fee by those attending or offers items for requires payment of a fee by those attending or offers items for

View File

@ -32,9 +32,14 @@ export function Footer() {
<NavLink href="/rental">Rental</NavLink> <NavLink href="/rental">Rental</NavLink>
<NavLink href="/club">Club</NavLink> <NavLink href="/club">Club</NavLink>
</div> </div>
<p className="text-sm text-zinc-400 dark:text-zinc-500"> <div>
&copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved. <p className="text-sm text-zinc-400 dark:text-zinc-500">
</p> &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> </div>
</ContainerInner> </ContainerInner>
</div> </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>
}