cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

a11y pass

Browse Source
This commit is contained in:
Belen Curcio 2020-10-25 12:23:07 -03:00
parent 3cdd921a10
commit 6565303cb5
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/core/Navbar/Navbar.tsx
View File

@ -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>
) )

7
components/core/Searchbar/Searchbar.tsx
View File

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

12
components/ui/Hero/Hero.tsx
View File

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