crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 15:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove lazy loading & change rotation animation

Browse Source
This commit is contained in:
cond0r 2022-11-29 22:18:04 +02:00
parent 00184e674f
commit c76a406aa0
4 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,15 @@
import { FC } from 'react'
import cn from 'clsx'
import Link from 'next/link'
import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'
import type { Page } from '@commerce/types/page'
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'
const ThemeSwitcher = dynamic(() => import('@components/ui/ThemeSwitcher'), {
ssr: false,
loading: () => (
<div className="w-24 h-10 rounded-md bg-accent-2 animate-pulse" />
),
})
interface Props {
className?: string
children?: any

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

@ -32,7 +32,7 @@
}
.icon.active {
transform: rotate(180deg);
transform: rotate(90deg);
}
@screen lg {

4
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 {
@ -61,7 +61,7 @@ const I18nWidget: FC = () => {
/>
{options && (
<span className="cursor-pointer">
<ChevronUp className={cn(s.icon, { [s.active]: display })} />
<ChevronRight className={cn(s.icon, { [s.active]: display })} />
</span>
)}
</button>

17
site/components/ui/ThemeSwitcher/ThemeSwitcher.tsx
View File

@ -1,18 +1,23 @@
import { useState } from 'react'
import { useEffect, useState } from 'react'
import { useTheme } from 'next-themes'
import { ChevronUp, Cross } from '@components/icons'
import { ChevronRight, Cross } from '@components/icons'
import cn from 'clsx'
import ClickOutside from '@lib/click-outside'
import ThemeIcon from './ThemeIcon'
const ThemeSwitcher = () => {
const [mounted, setMounted] = useState(false)
const [display, setDisplay] = useState(false)
const { theme, themes, setTheme } = useTheme()
useEffect(() => setMounted(true), [])
if (!mounted) return null
return (
<ClickOutside active={display} onClick={() => setDisplay(false)}>
<nav className="relative">
<div className="relative">
<div
className="flex items-center relative"
onClick={() => setDisplay(!display)}
@ -26,9 +31,9 @@ const ThemeSwitcher = () => {
<ThemeIcon width={20} height={20} theme={theme} />
<span className="capitalize">{theme}</span>
<span className="cursor-pointer">
<ChevronUp
<ChevronRight
className={cn('transition duration-300', {
['rotate-180']: display,
['rotate-90']: display,
})}
/>
</span>
@ -69,7 +74,7 @@ const ThemeSwitcher = () => {
</div>
) : null}
</div>
</nav>
</div>
</ClickOutside>
)
}