Add board of directors page
This commit is contained in:
parent
52ec6d7b81
commit
f936bae555
124
src/app/board-of-directors/page.tsx
Normal file
124
src/app/board-of-directors/page.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user