crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Footer theme switcher (#894)

Browse Source 
* Footer theme switcher

* Remove lazy loading & change rotation animation

* Changes

* Update ThemeSwitcher.tsx

* Requested style changes

* Update ThemeSwitcher.tsx

* Fix alignment

* Update ThemeSwitcher.tsx
This commit is contained in:
Catalin Pinte
2022-11-30 17:07:44 +02:00
committed by GitHub
parent 6bc223adb3
commit 6d783eae35
9 changed files with 146 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
site/components/common/Footer/Footer.tsx
View File

@@ -7,6 +7,7 @@ import getSlug from '@lib/get-slug'
import { Github, Vercel } from '@components/icons'
import { Logo, Container } from '@components/ui'
import { I18nWidget } from '@components/common'
import ThemeSwitcher from '@components/ui/ThemeSwitcher'
import s from './Footer.module.css'
interface Props {
@@ -40,7 +41,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
</a>
</Link>
</div>
<div className="col-span-1 lg:col-span-8">
<div className="col-span-1 lg:col-span-7">
<div className="grid md:grid-rows-4 md:grid-cols-3 md:grid-flow-col">
{[...links, ...sitePages].map((page) => (
<span key={page.url} className="py-3 md:py-0 md:pb-4">
@@ -53,8 +54,10 @@ const Footer: FC<Props> = ({ className, pages }) => {
))}
</div>
</div>
<div className="col-span-1 lg:col-span-2 flex items-start lg:justify-end text-primary">
<div className="flex space-x-6 items-center h-10">
<div className="col-span-1 lg:col-span-3 flex items-start lg:justify-end text-primary">
<div className="flex space-x-4 items-center h-10">
<ThemeSwitcher />
<I18nWidget />
<a
className={s.link}
aria-label="Github Repository"
@@ -62,7 +65,6 @@ const Footer: FC<Props> = ({ className, pages }) => {
>
<Github />
</a>
<I18nWidget />
</div>
</div>
</div>

4
site/components/common/I18nWidget/I18nWidget.module.css
View File

@@ -3,7 +3,7 @@
}
.button {
@apply h-10 px-2 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear;
@apply h-10 pl-2 pr-1 rounded-md border border-accent-2 flex items-center justify-center transition-colors ease-linear;
}
.button:hover {
@@ -32,7 +32,7 @@
}
.icon.active {
transform: rotate(180deg);
transform: rotate(90deg);
}
@screen lg {

8
site/components/common/I18nWidget/I18nWidget.tsx
View File

@@ -3,7 +3,7 @@ import Link from 'next/link'
import { FC, useState } from 'react'
import { useRouter } from 'next/router'
import s from './I18nWidget.module.css'
import { Cross, ChevronUp } from '@components/icons'
import { Cross, ChevronRight } from '@components/icons'
import ClickOutside from '@lib/click-outside'
import Image from 'next/image'
interface LOCALE_DATA {
@@ -54,14 +54,14 @@ const I18nWidget: FC = () => {
<Image
width="20"
height="20"
className="block mr-2 w-5"
className="block w-5"
src={`/${LOCALES_MAP[currentLocale].img.filename}`}
alt={LOCALES_MAP[currentLocale].img.alt}
unoptimized
/>
{options && (
<span className="cursor-pointer">
<ChevronUp className={cn(s.icon, { [s.active]: display })} />
<span className="cursor-pointer ml-1">
<ChevronRight className={cn(s.icon, { [s.active]: display })} />
</span>
)}
</button>