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