Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement LanguageSwitcherButton component #120

Draft
wants to merge 4 commits into
base: develop
Choose a base branch
from
Draft

Implement LanguageSwitcherButton component #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a680840
Import headlessui and heroicons
Ovifer13 Aug 15, 2022
9312ee5
Import US and ES Icons
Ovifer13 Aug 15, 2022
02c82ea
Create LanguageButton component
Ovifer13 Aug 15, 2022
0d49718
Import ne component to Nav
Ovifer13 Aug 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions components/LanguageButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
import React, { Fragment, useState } from 'react';
import { Menu, Transition } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/solid'

import {
US_ICON,
ES_ICON,
} from '../constants';

const LanguageButton = ({}) => {

const [active, setActive] = useState(null)

return (
<Menu as='div' className='relative inline-block'>
<div>
<Menu.Button className='inline-flex justify-center w-full rounded px-4 py-2 bg-primary'>
<img
src={US_ICON}
alt='Icon'
/>
<ChevronDownIcon className='-mr-1 ml-2 h-5 w-5 text-solid-white' />
</Menu.Button>
</div>

<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-left absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="py-1">
<Menu.Button className='block px-4 py-2 text-sm'>
<img
src={US_ICON}
alt='US_icon'
className='inline'
/>
English
</Menu.Button>
<Menu.Button className='block px-4 py-2 text-sm'>
<img
src={ES_ICON}
alt='ES_icon'
className='inline'
/>
Spanish
</Menu.Button>
</div>
</Menu.Items>
</Transition>
</Menu>
)
}

export default LanguageButton
12 changes: 7 additions & 5 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
} from '../constants/strings'

import HamburgerButton from './HamburgerButton'
import LanguageButton from './LanguageButton'

const renderNavItems = () => {
return (
Expand All @@ -31,8 +32,8 @@ function MobileNav({open, setOpen}: any) {
absolute top-0 bg-solid-white left-0 h-screen w-screen transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md
`}
>
<div className="flex items-center justify-center filter drop-shadow-md bg-solid-black h-20">
<a href="/">
<div className='flex items-center justify-center filter drop-shadow-md bg-solid-black h-20'>
<a href='/'>
<img
src={LOGO_URL}
alt='Logo'
Expand All @@ -51,7 +52,7 @@ export default function Navbar() {
const [open, setOpen] = useState(false)

return (
<nav className='flex filter bg-solid-black px-4 py-4 h-20 items-center md:bg-solid-white'>
<nav className='flex filter bg-solid-black px-4 py-4 h-20 items-center md:bg-solid-white md:mx-20'>
<MobileNav open={open} setOpen={setOpen} />
<div className='w-3/12 flex md:hidden items-center'>
<a href='/'>
Expand All @@ -65,14 +66,15 @@ export default function Navbar() {
<a href='/' className='font-semibold text-2xl text-solid-white md:text-solid-black'>{SETLIFE}</a>
<a href='/' className='text-2xl font-thin text-primary'>{SOLUTIONS}</a>
</div>
<div className="w-3/12 flex justify-end items-center md:w-6/12">
<div className='w-3/12 flex justify-end items-center md:w-6/12'>
<HamburgerButton
open={open}
setOpen={setOpen}
/>
<div className="hidden md:flex">
<div className='hidden md:flex place-items-center'>
{ renderNavItems() }
</div>
<LanguageButton />
</div>
</nav>
)
Expand Down
2 changes: 2 additions & 0 deletions constants/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,7 @@ export const API_v1_URL: string = 'http://localhost:3000/api/v1'
// Images
export const HERO_IMAGE_URL = 'https://user-images.githubusercontent.com/49292858/183115188-87aa75f2-7123-472a-b20d-16766828f96c.png'
export const LOGO_URL: string = 'https://setlife-solutions.s3.amazonaws.com/images/Logo.png'
export const US_ICON: string = 'https://setlife-solutions.s3.amazonaws.com/images/US_icon.png'
export const ES_ICON: string = 'https://setlife-solutions.s3.amazonaws.com/images/ES_icon.png'

export const NAV_ITEMS: Array<string> = [ABOUT, PORTFOLIO, CONSULTATION, SERVICES, SERVICE_PACKAGES]
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"@apollo/client": "^3.6.9",
"@graphql-tools/merge": "^8.3.0",
"@graphql-tools/schema": "^8.5.0",
"@headlessui/react": "^1.6.6",
"@heroicons/react": "^1.0.6",
"apollo-server": "^3.9.0",
"apollo-server-micro": "^3.9.0",
"dotenv": "^16.0.1",
Expand Down