Convert more pages to hero icons
This commit is contained in:
parent
879a56d98e
commit
1766431695
@ -4,10 +4,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 {
|
import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
|
||||||
InstagramIcon,
|
|
||||||
TwitterIcon,
|
|
||||||
} from '@/components/SocialIcons'
|
|
||||||
import portraitImage from '@/images/portrait.jpg'
|
import portraitImage from '@/images/portrait.jpg'
|
||||||
|
|
||||||
function SocialLink({
|
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 = {
|
export const metadata: Metadata = {
|
||||||
title: 'History',
|
title: 'History',
|
||||||
description:
|
description:
|
||||||
@ -80,15 +66,15 @@ export default function Club() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="lg:pl-20">
|
<div className="lg:pl-20">
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
<SocialLink href="#" icon={TwitterIcon}>
|
<SocialLink href="#" icon={UserPlusIcon}>
|
||||||
Membership Form
|
Membership Form
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
|
<SocialLink href="#" icon={GiftIcon} className="mt-4">
|
||||||
Donations
|
Donations
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="mailto:contact@westsoundhall.org"
|
href="mailto:contact@westsoundhall.org"
|
||||||
icon={MailIcon}
|
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 dark:border-zinc-700/40"
|
||||||
>
|
>
|
||||||
contact@westsoundhall.org
|
contact@westsoundhall.org
|
||||||
|
@ -5,13 +5,8 @@ import clsx from 'clsx'
|
|||||||
import { Card } from '@/components/Card'
|
import { Card } from '@/components/Card'
|
||||||
|
|
||||||
import { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import {
|
|
||||||
GitHubIcon,
|
|
||||||
InstagramIcon,
|
|
||||||
LinkedInIcon,
|
|
||||||
TwitterIcon,
|
|
||||||
} from '@/components/SocialIcons'
|
|
||||||
import portraitImage from '@/images/portrait.jpg'
|
import portraitImage from '@/images/portrait.jpg'
|
||||||
|
import { EnvelopeIcon } from '@heroicons/react/24/solid'
|
||||||
|
|
||||||
function SocialLink({
|
function SocialLink({
|
||||||
className,
|
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({
|
function TimelineEntry({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
@ -274,22 +258,9 @@ export default function About() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="lg:pl-20">
|
<div className="lg:pl-20">
|
||||||
<ul role="list">
|
<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
|
<SocialLink
|
||||||
href="mailto:contact@westsoundhall.org"
|
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
|
contact@westsoundhall.org
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
|
@ -4,13 +4,8 @@ import Link from 'next/link'
|
|||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
|
||||||
import { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import {
|
|
||||||
GitHubIcon,
|
|
||||||
InstagramIcon,
|
|
||||||
LinkedInIcon,
|
|
||||||
TwitterIcon,
|
|
||||||
} from '@/components/SocialIcons'
|
|
||||||
import portraitImage from '@/images/portrait.jpg'
|
import portraitImage from '@/images/portrait.jpg'
|
||||||
|
import { EnvelopeIcon, HomeIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
|
||||||
|
|
||||||
function SocialLink({
|
function SocialLink({
|
||||||
className,
|
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 = {
|
export const metadata: Metadata = {
|
||||||
title: 'History',
|
title: 'History',
|
||||||
description:
|
description:
|
||||||
@ -98,15 +82,15 @@ export default function Rental() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="lg:pl-20">
|
<div className="lg:pl-20">
|
||||||
<ul role="list">
|
<ul role="list">
|
||||||
<SocialLink href="#" icon={TwitterIcon}>
|
<SocialLink href="#" icon={HomeIcon}>
|
||||||
Rental Application Form
|
Rental Application Form
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink href="#" icon={InstagramIcon} className="mt-4">
|
<SocialLink href="#" icon={QuestionMarkCircleIcon} className="mt-4">
|
||||||
Rental Q&A
|
Rental Q&A
|
||||||
</SocialLink>
|
</SocialLink>
|
||||||
<SocialLink
|
<SocialLink
|
||||||
href="mailto:contact@westsoundhall.org"
|
href="mailto:contact@westsoundhall.org"
|
||||||
icon={MailIcon}
|
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 dark:border-zinc-700/40"
|
||||||
>
|
>
|
||||||
contact@westsoundhall.org
|
contact@westsoundhall.org
|
||||||
|
@ -7,39 +7,11 @@ import { usePathname } from 'next/navigation'
|
|||||||
import { useTheme } from 'next-themes'
|
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 { Container } from '@/components/Container'
|
import { Container } from '@/components/Container'
|
||||||
import avatarImage from '@/images/avatar.jpg'
|
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'>) {
|
function SunIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
@ -124,7 +96,7 @@ function MobileNavigation(
|
|||||||
>
|
>
|
||||||
<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">
|
||||||
<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>
|
</Popover.Button>
|
||||||
<h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
|
<h2 className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
|
||||||
Navigation
|
Navigation
|
||||||
|
Loading…
Reference in New Issue
Block a user