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

Fix rental table styling in dark mode

Browse Source
This commit is contained in:
Tony Grosinger 2024-01-31 20:29:27 -08:00
parent c957b156d8
commit d9225e36d7
2 changed files with 67 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/app/rental/page.tsx
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">
<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,23 +170,23 @@ 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:
<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>
<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>
Any individual or organizational nonpublic use of the hall which
requires payment of a fee by those attending or offers items for

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>
}