fix: layout changes

app/[locale]/apps/components/Container.tsx

@@ -1,15 +1,22 @@
 'use client'
 
 import { Locales } from '@/locales/locales'
-import { Heading } from '@/app/components/typography/Heading'
 import { useI18n } from '@/locales/client'
+import { HeadingNavigation } from '@/app/components/typography'
+import { Typography } from '@/app/components'
 
 export const AppsContainer = () => {
   const t = useI18n()
 
   return (
-    <div className='p-6'>
-      <Heading as='h2'>{t(Locales.APPS)}</Heading>
+    <div className='w-full p-6'>
+      <div className='flex flex-col space-y-4'>
+        <HeadingNavigation as='h2'>{t(Locales.APPS)}</HeadingNavigation>
+        <Typography.Text className='max-w-lg' variant='span'>
+          Enjoy thousand of the latest ethereum apps, games, music, movies, TV,
+          books, magazines & more. Anytime, anywhere, across your devices.
+        </Typography.Text>
+      </div>
     </div>
   )
 }

app/[locale]/apps/layout.tsx

@@ -23,7 +23,7 @@ export default function Layout({ children }: LayoutProps) {
   ]
 
   return (
-    <AsideNavigation navLinks={navLinks} className='h-full'>
+    <AsideNavigation navLinks={navLinks} className='h-full w-full'>
       {children}
     </AsideNavigation>
   )

app/[locale]/components/MaintenanceMode.tsx

@@ -7,7 +7,7 @@ export const MaintenanceMode = () => {
         <Logo />
       </div>
       <div>
-        <Social className='text-black/30' />
+        <Social className='text-black/40' />
       </div>
     </main>
   )

app/[locale]/layout.tsx

@@ -26,16 +26,16 @@ export default function BaseLayout({ children, params }: BaseLayoutProps) {
             className={classNames(
               'flex min-h-screen flex-col',
               'h-screen overflow-x-hidden text-sm font-medium',
-              'bg-stone-100  text-stone-600/70',
-              'dark:bg-third-100 dark:text-gray-400'
+              'bg-stone-100  text-stone-900/70',
+              'dark:bg-third-100 dark:text-cyan-50'
             )}
           >
             {process.env.NEXT_PUBLIC_MAINTENANCE_MODE === 'true' ? (
               <MaintenanceMode />
             ) : (
               <StyledJsxRegistry>
                 <Header />
-                <main className='flex-1'>{children}</main>
+                <main className='flex-1 lg:container'>{children}</main>
                 <Footer className='py-4' />
               </StyledJsxRegistry>
             )}

app/components/Separator.tsx

@@ -7,7 +7,7 @@ export const Separator = (props: HTMLProps<HTMLDivElement>) => (
     {...props}
     className={classNames(
       props.className,
-      ' select-none text-stone-400/30 dark:text-secondary/30'
+      ' select-none text-stone-400/30 dark:text-cyan-50/20'
     )}
   >
     |

app/components/header/Header.tsx

@@ -20,7 +20,7 @@ export const Header = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
     <header {...props} className={classNames(className, 'container')}>
       <div
         className={classNames(
-          'flex items-center justify-between rounded-xl py-4'
+          'flex items-center justify-between rounded-xl py-2'
         )}
       >
         <Logo />

app/components/language/List.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames'
 import { useChangeLocale, useCurrentLocale } from '@/locales/client'
 import { localeConfig, Locale } from '@/locales/config'
 import { CheckBadgeIcon } from '@heroicons/react/24/solid'
+import { Typography } from '..'
 
 export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
   const currentLocale = useCurrentLocale()
@@ -24,7 +25,7 @@ export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
               'flex cursor-pointer items-center justify-between space-x-2 p-2'
             )}
           >
-            <span>{locale}</span>
+            <Typography.Text as='span'>{locale}</Typography.Text>
             {locale === currentLocale && (
               <CheckBadgeIcon width={18} className='text-green-400' />
             )}

app/components/language/Provider.tsx

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react'
 import { I18nProviderClient } from '@/locales/client'
 import localeConfig from '@/locales/config'
