tgrosinger/west-sound-hall
1
0
Fork 0
Code Actions Packages Releases Activity

Remove dark mode
All checks were successful
Build Production Image / Build Production Image (push) Successful in 1m0s
Details

Browse Source
This commit is contained in:
Tony Grosinger 2024-04-20 17:52:55 -07:00
parent 18365af5dc
commit 3481adfcab
28 changed files with 142 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/board-of-directors/page.tsx
View File

@ -22,7 +22,7 @@ function SocialLink({
<li className={clsx(className, 'flex')}> <li className={clsx(className, 'flex')}>
<Link <Link
href={href} 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" className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
> >
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-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> <span className="ml-4">{children}</span>
@ -43,10 +43,10 @@ export default function Club() {
<Container className="mt-16 sm:mt-32"> <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="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"> <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"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
The Board of Directors The Board of Directors
</h1> </h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-7 text-base text-zinc-600">
<p> <p>
Elections for the Board of Directors are held annually at the October member meeting and potluck. Elections for the Board of Directors are held annually at the October member meeting and potluck.
</p> </p>
@ -105,14 +105,14 @@ export default function Club() {
<SocialLink <SocialLink
href="mailto:contact@westsoundhall.org" href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon} icon={EnvelopeIcon}
className="mt-4 border-zinc-100 dark:border-zinc-700/40" className="mt-4 border-zinc-100"
> >
contact@westsoundhall.org contact@westsoundhall.org
</SocialLink> </SocialLink>
<SocialLink <SocialLink
href="mailto:contact@westsoundhall.org" href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon} icon={EnvelopeIcon}
className="mt-4 border-zinc-100 dark:border-zinc-700/40" className="mt-4 border-zinc-100"
> >
board@westsoundhall.org board@westsoundhall.org
</SocialLink> </SocialLink>

26
src/app/calendar/calendar.tsx
View File

@ -91,12 +91,10 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
return getEvents(calendar, selectedDay); return getEvents(calendar, selectedDay);
}, [calendar, selectedDay]); }, [calendar, selectedDay]);
// TODO: Dark mode
return ( return (
<div className="lg:flex lg:h-full lg:flex-col"> <div className="lg:flex lg:h-full lg:flex-col">
<header className="flex items-center justify-between border-b border-zinc-100 dark:border-zinc-700/40 py-4 lg:flex-none"> <header className="flex items-center justify-between border-b border-zinc-100 py-4 lg:flex-none">
<h1 className="text-base font-semibold leading-6 text-zinc-800 dark:text-zinc-100"> <h1 className="text-base font-semibold leading-6 text-zinc-800">
<time dateTime={selectedMonth.format('YYYY-MM')}>{selectedMonth.format('MMMM YYYY')}</time> <time dateTime={selectedMonth.format('YYYY-MM')}>{selectedMonth.format('MMMM YYYY')}</time>
</h1> </h1>
<div className="flex items-center"> <div className="flex items-center">
@ -104,7 +102,7 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
<button <button
type="button" type="button"
onClick={() => { setSelectedMonth(selectedMonth.subtract(1, 'month')) }} onClick={() => { setSelectedMonth(selectedMonth.subtract(1, 'month')) }}
className="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-100 dark:border-zinc-700/40 pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50 dark:hover:text-teal-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40" className="flex h-9 w-12 items-center justify-center rounded-l-md border-y border-l border-zinc-100 pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50"
> >
<span className="sr-only">Previous month</span> <span className="sr-only">Previous month</span>
<ChevronLeftIcon className="h-5 w-5" aria-hidden="true" /> <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
@ -115,7 +113,7 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
setSelectedDay(dayjs().startOf('day')) setSelectedDay(dayjs().startOf('day'))
setSelectedMonth(dayjs().startOf('month')); setSelectedMonth(dayjs().startOf('month'));
}} }}
className="hidden border-y border-zinc-100 dark:border-zinc-700/40 px-3.5 text-sm font-semibold text-zinc-800 dark:text-zinc-100 hover:bg-gray-50 focus:relative md:block dark:hover:text-teal-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40" className="hidden border-y border-zinc-100 px-3.5 text-sm font-semibold text-zinc-800 hover:bg-gray-50 focus:relative md:block"
> >
Today Today
</button> </button>
@ -123,7 +121,7 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
<button <button
type="button" type="button"
onClick={() => { setSelectedMonth(selectedMonth.add(1, 'month')) }} onClick={() => { setSelectedMonth(selectedMonth.add(1, 'month')) }}
className="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-100 dark:border-zinc-700/40 pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50 dark:hover:text-teal-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40" className="flex h-9 w-12 items-center justify-center rounded-r-md border-y border-r border-zinc-100 pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50"
> >
<span className="sr-only">Next month</span> <span className="sr-only">Next month</span>
<ChevronRightIcon className="h-5 w-5" aria-hidden="true" /> <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
@ -131,15 +129,15 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
</div> </div>
</div> </div>
</header> </header>
<div className="shadow ring-1 ring-black dark:ring-zinc-700 ring-opacity-5 lg:flex lg:flex-auto lg:flex-col"> <div className="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
<div className="grid grid-cols-7 gap-px border-b border-zinc-100 dark:border-zinc-700/40 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"> <div className="grid grid-cols-7 gap-px border-b border-zinc-100 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
{[['M', 'on'], ['T', 'ue'], ['W', 'ed'], ['T', 'hu'], ['F', 'ri'], ['S', 'at'], ['S', 'un']].map((d) => ( {[['M', 'on'], ['T', 'ue'], ['W', 'ed'], ['T', 'hu'], ['F', 'ri'], ['S', 'at'], ['S', 'un']].map((d) => (
<div key={d[0] + d[1]} className="bg-white dark:bg-zinc-900 py-2"> <div key={d[0] + d[1]} className="bg-white py-2">
{d[0]}<span className="sr-only sm:not-sr-only">{d[1]}</span> {d[0]}<span className="sr-only sm:not-sr-only">{d[1]}</span>
</div> </div>
))} ))}
</div> </div>
<div className="flex bg-gray-200 dark:bg-zinc-700/40 text-xs leading-6 text-gray-700 lg:flex-auto"> <div className="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
<div className="isolate grid w-full grid-cols-7 gap-px"> <div className="isolate grid w-full grid-cols-7 gap-px">
{days.map((day) => { {days.map((day) => {
const events = getEvents(calendar, day.date); const events = getEvents(calendar, day.date);
@ -151,13 +149,13 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
type="button" type="button"
onClick={() => { setSelectedDay(day.date) }} onClick={() => { setSelectedDay(day.date) }}
className={classNames( className={classNames(
day.isCurrentMonth ? 'bg-white dark:bg-zinc-900' : 'bg-gray-50', day.isCurrentMonth ? 'bg-white' : 'bg-gray-50',
isSelected || day.isToday ? 'font-semibold' : '', isSelected || day.isToday ? 'font-semibold' : '',
isSelected ? 'text-white' : '', isSelected ? 'text-white' : '',
!isSelected && day.isToday ? 'text-indigo-600' : '', !isSelected && day.isToday ? 'text-indigo-600' : '',
!isSelected && day.isCurrentMonth && !day.isToday ? 'text-gray-900' : '', !isSelected && day.isCurrentMonth && !day.isToday ? 'text-gray-900' : '',
!isSelected && !day.isCurrentMonth && !day.isToday ? 'text-gray-500' : '', !isSelected && !day.isCurrentMonth && !day.isToday ? 'text-gray-500' : '',
'flex h-12 sm:h-14 md:h-16 lg:h-24 flex-col px-3 py-2 hover:bg-gray-100 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40 focus:z-10' 'flex h-12 sm:h-14 md:h-16 lg:h-24 flex-col px-3 py-2 hover:bg-gray-100 focus:z-10'
)} )}
> >
<time <time
@ -198,7 +196,7 @@ export const CalendarComponent: React.FC<{ calendar: Calendar }> = ({ calendar }
</div> </div>
</div> </div>
<div className="pt-10"> <div className="pt-10">
<h2 className="text-base font-semibold leading-6 text-zinc-800 dark:text-zinc-100"> <h2 className="text-base font-semibold leading-6 text-zinc-800">
Events on <time dateTime={selectedDay.format('YYYY-MM-DD')}>{selectedDay.format('MMMM D')}</time> Events on <time dateTime={selectedDay.format('YYYY-MM-DD')}>{selectedDay.format('MMMM D')}</time>
</h2> </h2>
{selectedDayEvents.length > 0 && ( {selectedDayEvents.length > 0 && (

2
src/app/calendar/page.tsx
View File

@ -109,7 +109,7 @@ export default async function Calendar() {
return ( return (
<Container className="mt-16 sm:mt-32"> <Container className="mt-16 sm:mt-32">
<header className="max-w-2xl"> <header className="max-w-2xl">
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
Hall Calendar Hall Calendar
</h1> </h1>
</header> </header>

19
src/app/club/page.tsx
View File

@ -6,7 +6,7 @@ import dynamic from "next/dynamic";
import clsx from 'clsx' import clsx from 'clsx'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
import { UserPlusIcon, GiftIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid' import { UserPlusIcon, AtSymbolIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid'
import interiorEmptyImage from '@/images/photos/interior-empty.jpg' import interiorEmptyImage from '@/images/photos/interior-empty.jpg'
function SocialLink({ function SocialLink({
@ -24,7 +24,7 @@ function SocialLink({
<li className={clsx(className, 'flex')}> <li className={clsx(className, 'flex')}>
<Link <Link
href={href} 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" className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
> >
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-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> <span className="ml-4">{children}</span>
@ -61,15 +61,15 @@ export default function Club() {
src={interiorEmptyImage} src={interiorEmptyImage}
alt="" alt=""
sizes="(min-width: 1024px) 32rem, 20rem" sizes="(min-width: 1024px) 32rem, 20rem"
className="aspect-square rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800" className="aspect-square rounded-2xl bg-zinc-100 object-cover"
/> />
</div> </div>
</div> </div>
<div className="lg:order-first lg:row-span-2"> <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"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
West Sound Community Club West Sound Community Club
</h1> </h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-7 text-base text-zinc-600">
<p> <p>
The West Sound Community Club is a group of neighbors and friends The West Sound Community Club is a group of neighbors and friends
living in the West Sound area. Together we steward the West Sound living in the West Sound area. Together we steward the West Sound
@ -97,13 +97,16 @@ export default function Club() {
<SocialLink href="/WSCC-Membership-Form.pdf" icon={UserPlusIcon}> <SocialLink href="/WSCC-Membership-Form.pdf" icon={UserPlusIcon}>
Membership Form Membership Form
</SocialLink> </SocialLink>
<SocialLink href="#" icon={GiftIcon} className="mt-4"> <SocialLink href="https://groups.orcashub.org/invites/YkP79vjDtz" icon={AtSymbolIcon} className="mt-4">
Donations (Coming soon) Club Member Mailing List
</SocialLink>
<SocialLink href="https://groups.orcashub.org/invites/Lg87tP3G2V" icon={AtSymbolIcon} className="mt-4">
West Sound Neighbor to Neighbor Mailing List
</SocialLink> </SocialLink>
<SocialLink <SocialLink
href="mailto:contact@westsoundhall.org" href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon} icon={EnvelopeIcon}
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40" className="mt-8 border-t border-zinc-100 pt-8"
> >
contact@westsoundhall.org contact@westsoundhall.org
</SocialLink> </SocialLink>

43
src/app/club/payment.tsx
View File

@ -166,7 +166,7 @@ function CheckoutForm({
{/* Membership Type */} {/* Membership Type */}
<RadioGroup value={selectedMembershipLevel} onChange={setSelectedMembershipLevel} className="space-y-3"> <RadioGroup value={selectedMembershipLevel} onChange={setSelectedMembershipLevel} className="space-y-3">
<RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900">
Select a membership type Select a membership type
</RadioGroup.Label> </RadioGroup.Label>
@ -177,8 +177,8 @@ function CheckoutForm({
value={membership} value={membership}
className={({ active }) => className={({ active }) =>
classNames( classNames(
active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-200 dark:border-gray-500', active ? 'border-indigo-600 ring-2 ring-indigo-600' : 'border-gray-200',
'relative flex cursor-pointer rounded-lg border bg-white hover:bg-gray-50 hover:dark:bg-zinc-600 dark:bg-zinc-700 p-4 shadow-sm focus:outline-none' 'relative flex cursor-pointer rounded-lg border bg-white hover:bg-gray-50 p-4 shadow-sm focus:outline-none'
) )
} }
> >
@ -186,7 +186,7 @@ function CheckoutForm({
<> <>
<span className="flex flex-1 items-center justify-between "> <span className="flex flex-1 items-center justify-between ">
<span className="flex flex-col"> <span className="flex flex-col">
<RadioGroup.Label as="span" className="block text-sm font-medium text-gray-900 dark:text-white"> <RadioGroup.Label as="span" className="block text-sm font-medium text-gray-900">
{membership.title} {membership.title}
</RadioGroup.Label> </RadioGroup.Label>
<RadioGroup.Description as="span" className="mt-1 flex items-center text-sm text-gray-500"> <RadioGroup.Description as="span" className="mt-1 flex items-center text-sm text-gray-500">
@ -194,7 +194,7 @@ function CheckoutForm({
</RadioGroup.Description> </RadioGroup.Description>
</span> </span>
<RadioGroup.Description as="span" className="ml-8 text-sm font-medium"> <RadioGroup.Description as="span" className="ml-8 text-sm font-medium">
<span className="text-gray-900 dark:text-white">${membership.price}</span> <span className="text-gray-900">${membership.price}</span>
<span className="text-gray-500">/yr</span> <span className="text-gray-500">/yr</span>
</RadioGroup.Description> </RadioGroup.Description>
</span> </span>
@ -215,7 +215,7 @@ function CheckoutForm({
{/* Additional donation */} {/* Additional donation */}
<RadioGroup value={selectedAdditionalDonation} onChange={setSelectedAdditionalDonation} className="space-y-3"> <RadioGroup value={selectedAdditionalDonation} onChange={setSelectedAdditionalDonation} className="space-y-3">
<RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <RadioGroup.Label className="text-base font-semibold leading-6 text-gray-900">
Additional donation Additional donation
</RadioGroup.Label> </RadioGroup.Label>
<div className="grid grid-cols-3 gap-3 sm:grid-cols-5"> <div className="grid grid-cols-3 gap-3 sm:grid-cols-5">
@ -229,8 +229,8 @@ function CheckoutForm({
option === -1 ? 'col-span-2' : '', option === -1 ? 'col-span-2' : '',
checked checked
? 'ring-2 ring-indigo-600' ? 'ring-2 ring-indigo-600'
: 'ring-1 ring-inset ring-gray-200 dark:ring-gray-500 text-gray-900 dark:text-white hover:bg-gray-50 hover:dark:bg-zinc-600', : 'ring-1 ring-inset ring-gray-200 text-gray-900 hover:bg-gray-50',
'flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold sm:flex-1 bg-white dark:bg-zinc-700' 'flex items-center justify-center rounded-md py-3 px-3 text-sm font-semibold sm:flex-1 bg-white'
) )
} }
> >
@ -250,7 +250,7 @@ function CheckoutForm({
min="0" min="0"
step="1" step="1"
onChange={(e) => setCustomAmount(e.target.value)} onChange={(e) => setCustomAmount(e.target.value)}
className="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 dark:text-white dark:bg-zinc-700 ring-1 ring-inset ring-gray-200 dark:ring-gray-500 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6" className="block w-full rounded-md border-0 py-1.5 pl-7 pr-12 text-gray-900 ring-1 ring-inset ring-gray-200 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-500 sm:text-sm sm:leading-6"
placeholder="Custom" placeholder="Custom"
aria-describedby="price-currency" aria-describedby="price-currency"
/> />
@ -274,12 +274,12 @@ function CheckoutForm({
</RadioGroup> </RadioGroup>
<div className="space-y-3"> <div className="space-y-3">
<h2 className="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <h2 className="text-base font-semibold leading-6 text-gray-900">
About you About you
</h2> </h2>
<div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-200 dark:ring-gray-500 focus-within:ring-2 focus-within:ring-indigo-600 dark:bg-zinc-700 dark:text-white"> <div className="rounded-md mb-3 px-3 pb-1.5 pt-2.5 shadow-sm ring-1 ring-inset ring-gray-200 focus-within:ring-2 focus-within:ring-indigo-600">
<label htmlFor="name" className="block text-xs font-medium text-gray-900 dark:text-zinc-400"> <label htmlFor="name" className="block text-xs font-medium text-gray-900">
Email Email
</label> </label>
<input <input
@ -288,7 +288,7 @@ function CheckoutForm({
id="email" id="email"
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className="block w-full border-0 p-0 dark:bg-zinc-700 text-gray-900 dark:text-white placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" className="block w-full border-0 p-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
placeholder="you@example.com" placeholder="you@example.com"
/> />
</div> </div>
@ -296,7 +296,7 @@ function CheckoutForm({
</div> </div>
<div className="space-y-3"> <div className="space-y-3">
<h2 className="text-base font-semibold leading-6 text-gray-900 dark:text-white"> <h2 className="text-base font-semibold leading-6 text-gray-900">
Payment Payment
</h2> </h2>
<div className="mt-1 text-sm text-gray-500"> <div className="mt-1 text-sm text-gray-500">
@ -358,7 +358,6 @@ export default function ClubPayment() {
const [paymentIntent, setPaymentIntent] = useState(''); const [paymentIntent, setPaymentIntent] = useState('');
const htmlEl = document.getElementsByTagName('html')[0]; const htmlEl = document.getElementsByTagName('html')[0];
const darkTheme = htmlEl.classList.contains("dark");
useEffect(() => { useEffect(() => {
// Create PaymentIntent as soon as the page loads using our local API // Create PaymentIntent as soon as the page loads using our local API
@ -388,20 +387,6 @@ export default function ClubPayment() {
labels: 'floating', labels: 'floating',
}; };
const cb = useCallback(
() => {
const updatedHtmlEl = document.getElementsByTagName('html')[0];
const updatedDarkTheme = updatedHtmlEl.classList.contains("dark");
if (updatedDarkTheme !== darkTheme) {
location.reload();
}
},
[darkTheme]
)
useMutationObservable(htmlEl, cb);
const options: StripeElementsOptions = { const options: StripeElementsOptions = {
clientSecret, clientSecret,
appearance, appearance,

14
src/app/hall-history/page.tsx
View File

@ -23,7 +23,7 @@ function SocialLink({
<li className={clsx(className, 'flex')}> <li className={clsx(className, 'flex')}>
<Link <Link
href={href} 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" className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
> >
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-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> <span className="ml-4">{children}</span>
@ -94,18 +94,18 @@ export default function About() {
src={originalDeedImage} src={originalDeedImage}
alt="" alt=""
sizes="(min-width: 1024px) 32rem, 20rem" sizes="(min-width: 1024px) 32rem, 20rem"
className="rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800" className="rotate-3 rounded-2xl bg-zinc-100 object-cover"
/> />
<p className="text-sm text-zinc-400 dark:text-zinc-500"> <p className="text-sm text-zinc-400">
Original property deed from Alexander Chalmers. Original property deed from Alexander Chalmers.
</p> </p>
</div> </div>
</div> </div>
<div className="lg:order-first lg:row-span-2"> <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"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
Hall History Hall History
</h1> </h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-7 text-base text-zinc-600">
<p> <p>
The West Sound Community Hall represents the history and character The West Sound Community Hall represents the history and character
of Orcas Island. Members of the nonprofit West Sound Community Club, of Orcas Island. Members of the nonprofit West Sound Community Club,
@ -130,7 +130,7 @@ export default function About() {
</p> </p>
</div> </div>
<div className="mt-8 space-y-8"> <div className="mt-8 space-y-8">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
Detailed History Detailed History
</h2> </h2>
@ -154,7 +154,7 @@ export default function About() {
title='1903 - 1935' title='1903 - 1935'
description='During this period the following organizations were regular users of the Hall:' description='During this period the following organizations were regular users of the Hall:'
> >
<div className="relative z-10 ml-4 mt-2 text-sm text-zinc-600 dark:text-zinc-400"> <div className="relative z-10 ml-4 mt-2 text-sm text-zinc-600">
<DateListItem <DateListItem
year='1903' year='1903'
value='Women&apos;s Christian Temperance Union Woodmen Lodge' value='Women&apos;s Christian Temperance Union Woodmen Lodge'

2
src/app/layout.tsx
View File

@ -27,7 +27,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en" className="h-full antialiased" suppressHydrationWarning> <html lang="en" className="h-full antialiased" suppressHydrationWarning>
<body className="flex h-full bg-zinc-50 dark:bg-black"> <body className="flex h-full bg-zinc-50">
<Providers> <Providers>
<div className="flex w-full"> <div className="flex w-full">
<Layout>{children}</Layout> <Layout>{children}</Layout>

6
src/app/news/2024-02-17-potluck/page.mdx
View File

@ -25,7 +25,7 @@ all over Orcas Island, many of which dated back to the early 1900's.
<div className="not-prose flex flex-col items-center"> <div className="not-prose flex flex-col items-center">
<Image src={boddingtonStore} alt="Boddington's Store at the end of Crow Valley Road" /> <Image src={boddingtonStore} alt="Boddington's Store at the end of Crow Valley Road" />
<span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500"> <span className="mt-2 text-sm text-zinc-400">
Boddington's Store at the end of Crow Valley Road. Boddington's Store at the end of Crow Valley Road.
</span> </span>
</div> </div>
@ -36,7 +36,7 @@ passed down by John's family.
<div className="not-prose flex flex-col items-center"> <div className="not-prose flex flex-col items-center">
<Image src={westSoundMainStreet} alt="West Sound Main Street" /> <Image src={westSoundMainStreet} alt="West Sound Main Street" />
<span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500"> <span className="mt-2 text-sm text-zinc-400">
West Sound Main Street West Sound Main Street
</span> </span>
</div> </div>
@ -46,7 +46,7 @@ Sound, and how few trees there were on the island!
<div className="not-prose flex flex-col items-center"> <div className="not-prose flex flex-col items-center">
<Image src={westSound} alt="West Sound and the south end of Turtleback" /> <Image src={westSound} alt="West Sound and the south end of Turtleback" />
<span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500"> <span className="mt-2 text-sm text-zinc-400">
West Sound and the south end of Turtleback West Sound and the south end of Turtleback
</span> </span>
</div> </div>

2
src/app/news/2024-03-06-town-hall-meeting/page.mdx
View File

@ -23,7 +23,7 @@ can be prioritized and planned in the future.
<div className="not-prose flex flex-col items-center"> <div className="not-prose flex flex-col items-center">
<Image src={townHallMeeting} alt="Town Hall Meeting" /> <Image src={townHallMeeting} alt="Town Hall Meeting" />
<span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500"> <span className="mt-2 text-sm text-zinc-400">
Town Hall Meeting Town Hall Meeting
</span> </span>
</div> </div>

2
src/app/news/page.tsx
View File

@ -47,7 +47,7 @@ export default async function ArticlesIndex() {
title="West Sound Hall News" title="West Sound Hall News"
intro="History, Announcements, and more from the West Sound Hall and Community Club." intro="History, Announcements, and more from the West Sound Hall and Community Club."
> >
<div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"> <div className="md:border-l md:border-zinc-100 md:pl-6">
<div className="flex max-w-3xl flex-col space-y-16"> <div className="flex max-w-3xl flex-col space-y-16">
{articles.map((article) => ( {articles.map((article) => (
<Article key={article.slug} article={article} /> <Article key={article.slug} article={article} />

6
src/app/news/welcome-to-the-wscc-website/page.mdx
View File

@ -31,7 +31,7 @@ years.
<div className="not-prose flex flex-col items-center"> <div className="not-prose flex flex-col items-center">
<Image src={originalWebsite} alt="Screenshot of the original West Sound Hall website" /> <Image src={originalWebsite} alt="Screenshot of the original West Sound Hall website" />
<span className="mt-2 text-sm text-zinc-400 dark:text-zinc-500"> <span className="mt-2 text-sm text-zinc-400">
Screenshot of the original West Sound Hall website. Screenshot of the original West Sound Hall website.
</span> </span>
</div> </div>
@ -42,3 +42,7 @@ WA Heritage Register. There&apos;s so much more to the hall than just potlucks,
and this website hopes to share this with the West Sound Community. and this website hopes to share this with the West Sound Community.
Thanks for being a part of the West Sound Community! Thanks for being a part of the West Sound Community!
For posterity, the source code for this website along with instructions for
developing and updating it can be found
[here](https://git.grosinger.net/tgrosinger/west-sound-hall).

6
src/app/not-found.tsx
View File

@ -5,13 +5,13 @@ export default function NotFound() {
return ( return (
<Container className="flex h-full items-center pt-16 sm:pt-32"> <Container className="flex h-full items-center pt-16 sm:pt-32">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<p className="text-base font-semibold text-zinc-400 dark:text-zinc-500"> <p className="text-base font-semibold text-zinc-400">
404 404
</p> </p>
<h1 className="mt-4 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> <h1 className="mt-4 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
Page not found Page not found
</h1> </h1>
<p className="mt-4 text-base text-zinc-600 dark:text-zinc-400"> <p className="mt-4 text-base text-zinc-600">
Sorry, we couldn’t find the page you’re looking for. Sorry, we couldn’t find the page you’re looking for.
</p> </p>
<Button href="/" variant="secondary" className="mt-4"> <Button href="/" variant="secondary" className="mt-4">

26
src/app/page.tsx
View File

@ -21,7 +21,7 @@ function LinkButton({
return ( return (
<Link <Link
href={href} href={href}
className="rounded-md px-3 py-2 font-semibold text-center transition dark:hover:text-teal-400 bg-sky-300 hover:bg-sky-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40" className="rounded-md px-3 py-2 font-semibold text-center transition bg-sky-300 hover:bg-sky-400"
> >
{children} {children}
</Link> </Link>
@ -53,17 +53,17 @@ function EventListItem({ event }: { event: Event }) {
<li className="flex gap-4"> <li className="flex gap-4">
<dl className="flex flex-auto flex-wrap gap-x-2"> <dl className="flex flex-auto flex-wrap gap-x-2">
<dt className="sr-only">Title</dt> <dt className="sr-only">Title</dt>
<dd className="w-full flex-none text-sm font-medium text-zinc-900 dark:text-zinc-100"> <dd className="w-full flex-none text-sm font-medium text-zinc-900">
{event.name} {event.name}
</dd> </dd>
<dt className="sr-only">Date</dt> <dt className="sr-only">Date</dt>
<dd className="text-xs text-zinc-500 dark:text-zinc-400"> <dd className="text-xs text-zinc-500">
{date} {date}
</dd> </dd>
<dt className="sr-only">Time</dt> <dt className="sr-only">Time</dt>
{event.allDay {event.allDay
? <dd ? <dd
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500" className="ml-auto text-xs text-zinc-400"
aria-label="All day" aria-label="All day"
> >
All day All day
@ -71,7 +71,7 @@ function EventListItem({ event }: { event: Event }) {
: (event.end : (event.end
? ( ? (
<dd <dd
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500" className="ml-auto text-xs text-zinc-400"
aria-label={`${start.format('YYYY-MM-DD HH:mm')} until ${end.format('YYYY-MM-DD HH-mm')}`} aria-label={`${start.format('YYYY-MM-DD HH:mm')} until ${end.format('YYYY-MM-DD HH-mm')}`}
> >
<time dateTime={start.format('YYYY-MM-DD HH:mm')}>{start.format('h:mm a')}</time>{' '} <time dateTime={start.format('YYYY-MM-DD HH:mm')}>{start.format('h:mm a')}</time>{' '}
@ -80,7 +80,7 @@ function EventListItem({ event }: { event: Event }) {
</dd> </dd>
) : ( ) : (
<dd <dd
className="ml-auto text-xs text-zinc-400 dark:text-zinc-500" className="ml-auto text-xs text-zinc-400"
aria-label={start.format('YYYY-MM-DD HH-mm')} aria-label={start.format('YYYY-MM-DD HH-mm')}
> >
<time dateTime={start.format('YYYY-MM-DD HH-mm')}>{start.format('h:mm a')}</time>{' '} <time dateTime={start.format('YYYY-MM-DD HH-mm')}>{start.format('h:mm a')}</time>{' '}
@ -97,9 +97,9 @@ async function Events() {
const events = await getUpcomingEvents(); const events = await getUpcomingEvents();
return ( return (
<div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"> <div className="rounded-2xl border border-zinc-100 p-6">
<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100"> <h2 className="flex text-sm font-semibold text-zinc-900">
<CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400 dark:fill-zinc-100/10 dark:stroke-zinc-500" /> <CalendarDaysIcon className="h-6 w-6 flex-none fill-zinc-100 stroke-zinc-400" />
<span className="ml-3">Upcoming Events</span> <span className="ml-3">Upcoming Events</span>
</h2> </h2>
<ol className="mt-6 space-y-4"> <ol className="mt-6 space-y-4">
@ -124,17 +124,17 @@ 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-zinc-800 dark:text-zinc-100 sm:text-6xl lg:col-span-2"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 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">
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400"> <p className="mt-6 text-base text-zinc-600">
The West Sound Community Hall is located in the hamlet of West Sound The West Sound Community Hall is located in the hamlet of West Sound
on Orcas Island, about 10 minutes from the ferry landing and on Orcas Island, about 10 minutes from the ferry landing and
Eastsound. It has served as a public assembly hall since it was Eastsound. It has served as a public assembly hall since it was
built by volunteers in 1902. built by volunteers in 1902.
</p> </p>
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400"> <p className="mt-6 text-base text-zinc-600">
Facing West Sound, the Hall is at the heart of the West Sound community. Facing West Sound, the Hall is at the heart of the West Sound community.
</p> </p>
</div> </div>
@ -143,7 +143,7 @@ export default async function Home() {
alt="Exterior front of the West Sound Hall" alt="Exterior front of the West Sound Hall"
className="lg:row-span-2 w-full max-w-xl rounded-2xl object-cover lg:max-w-none" className="lg:row-span-2 w-full max-w-xl rounded-2xl object-cover lg:max-w-none"
/> />
<div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"> <div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6">
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
<LinkButton href='/club'>Join or Renew your Membership</LinkButton> <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
<LinkButton href='/rental'>Rent the Hall</LinkButton> <LinkButton href='/rental'>Rent the Hall</LinkButton>

6
src/app/projects/page.tsx
View File

@ -75,7 +75,7 @@ export default function Projects() {
> >
{projects.map((project) => ( {projects.map((project) => (
<Card as="li" key={project.name}> <Card as="li" key={project.name}>
<div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0"> <div className="relative z-10 flex h-12 w-12 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5">
<Image <Image
src={project.logo} src={project.logo}
alt="" alt=""
@ -83,11 +83,11 @@ export default function Projects() {
unoptimized unoptimized
/> />
</div> </div>
<h2 className="mt-6 text-base font-semibold text-zinc-800 dark:text-zinc-100"> <h2 className="mt-6 text-base font-semibold text-zinc-800">
<Card.Link href={project.link.href}>{project.name}</Card.Link> <Card.Link href={project.link.href}>{project.name}</Card.Link>
</h2> </h2>
<Card.Description>{project.description}</Card.Description> <Card.Description>{project.description}</Card.Description>
<p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500 dark:text-zinc-200"> <p className="relative z-10 mt-6 flex text-sm font-medium text-zinc-400 transition group-hover:text-teal-500">
<LinkIcon className="h-6 w-6 flex-none" /> <LinkIcon className="h-6 w-6 flex-none" />
<span className="ml-2">{project.link.label}</span> <span className="ml-2">{project.link.label}</span>
</p> </p>

30
src/app/providers.tsx
View File

@ -2,7 +2,6 @@
import { createContext, useEffect, useRef } from 'react' import { createContext, useEffect, useRef } from 'react'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { ThemeProvider, useTheme } from 'next-themes'
function usePrevious<T>(value: T) { function usePrevious<T>(value: T) {
let ref = useRef<T>() let ref = useRef<T>()
@ -14,30 +13,6 @@ function usePrevious<T>(value: T) {
return ref.current return ref.current
} }
function ThemeWatcher() {
let { resolvedTheme, setTheme } = useTheme()
useEffect(() => {
let media = window.matchMedia('(prefers-color-scheme: dark)')
function onMediaChange() {
let systemTheme = media.matches ? 'dark' : 'light'
if (resolvedTheme === systemTheme) {
setTheme('system')
}
}
onMediaChange()
media.addEventListener('change', onMediaChange)
return () => {
media.removeEventListener('change', onMediaChange)
}
}, [resolvedTheme, setTheme])
return null
}
export const AppContext = createContext<{ previousPathname?: string }>({}) export const AppContext = createContext<{ previousPathname?: string }>({})
export function Providers({ children }: { children: React.ReactNode }) { export function Providers({ children }: { children: React.ReactNode }) {
@ -46,10 +21,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
return ( return (
<AppContext.Provider value={{ previousPathname }}> <AppContext.Provider value={{ previousPathname }}>
<ThemeProvider attribute="class" disableTransitionOnChange> {children}
<ThemeWatcher />
{children}
</ThemeProvider>
</AppContext.Provider> </AppContext.Provider>
) )
} }

28
src/app/rental/page.tsx
View File

@ -24,7 +24,7 @@ function SocialLink({
<li className={clsx(className, 'flex')}> <li className={clsx(className, 'flex')}>
<Link <Link
href={href} 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" className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500"
> >
<Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-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> <span className="ml-4">{children}</span>
@ -49,15 +49,15 @@ export default function Rental() {
src={exteriorFront} src={exteriorFront}
alt="" alt=""
sizes="(min-width: 1024px) 32rem, 20rem" sizes="(min-width: 1024px) 32rem, 20rem"
className="aspect-square rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800" className="aspect-square rounded-2xl bg-zinc-100 object-cover"
/> />
</div> </div>
</div> </div>
<div className="lg:order-first lg:row-span-2"> <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"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
Hall Rental Hall Rental
</h1> </h1>
<div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-7 text-base text-zinc-600">
<p> <p>
The West Sound Community Hall is a public assembly hall, which has The West Sound Community Hall is a public assembly hall, which has
been in continuous operation since it was built in 1902. In 1999, been in continuous operation since it was built in 1902. In 1999,
@ -99,14 +99,14 @@ export default function Rental() {
<SocialLink <SocialLink
href="mailto:contact@westsoundhall.org" href="mailto:contact@westsoundhall.org"
icon={EnvelopeIcon} icon={EnvelopeIcon}
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40" className="mt-8 border-t border-zinc-100 pt-8"
> >
contact@westsoundhall.org contact@westsoundhall.org
</SocialLink> </SocialLink>
</ul> </ul>
</div> </div>
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
Rental Rates Rental Rates
</h2> </h2>
@ -157,8 +157,8 @@ export default function Rental() {
</div> </div>
</div> </div>
<div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-5 text-base text-zinc-600">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
Use Restrictions Use Restrictions
</h2> </h2>
@ -222,8 +222,8 @@ export default function Rental() {
</p> </p>
</div> </div>
<div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-5 text-base text-zinc-600">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
Capacity Capacity
</h2> </h2>
@ -233,8 +233,8 @@ export default function Rental() {
</p> </p>
</div> </div>
<div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-5 text-base text-zinc-600">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
Parking Parking
</h2> </h2>
@ -255,8 +255,8 @@ export default function Rental() {
</p> </p>
</div> </div>
<div className="mt-6 space-y-5 text-base text-zinc-600 dark:text-zinc-400"> <div className="mt-6 space-y-5 text-base text-zinc-600">
<h2 className="text-2xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-2xl"> <h2 className="text-2xl font-bold tracking-tight text-zinc-800 sm:text-2xl">
Accessibility Accessibility
</h2> </h2>

2
src/app/thank-you/page.tsx
View File

@ -23,7 +23,7 @@ export default async function ThankYou({
title="Thanks for becoming a member." title="Thanks for becoming a member."
intro="Thank you for joining the West Sound Community Club." intro="Thank you for joining the West Sound Community Club."
> >
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400"> <p className="mt-6 text-base text-zinc-600">
Your financial support helps us perserve this historic building and to host events for the community. We&apos;ll add you to our member mailing list so you receive announcement emails about upcoming events. Your financial support helps us perserve this historic building and to host events for the community. We&apos;ll add you to our member mailing list so you receive announcement emails about upcoming events.
</p> </p>
</SimpleLayout> </SimpleLayout>

12
src/components/ArticleLayout.tsx
View File

@ -41,24 +41,24 @@ export function ArticleLayout({
type="button" type="button"
onClick={() => router.back()} onClick={() => router.back()}
aria-label="Go back to articles" aria-label="Go back to articles"
className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20 lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0" className="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 transition lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0"
> >
<ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400" /> <ArrowLeftIcon className="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700" />
</button> </button>
)} )}
<article> <article>
<header className="flex flex-col"> <header className="flex flex-col">
<h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> <h1 className="mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
{article.title} {article.title}
</h1> </h1>
<time <time
dateTime={article.date} dateTime={article.date}
className="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500" className="order-first flex items-center text-base text-zinc-400"
> >
<span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" /> <span className="h-4 w-0.5 rounded-full bg-zinc-200" />
<span className="ml-3">{formatDate(article.date)}</span> <span className="ml-3">{formatDate(article.date)}</span>
</time> </time>
<span id="byline" className='mt-4 text-base text-zinc-400 dark:text-zinc-500'>by {article.author}</span> <span id="byline" className="mt-4 text-base text-zinc-400">by {article.author}</span>
</header> </header>
<Prose className="mt-8" data-mdx-content> <Prose className="mt-8" data-mdx-content>
{children} {children}

10
src/components/Button.tsx
View File

@ -3,17 +3,17 @@ import clsx from 'clsx'
const variantStyles = { const variantStyles = {
primary: primary:
'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70 dark:bg-zinc-700 dark:hover:bg-zinc-600 dark:active:bg-zinc-700 dark:active:text-zinc-100/70', 'bg-zinc-800 font-semibold text-zinc-100 hover:bg-zinc-700 active:bg-zinc-800 active:text-zinc-100/70',
secondary: secondary:
'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70', 'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60',
} }
type ButtonProps = { type ButtonProps = {
variant?: keyof typeof variantStyles variant?: keyof typeof variantStyles
} & ( } & (
| (React.ComponentPropsWithoutRef<'button'> & { href?: undefined }) | (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
| React.ComponentPropsWithoutRef<typeof Link> | React.ComponentPropsWithoutRef<typeof Link>
) )
export function Button({ export function Button({
variant = 'primary', variant = 'primary',

10
src/components/Card.tsx
View File

@ -39,7 +39,7 @@ Card.Link = function CardLink({
}: React.ComponentPropsWithoutRef<typeof Link>) { }: React.ComponentPropsWithoutRef<typeof Link>) {
return ( return (
<> <>
<div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-zinc-800/50 sm:-inset-x-6 sm:rounded-2xl" /> <div className="absolute -inset-x-4 -inset-y-6 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 sm:-inset-x-6 sm:rounded-2xl" />
<Link {...props}> <Link {...props}>
<span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" /> <span className="absolute -inset-x-4 -inset-y-6 z-20 sm:-inset-x-6 sm:rounded-2xl" />
<span className="relative z-10">{children}</span> <span className="relative z-10">{children}</span>
@ -59,7 +59,7 @@ Card.Title = function CardTitle<T extends React.ElementType = 'h2'>({
let Component = as ?? 'h2' let Component = as ?? 'h2'
return ( return (
<Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"> <Component className="text-base font-semibold tracking-tight text-zinc-800">
{href ? <Card.Link href={href}>{children}</Card.Link> : children} {href ? <Card.Link href={href}>{children}</Card.Link> : children}
</Component> </Component>
) )
@ -71,7 +71,7 @@ Card.Description = function CardDescription({
children: React.ReactNode children: React.ReactNode
}) { }) {
return ( return (
<p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400"> <p className="relative z-10 mt-2 text-sm text-zinc-600">
{children} {children}
</p> </p>
) )
@ -105,7 +105,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
<Component <Component
className={clsx( className={clsx(
className, className,
'relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500', "relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400",
decorate && 'pl-3.5', decorate && 'pl-3.5',
)} )}
{...props} {...props}
@ -115,7 +115,7 @@ Card.Eyebrow = function CardEyebrow<T extends React.ElementType = 'p'>({
className="absolute inset-y-0 left-0 flex items-center" className="absolute inset-y-0 left-0 flex items-center"
aria-hidden="true" aria-hidden="true"
> >
<span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" /> <span className="h-4 w-0.5 rounded-full bg-zinc-200" />
</span> </span>
)} )}
{children} {children}

10
src/components/Footer.tsx
View File

@ -12,7 +12,7 @@ function NavLink({
return ( return (
<Link <Link
href={href} href={href}
className="transition hover:text-teal-500 dark:hover:text-teal-400" className="transition hover:text-teal-500"
> >
{children} {children}
</Link> </Link>
@ -23,10 +23,10 @@ export function Footer() {
return ( return (
<footer className="mt-32 flex-none"> <footer className="mt-32 flex-none">
<ContainerOuter> <ContainerOuter>
<div className="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40"> <div className="border-t border-zinc-100 pb-16 pt-10">
<ContainerInner> <ContainerInner>
<div className="flex flex-col items-center justify-between gap-6 sm:flex-row"> <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
<div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800 dark:text-zinc-200"> <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm font-medium text-zinc-800">
<NavLink href="/hall-history">History</NavLink> <NavLink href="/hall-history">History</NavLink>
<NavLink href="/news">News</NavLink> <NavLink href="/news">News</NavLink>
<NavLink href="/calendar">Calendar</NavLink> <NavLink href="/calendar">Calendar</NavLink>
@ -34,10 +34,10 @@ export function Footer() {
<NavLink href="/club">Club</NavLink> <NavLink href="/club">Club</NavLink>
</div> </div>
<div> <div>
<p className="text-sm text-zinc-400 dark:text-zinc-500"> <p className="text-sm text-zinc-400">
&copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved. &copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved.
</p> </p>
<p className="text-sm text-zinc-400 dark:text-zinc-500"> <p className="text-sm text-zinc-400">
WSCC is a 501c3 nonprofit organization - 91-1283768 WSCC is a 501c3 nonprofit organization - 91-1283768
</p> </p>
</div> </div>

93
src/components/Header.tsx
View File

@ -1,47 +1,14 @@
'use client' 'use client'
import { Fragment, useEffect, useRef, useState } from 'react' import { Fragment, useEffect, useRef } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { usePathname } from 'next/navigation' import { usePathname } from 'next/navigation'
import { useTheme } from 'next-themes'
import { Popover, Transition } from '@headlessui/react' import { Popover, Transition } from '@headlessui/react'
import clsx from 'clsx' import clsx from 'clsx'
import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid' import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
import { Container } from '@/components/Container' import { Container } from '@/components/Container'
function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg
viewBox="0 0 24 24"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
{...props}
>
<path d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z" />
<path
d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
fill="none"
/>
</svg>
)
}
function MoonIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function MobileNavItem({ function MobileNavItem({
href, href,
children, children,
@ -63,9 +30,9 @@ function MobileNavigation(
) { ) {
return ( return (
<Popover {...props}> <Popover {...props}>
<Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"> <Popover.Button className="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur">
Menu Menu
<ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400" /> <ChevronDownIcon className="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700" />
</Popover.Button> </Popover.Button>
<Transition.Root> <Transition.Root>
<Transition.Child <Transition.Child
@ -77,7 +44,7 @@ function MobileNavigation(
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm dark:bg-black/80" /> <Popover.Overlay className="fixed inset-0 z-50 bg-zinc-800/40 backdrop-blur-sm" />
</Transition.Child> </Transition.Child>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
@ -90,18 +57,18 @@ function MobileNavigation(
> >
<Popover.Panel <Popover.Panel
focus focus
className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5 dark:bg-zinc-900 dark:ring-zinc-800" className="fixed inset-x-4 top-8 z-50 origin-top rounded-3xl bg-white p-8 ring-1 ring-zinc-900/5"
> >
<div className="flex flex-row-reverse items-center justify-between"> <div className="flex flex-row-reverse items-center justify-between">
<Popover.Button aria-label="Close menu" className="-m-1 p-1"> <Popover.Button aria-label="Close menu" className="-m-1 p-1">
<XMarkIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" /> <XMarkIcon className="h-6 w-6 text-zinc-500" />
</Popover.Button> </Popover.Button>
<h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400"> <h2 className="text-sm font-medium text-zinc-600">
Navigation Navigation
</h2> </h2>
</div> </div>
<nav className="mt-6"> <nav className="mt-6">
<ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800 dark:divide-zinc-100/5 dark:text-zinc-300"> <ul className="-my-2 divide-y divide-zinc-100 text-base text-zinc-800">
<MobileNavItem href="/">Home</MobileNavItem> <MobileNavItem href="/">Home</MobileNavItem>
<MobileNavItem href="/hall-history">Hall History</MobileNavItem> <MobileNavItem href="/hall-history">Hall History</MobileNavItem>
<MobileNavItem href="/news">News</MobileNavItem> <MobileNavItem href="/news">News</MobileNavItem>
@ -133,13 +100,13 @@ function NavItem({
className={clsx( className={clsx(
'relative block px-3 py-2 transition', 'relative block px-3 py-2 transition',
isActive isActive
? 'text-teal-500 dark:text-teal-400' ? "text-teal-500"
: 'hover:text-teal-500 dark:hover:text-teal-400', : "hover:text-teal-500",
)} )}
> >
{children} {children}
{isActive && ( {isActive && (
<span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0 dark:from-teal-400/0 dark:via-teal-400/40 dark:to-teal-400/0" /> <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-teal-500/0 via-teal-500/40 to-teal-500/0" />
)} )}
</Link> </Link>
</li> </li>
@ -149,7 +116,7 @@ function NavItem({
function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) { function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
return ( return (
<nav {...props}> <nav {...props}>
<ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10"> <ul className="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur">
<NavItem href="/">Home</NavItem> <NavItem href="/">Home</NavItem>
<NavItem href="/hall-history">History</NavItem> <NavItem href="/hall-history">History</NavItem>
<NavItem href="/news">News</NavItem> <NavItem href="/news">News</NavItem>
@ -161,28 +128,6 @@ function DesktopNavigation(props: React.ComponentPropsWithoutRef<'nav'>) {
) )
} }
function ThemeToggle() {
let { resolvedTheme, setTheme } = useTheme()
let otherTheme = resolvedTheme === 'dark' ? 'light' : 'dark'
let [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
return (
<button
type="button"
aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
onClick={() => setTheme(otherTheme)}
>
<SunIcon className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:stroke-teal-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600" />
<MoonIcon className="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media_not_(prefers-color-scheme:dark)]:stroke-teal-500" />
</button>
)
}
function clamp(number: number, a: number, b: number) { function clamp(number: number, a: number, b: number) {
let min = Math.min(a, b) let min = Math.min(a, b)
let max = Math.max(a, b) let max = Math.max(a, b)
@ -285,17 +230,9 @@ export function Header() {
'var(--header-inner-position)' as React.CSSProperties['position'], 'var(--header-inner-position)' as React.CSSProperties['position'],
}} }}
> >
<div className="relative flex gap-4"> <div className="flex flex-1 justify-end md:justify-center">
<div className="flex flex-1"></div> <MobileNavigation className="pointer-events-auto md:hidden" />
<div className="flex flex-1 justify-end md:justify-center"> <DesktopNavigation className="pointer-events-auto hidden md:block" />
<MobileNavigation className="pointer-events-auto md:hidden" />
<DesktopNavigation className="pointer-events-auto hidden md:block" />
</div>
<div className="flex justify-end md:flex-1">
<div className="pointer-events-auto">
<ThemeToggle />
</div>
</div>
</div> </div>
</Container> </Container>
</div> </div>

2
src/components/Layout.tsx
View File

@ -6,7 +6,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<> <>
<div className="fixed inset-0 flex justify-center sm:px-8"> <div className="fixed inset-0 flex justify-center sm:px-8">
<div className="flex w-full max-w-7xl lg:px-8"> <div className="flex w-full max-w-7xl lg:px-8">
<div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" /> <div className="w-full bg-white ring-1 ring-zinc-100" />
</div> </div>
</div> </div>
<div className="relative flex w-full flex-col"> <div className="relative flex w-full flex-col">

2
src/components/Prose.tsx
View File

@ -5,6 +5,6 @@ export function Prose({
...props ...props
}: React.ComponentPropsWithoutRef<'div'>) { }: React.ComponentPropsWithoutRef<'div'>) {
return ( return (
<div className={clsx(className, 'prose dark:prose-invert')} {...props} /> <div className={clsx(className, 'prose')} {...props} />
) )
} }

4
src/components/Section.tsx
View File

@ -12,12 +12,12 @@ export function Section({
return ( return (
<section <section
aria-labelledby={id} aria-labelledby={id}
className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40" className="md:border-l md:border-zinc-100 md:pl-6"
> >
<div className="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4"> <div className="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
<h2 <h2
id={id} id={id}
className="text-sm font-semibold text-zinc-800 dark:text-zinc-100" className="text-sm font-semibold text-zinc-800"
> >
{title} {title}
</h2> </h2>

4
src/components/SimpleLayout.tsx
View File

@ -12,10 +12,10 @@ export function SimpleLayout({
return ( return (
<Container className="mt-16 sm:mt-32"> <Container className="mt-16 sm:mt-32">
<header className="max-w-2xl"> <header className="max-w-2xl">
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"> <h1 className="text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl">
{title} {title}
</h1> </h1>
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400"> <p className="mt-6 text-base text-zinc-600">
{intro} {intro}
</p> </p>
</header> </header>

6
src/components/Table.tsx
View File

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

7
src/styles/tailwind.css
View File

@ -8,9 +8,4 @@
--stripe-background: #FFFFFF; --stripe-background: #FFFFFF;
--stripe-foreground: #000000; --stripe-foreground: #000000;
} }
.dark {
--stripe-background: #3f3f46;
--stripe-foreground: #E4E4E7;
}