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

Convert more pages to hero icons

Browse Source
This commit is contained in:
Tony Grosinger 2023-12-01 21:16:43 -08:00
parent 879a56d98e
commit 1766431695
4 changed files with 12 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,10 +4,7 @@ import Link from 'next/link'
import clsx from 'clsx'
import { Container } from '@/components/Container'
import {
InstagramIcon,
TwitterIcon,
} from '@/components/SocialIcons'
import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
import portraitImage from '@/images/portrait.jpg'
function SocialLink({
@ -34,17 +31,6 @@ function SocialLink({
)
}
function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
fillRule="evenodd"
d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
/>
</svg>
)
}
export const metadata: Metadata = {
title: 'History',
description:
@ -80,15 +66,15 @@ export default function Club() {
</div>
<div className="lg:pl-20">
<ul role="list">
<SocialLink href="#" icon={TwitterIcon}>
<SocialLink href="#" icon={UserPlusIcon}>
Membership Form
</SocialLink>
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
<SocialLink href="#" icon={GiftIcon} className="mt-4">
Donations
</SocialLink>
<SocialLink
href="mailto:contact@westsoundhall.org"
icon={MailIcon}
icon={EnvelopeIcon}
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
>
contact@westsoundhall.org

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

@ -5,13 +5,8 @@ import clsx from 'clsx'
import { Card } from '@/components/Card'
import { Container } from '@/components/Container'
import {
GitHubIcon,
InstagramIcon,
LinkedInIcon,
TwitterIcon,
} from '@/components/SocialIcons'
import portraitImage from '@/images/portrait.jpg'
import { EnvelopeIcon } from '@heroicons/react/24/solid'
function SocialLink({
className,
@ -37,17 +32,6 @@ function SocialLink({
)
}
function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
fillRule="evenodd"
d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
/>
</svg>
)
}
function TimelineEntry({
title,
description,
@ -274,22 +258,9 @@ export default function About() {
</div>
<div className="lg:pl-20">
<ul role="list">
<SocialLink href="#" icon={TwitterIcon}>
Follow on Twitter
</SocialLink>
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
Follow on Instagram
</SocialLink>
<SocialLink href="#" icon={GitHubIcon} className="mt-4">
Follow on GitHub
</SocialLink>
<SocialLink href="#" icon={LinkedInIcon} className="mt-4">
Follow on LinkedIn
</SocialLink>
<SocialLink
href="mailto:contact@westsoundhall.org"
icon={MailIcon}
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
icon={EnvelopeIcon}
>
contact@westsoundhall.org
</SocialLink>

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

@ -4,13 +4,8 @@ import Link from 'next/link'
import clsx from 'clsx'
import { Container } from '@/components/Container'
import {
GitHubIcon,
InstagramIcon,
LinkedInIcon,
TwitterIcon,
} from '@/components/SocialIcons'
import portraitImage from '@/images/portrait.jpg'
import { EnvelopeIcon, HomeIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
function SocialLink({
className,
@ -36,17 +31,6 @@ function SocialLink({
)
}
function MailIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
fillRule="evenodd"
d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
/>
</svg>
)
}
export const metadata: Metadata = {
title: 'History',
description:
@ -98,15 +82,15 @@ export default function Rental() {
</div>
<div className="lg:pl-20">
<ul role="list">
<SocialLink href="#" icon={TwitterIcon}>
<SocialLink href="#" icon={HomeIcon}>
Rental Application Form
</SocialLink>
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
<SocialLink href="#" icon={QuestionMarkCircleIcon} className="mt-4">
Rental Q&A
</SocialLink>
<SocialLink
href="mailto:contact@westsoundhall.org"
icon={MailIcon}
icon={EnvelopeIcon}
className="mt-8 border-t border-zinc-100 pt-8 dark:border-zinc-700/40"
>
contact@westsoundhall.org

32
src/components/Header.tsx
View File

@ -7,39 +7,11 @@ import { usePathname } from 'next/navigation'
import { useTheme } from 'next-themes'
import { Popover, Transition } from '@headlessui/react'
import clsx from 'clsx'
import { XMarkIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
import { Container } from '@/components/Container'
import avatarImage from '@/images/avatar.jpg'
function CloseIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
<path
d="m17.25 6.75-10.5 10.5M6.75 6.75l10.5 10.5"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function ChevronDownIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg viewBox="0 0 8 6" aria-hidden="true" {...props}>
<path
d="M1.75 1.75 4 4.25l2.25-2.5"
fill="none"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
)
}
function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return (
<svg
@ -124,7 +96,7 @@ function MobileNavigation(
>
<div className="flex flex-row-reverse items-center justify-between">
<Popover.Button aria-label="Close menu" className="-m-1 p-1">
<CloseIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
<XMarkIcon className="h-6 w-6 text-zinc-500 dark:text-zinc-400" />
</Popover.Button>
<h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
Navigation