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

52
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 ">
<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

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