forked from crowetic/commerce
a11y pass
This commit is contained in:
parent
3cdd921a10
commit
6565303cb5
@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex pb-4 lg:px-6 lg:hidden">
|
<div className="flex pb-4 lg:px-6 lg:hidden">
|
||||||
<Searchbar />
|
<Searchbar id="mobileSearch" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -5,9 +5,10 @@ import { useRouter } from 'next/router'
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
|
id?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Searchbar: FC<Props> = ({ className }) => {
|
const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -16,14 +17,14 @@ const Searchbar: FC<Props> = ({ className }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
htmlFor="search"
|
htmlFor={id}
|
||||||
className={cn(
|
className={cn(
|
||||||
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
|
'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
id="search"
|
id={id}
|
||||||
className={s.input}
|
className={s.input}
|
||||||
placeholder="Search for products..."
|
placeholder="Search for products..."
|
||||||
defaultValue={router.query.q}
|
defaultValue={router.query.q}
|
||||||
|
@ -2,7 +2,7 @@ import React, { FC } from 'react'
|
|||||||
import { Container } from '@components/ui'
|
import { Container } from '@components/ui'
|
||||||
import { RightArrow } from '@components/icon'
|
import { RightArrow } from '@components/icon'
|
||||||
import s from './Hero.module.css'
|
import s from './Hero.module.css'
|
||||||
|
import Link from 'next/link'
|
||||||
interface Props {
|
interface Props {
|
||||||
className?: string
|
className?: string
|
||||||
headline: string
|
headline: string
|
||||||
@ -21,10 +21,12 @@ const Hero: FC<Props> = ({ headline, description }) => {
|
|||||||
<p className="mt-5 text-xl leading-7 text-accent-2 text-white">
|
<p className="mt-5 text-xl leading-7 text-accent-2 text-white">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
<a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
|
<Link href="/blog">
|
||||||
<span>Read it here</span>
|
<a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
|
||||||
<RightArrow width="20" heigh="20" className="ml-1" />
|
Read it here
|
||||||
</a>
|
<RightArrow width="20" heigh="20" className="ml-1" />
|
||||||
|
</a>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user