+import { Loading } from '@/app/components/Loading'
 
 export type LanguageProviderProps = {
   children: ReactNode
@@ -12,23 +13,13 @@ export const LanguageProvider = ({
   locale
 }: LanguageProviderProps) => {
   return (
-    <I18nProviderClient locale={locale || localeConfig.defaultLocale}>
+    <I18nProviderClient
+      locale={locale || localeConfig.defaultLocale}
+      fallback={<Loading />}
+    >
       {children}
     </I18nProviderClient>
   )
 }
 
 export default LanguageProvider
-
-// import { ReactElement } from 'react'
-// import { I18nProviderClient } from '@/locales/client'
-
-// export default function SubLayout({
-//   params: { locale },
-//   children
-// }: {
-//   params: { locale: string }
-//   children: ReactElement
-// }) {
-//   return <I18nProviderClient locale={locale}>{children}</I18nProviderClient>
-// }

app/components/language/Selector.tsx

@@ -4,6 +4,7 @@ import { type HTMLProps } from 'react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import classNames from 'classnames'
 import { useCurrentLocale } from '@/locales/client'
+import { Typography } from '..'
 
 export type LanguageSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -23,7 +24,7 @@ export const LanguageSelector = ({
         'flex cursor-pointer justify-between'
       )}
     >
-      <span className='text-sm '>{currentLocale}</span>
+      <Typography.Text as='span'>{currentLocale}</Typography.Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {

app/components/logo/Logo.tsx

@@ -25,7 +25,7 @@ export const Logo = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
         translate='no'
       >
         <h1 className='flex items-center space-x-px'>
-          <span className='text-stone-500 dark:text-cyan-50'>0xdev</span>
+          <span>0xdev</span>
           <span className='z-1 relative'>
             <span
               className={classNames([

app/components/navigation/aside/AsideNavigation.tsx

@@ -20,16 +20,19 @@ export const AsideNavigation = ({
 }: AsideNavigationProps) => {
   return (
     <Card
-      as='section'
       {...props}
-      className={classNames(className, 'flex')}
+      className={classNames(className, 'flex lg:rounded-md')}
       bgOpacity={0.4}
     >
-      <aside className='flex-none overflow-hidden'>
+      <aside className='-mr-1 flex-none'>
         <ul className='flex flex-col'>
           {Children.toArray(
-            navLinks.map(({ href, icon, label }) => (
-              <li className='text-center'>
+            navLinks.map(({ href, icon, label }, index) => (
+              <li
+                className={classNames('text-center', {
+                  'overflow-hidden lg:rounded-tl-md': index === 0
+                })}
+              >
                 <AsideNavigationItem href={href} icon={icon} label={label} />
               </li>
             ))
@@ -38,8 +41,8 @@ export const AsideNavigation = ({
       </aside>
       <div
         className={classNames(
-          'flex-1 bg-stone-200 dark:bg-black/40',
-          'border-l-4 border-secondary dark:border-lime-400 '
+          'flex-1 bg-white dark:bg-black/40',
+          'border-l-4 border-secondary dark:border-lime-400 lg:rounded-md'
         )}
       >
         {children}

app/components/navigation/aside/AsideNavigationItem.tsx

@@ -4,6 +4,7 @@ import Link, { LinkProps } from 'next/link'
 import classNames from 'classnames'
 import { type HTMLProps, type ReactNode } from 'react'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
+import { Typography } from '../..'
 
 export type AsideNavigationItemProps = HTMLProps<HTMLAnchorElement> &
   LinkProps & {
@@ -29,14 +30,14 @@ export const AsideNavigationItem = ({
         'group',
         'flex flex-col items-center p-2 lg:p-4',
         {
-          'bg-secondary font-bold text-sky-100 hover:opacity-90 dark:bg-lime-400 dark:text-lime-900':
+          'bg-secondary text-sky-100 hover:opacity-90 dark:bg-lime-400 dark:text-lime-900':
             isCurrentPath,
           'hover:bg-stone-200 dark:hover:bg-black/70': !isCurrentPath
         }
       )}
     >
       <span>{icon}</span>
-      <span className='text-sm'>{label}</span>
+      <Typography.Text size='sm'>{label}</Typography.Text>
     </Link>
   )
 }

app/components/navigation/index.ts

@@ -1,3 +1,2 @@
-export { default as HeadingNavigation } from './heading'
 export { default as AsideNavigation } from './aside'
 export { default as MainNavigation } from './main'

app/components/navigation/main/MainListItem.tsx

@@ -5,12 +5,13 @@ import classNames from 'classnames'
 import { useI18n } from '@/locales/client'
 import { LocalesKeys } from '@/locales/locales'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
+import { Typography } from '../..'
 
 export const Variant = {
   default: {
     default: '',
     active:
-      'dark:text-cyan-50 font-bold hover:dark:text-cyan-50/75 hover:text-stone-500/75',
+      'dark:text-cyan-50 hover:dark:text-cyan-50/75 hover:text-stone-500/75',
     classes:
       'dark:text-cyan-50 hover:dark:text-cyan-50/75 hover:text-stone-500/75'
   },
@@ -48,7 +49,7 @@ export const MainListItem = ({
           : Variant[variant || 'default'].classes
       ])}
     >
-      {t(label)}
+      <Typography.Text size='base'>{t(label)}</Typography.Text>
     </Link>
   )
 }

app/components/theme/List.tsx

@@ -6,6 +6,7 @@ import { useDarkMode } from 'usehooks-ts'
 import { CheckBadgeIcon } from '@heroicons/react/24/solid'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
+import { Typography } from '..'
 
 export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
   const t = useI18n()
@@ -36,7 +37,7 @@ export const ThemeList = (props: HTMLProps<HTMLUListElement>) => {
             )}
             onClick={theme.onClick}
           >
-            <span>{theme.label}</span>
+            <Typography.Text as='span'>{theme.label}</Typography.Text>
             {theme.active && (
               <span>
                 <CheckBadgeIcon width={18} className='text-green-400' />

app/components/theme/Selector.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames'
 import { useDarkMode } from 'usehooks-ts'
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
+import { Typography } from '..'
 
 export type ThemeSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -23,9 +24,9 @@ export const ThemeSelector = ({ isOpen, ...props }: ThemeSelectorProps) => {
         'flex cursor-pointer justify-between'
       )}
     >
-      <span className='text-sm'>
+      <Typography.Text as='span'>
         {isDarkMode ? t(Locales.DARK) : t(Locales.LIGHT)}
-      </span>
+      </Typography.Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {

app/components/typography/Heading.tsx

@@ -3,10 +3,10 @@ import classNames from 'classnames'
 
 export const Variant = {
   h1: {
-    classes: 'text-3xl lg:text-2xl font-extrabold'
+    classes: 'text-3xl lg:text-2xl font-extrabold lg:font-black'
   },
   h2: {
-    classes: 'text-2xl lg:text-xl font-bold'
+    classes: 'text-2xl lg:text-xl font-bold lg:font-extrabold'
   },
   h3: {
     classes: 'text-base lg:text-lg font-medium lg:font-bold'
@@ -19,7 +19,7 @@ export const Variant = {
   }
 } as const
 
-export type HeadingProps = HTMLProps<HTMLDivElement> & {
+export type HeadingProps = HTMLProps<HTMLHeadingElement> & {
   as?: keyof typeof Variant
   variant?: keyof typeof Variant
 }
@@ -28,17 +28,14 @@ export const Heading = ({
   as: Component = 'h1',
   variant,
   children,
+  className,
   ...props
 }: HeadingProps) => {
   return createElement(
     Component,
     {
       ...props,
-      className: classNames(
-        props.className,
-        'text-stone-500 dark:text-cyan-50',
-        Variant[variant ?? Component].classes
-      )
+      className: classNames(className, Variant[variant ?? Component].classes)
     },
     children
   )

app/components/navigation/heading/HeadingNavigation.tsx → app/components/typography/HeadingNavigation.tsx

@@ -19,7 +19,7 @@ export const HeadingNavigation = ({
         className='cursor-pointer'
         onClick={router.back}
       />
-      <span>{children}</span>
+      {children}
     </Heading>
   )
 }

app/components/typography/Text.tsx

@@ -0,0 +1,47 @@
+import { type HTMLProps, createElement } from 'react'
+import classNames from 'classnames'
+
+export const Sizes = {
+  default: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base'
+} as const
+
+export const Variant = {
+  p: {
+    classes: 'font-normal'
+  },
+  span: {
+    classes: 'font-light'
+  }
+} as const
+
+export type TextProps = Omit<HTMLProps<HTMLElement>, 'size'> & {
+  as?: keyof typeof Variant
+  size?: keyof typeof Sizes
+  variant?: keyof typeof Variant
+}
+
+export const Text = ({
+  as: Component = 'p',
+  variant = 'p',
+  size = 'default',
+  children,
+  className,
+  ...props
+}: TextProps) => {
+  return createElement(
+    Component,
+    {
+      ...props,
+      className: classNames(
+        className,
+        Variant[Component ?? variant].classes,
+        Sizes[size]
+      )
+    },
+    children
+  )
+}
+
+export default Text

app/components/typography/index.ts

@@ -1 +1,3 @@
 export { default as Heading } from './Heading'
+export { default as HeadingNavigation } from './HeadingNavigation'
+export { default as Text } from './Text'