chore: updated project structure

app.config.ts

@@ -1,15 +1,8 @@
-import { Locales } from './locales/locales'
-
 export const socialMedia = [
   {
-    label: 'Twitter',
-    href: 'https://twitter.com/0xdevhub',
-    icon: 'twitter'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/skvN5fnt5M',
-    icon: 'discord'
+    label: 'X',
+    href: 'https://x.com/gervickasjs',
+    icon: 'x'
   },
   {
     label: 'Github',
@@ -21,7 +14,7 @@ export const socialMedia = [
 const appConfig = {
   name: '0xdevhub',
   meta: {
-    description: 'on-chain & off-chain dev hub'
+    description: 'gervickas.js blockchain app hub'
   },
   socialMedia
 }

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

@@ -2,8 +2,7 @@
 
 import { Locales } from '@/locales/locales'
 import { useI18n } from '@/locales/client'
-import { HeadingNavigation } from '@/app/components/typography'
-import { Typography } from '@/app/components'
+import { Text, HeadingNavigation } from '@/app/components/typography'
 
 export const AppsContainer = () => {
   const t = useI18n()
@@ -12,10 +11,10 @@ export const AppsContainer = () => {
     <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'>
+        <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>
+        </Text>
       </div>
     </div>
   )

app/[locale]/apps/components/index.ts

@@ -1 +1 @@
-export { default as Container } from './Container'
+export { default as AppsContainer } from './Container'

app/[locale]/components/MaintenanceMode.tsx

@@ -1,4 +1,5 @@
-import { Logo, Social } from '@/app/components'
+import { Logo } from '@/app/components'
+import { SocialMedia } from '@/app/components/social'
 
 export const MaintenanceMode = () => {
   return (
@@ -7,7 +8,7 @@ export const MaintenanceMode = () => {
         <Logo />
       </div>
       <div>
-        <Social className='text-black/40' />
+        <SocialMedia className='text-black/40' />
       </div>
     </main>
   )

app/[locale]/layout.tsx

@@ -3,11 +3,11 @@
 import { type ReactNode } from 'react'
 import { useDarkMode, useIsClient } from 'usehooks-ts'
 import classNames from 'classnames'
-import { MaintenanceMode } from './components/MaintenanceMode'
 import StyledJsxRegistry from '@/app/registry'
 import { Header, Footer } from '@/app/components'
-import { WalletProvider } from '../components/wallet/Provider'
-import { LanguageProvider } from '../components/language'
+import { MaintenanceMode } from '@/app/[locale]/components/MaintenanceMode'
+import { Provider as WalletProvider } from '@/app/components/wallet'
+import { Provider as LanguageProvider } from '@/app/components/language'
 
 export type BaseLayoutProps = {
   children: ReactNode

app/components/card/Card.tsx → app/components/Card.tsx

@@ -12,8 +12,8 @@ export const Card = ({
   bgOpacity = 0.6,
   as: Component = 'div',
   ...props
-}: CardProps) => {
-  return createElement(
+}: CardProps) =>
+  createElement(
     Component,
     {
       ...props,
@@ -28,6 +28,5 @@ export const Card = ({
     },
     children
   )
-}
 
 export default Card

app/components/header/Header.tsx → app/components/Header.tsx

@@ -1,8 +1,9 @@
 import { type HTMLProps } from 'react'
 import dynamic from 'next/dynamic'
 import classNames from 'classnames'
-import { Separator, Logo, Loading, Navigation } from '@/app/components'
+import { Separator, Logo, Loading } from '@/app/components'
 import { Locales } from '@/locales/locales'
+import { MainNav } from '@/app/components/navigation/main/Main'
 
 const Wallet = dynamic(() => import('@/app/components/wallet/Wallet'), {
   ssr: false,
@@ -24,7 +25,7 @@ export const Header = ({ className, ...props }: HTMLProps<HTMLDivElement>) => {
       >
         <Logo />
         <div className='flex items-center space-x-4'>
-          <Navigation.MainNavigation
+          <MainNav
             navLinks={[
               {
                 label: Locales.APPS,

app/components/index.ts

@@ -1,14 +1,7 @@
 export { default as Button } from './Button'
 export { default as Loading } from './Loading'
 export { default as Separator } from './Separator'
-export { default as Card } from './card'
-export { default as Footer } from './footer'
-export { default as Header } from './header'
-export { default as Language } from './language'
-export { default as Logo } from './logo'
-export * as Navigation from './navigation'
-export { default as Settings } from './settings'
-export { default as Social } from './social'
-export { default as Theme } from './theme'
-export * as Typography from './typography'
-export { default as Wallet } from './wallet'
+export { default as Card } from './Card'
+export { default as Footer } from './Footer'
+export { default as Header } from './Header'
+export { default as Logo } from './Logo'

app/components/language/List.tsx

@@ -5,7 +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 '..'
+import { Text } from '@/app/components/typography'
 
 export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
   const currentLocale = useCurrentLocale()
@@ -25,9 +25,9 @@ export const LanguageList = (props: HTMLProps<HTMLUListElement>) => {
               'flex cursor-pointer items-center justify-between space-x-2 p-2'
             )}
           >
-            <Typography.Text as='span' className='capitalize'>
+            <Text as='span' className='capitalize'>
               {locale}
-            </Typography.Text>
+            </Text>
             {locale === currentLocale && (
               <CheckBadgeIcon width={18} className='text-green-400' />
             )}

app/components/language/Selector.tsx

@@ -4,7 +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 '..'
+import { Text } from '@/app/components/typography'
 
 export type LanguageSelectorProps = HTMLProps<HTMLDivElement> & {
   isOpen?: boolean
@@ -24,9 +24,9 @@ export const LanguageSelector = ({
         'flex cursor-pointer justify-between'
       )}
     >
-      <Typography.Text as='span' className='capitalize'>
+      <Text as='span' className='capitalize'>
         {currentLocale}
-      </Typography.Text>
+      </Text>
       <ChevronDownIcon
         width={18}
         className={classNames('transform', {

app/components/language/index.ts

@@ -1,9 +1,4 @@
-export { default as LanguageProvider } from './Provider'
-export { default as LanguageSelector } from './Selector'
-export { default as LanguageList } from './List'
-
-import { Language } from './Language'
-
-export { Language }
-
-export default Language
+export { default as Provider } from './Provider'
+export { default as Selector } from './Selector'
+export { default as List } from './List'
+export { default as Language } from './Language'

app/components/navigation/aside/AsideNavigation.tsx

@@ -1,5 +1,5 @@
 import { Children, type HTMLProps, type ReactNode } from 'react'
-import { Card } from '@/app/components/card/Card'
+import { Card } from '@/app/components/Card'
 import classNames from 'classnames'
 
 import {

app/components/navigation/aside/AsideNavigationItem.tsx

@@ -4,7 +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 '../..'
+import { Text } from '@/app/components/typography'
 
 export type AsideNavigationItemProps = HTMLProps<HTMLAnchorElement> &
   LinkProps & {
@@ -37,9 +37,9 @@ export const AsideNavigationItem = ({
       )}
     >
       {icon}
-      <Typography.Text size='md' className='hidden lg:block'>
+      <Text size='md' className='hidden lg:block'>
         {label}
-      </Typography.Text>
+      </Text>
     </Link>
   )
 }

app/components/navigation/aside/index.ts

@@ -1,7 +1,2 @@
 export { default as AsideNavigationItem } from './AsideNavigationItem'
-
-import { AsideNavigation } from './AsideNavigation'
-
-export { AsideNavigation }
-
-export default AsideNavigation
+export { default as AsideNavigation } from './AsideNavigation'

app/components/navigation/index.ts

@@ -1,2 +1,2 @@
-export { default as AsideNavigation } from './aside'
-export { default as MainNavigation } from './main'
+export * as Aside from './aside'
+export * as Main from './main'

app/components/navigation/main/Main.tsx

@@ -4,15 +4,15 @@ import { useEffect, type HTMLProps, useCallback } from 'react'
 import classNames from 'classnames'
 import { ArrowLeftIcon, Bars3BottomLeftIcon } from '@heroicons/react/24/solid'
 import { useToggle, useMediaQuery } from 'usehooks-ts'
-import { Card } from '@/app/components/card/Card'
+import { Card } from '@/app/components/Card'
 import { MainList } from './MainList'
 import { MainListItemProps } from './MainListItem'
 
 type MainProps = HTMLProps<HTMLElement> & {
   navLinks: MainListItemProps[]
 }
 
-export const Main = ({ navLinks, ...props }: MainProps) => {
+export const MainNav = ({ navLinks, ...props }: MainProps) => {
   const [isOpened, toggle] = useToggle()
   const matches = useMediaQuery(`(min-width: 1024px`)
 
@@ -77,4 +77,4 @@ export const Main = ({ navLinks, ...props }: MainProps) => {
   )
 }
 
-export default Main
+export default MainNav

app/components/navigation/main/MainListItem.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import { useI18n } from '@/locales/client'
 import { LocalesKeys } from '@/locales/locales'
 import useCurrentPath from '@/app/lib/hooks/useCurrentPath'
-import { Typography } from '../..'
+import { Text } from '@/app/components/typography'
 
 export const Variant = {
   default: {
@@ -49,7 +49,7 @@ export const MainListItem = ({
           : Variant[variant || 'default'].classes
       ])}
     >
-      <Typography.Text size='base'>{t(label)}</Typography.Text>
+      <Text size='base'>{t(label)}</Text>
     </Link>
   )
 }

app/components/navigation/main/index.ts

@@ -1,8 +1,3 @@
 export { default as MainList } from './MainList'
 export { default as MainListItem } from './MainListItem'
-
-import { Main } from './Main'
-
-export { Main }
-
-export default Main
+export { default as MainNav } from './Main'

app/components/settings/Container.tsx

@@ -3,9 +3,11 @@
 import { type HTMLProps } from 'react'
 import classNames from 'classnames'
 import { Heading } from '@/app/components/typography/Heading'
-import { Language, Theme } from '@/app/components'
+
 import { useI18n } from '@/locales/client'
 import { Locales } from '@/locales/locales'
+import { Theme } from '@/app/components/theme'
+import { Language } from '@/app/components/language'
 
 export const SettingsContainer = (props: HTMLProps<HTMLDivElement>) => {
   const t = useI18n()

app/components/settings/index.ts

@@ -1,8 +1,3 @@
 export { default as SettingsSelector } from './Selector'
 export { default as SettingsContainer } from './Container'
-
-import { Settings } from './Settings'
-
-export { Settings }
-
-export default Settings
+export { default as Settings } from './Settings'

app/components/social/SocialMedia.tsx

@@ -1,5 +1,5 @@
 import { Children, type HTMLProps, type SVGProps } from 'react'
-import { Discord, Twitter, Github } from './icons'
+import { Discord, X, Github } from './icons'
 import classNames from 'classnames'
 import { socialMedia } from '@/app.config'
 import Link from 'next/link'
@@ -29,7 +29,7 @@ export const SocialMedia = ({
             {
               {
                 discord: <Discord {...iconProps} />,
-                twitter: <Twitter {...iconProps} />,
+                x: <X {...iconProps} />,
                 github: <Github {...iconProps} />
               }[icon]
             }

app/components/social/icons/X.tsx

@@ -0,0 +1,20 @@
+import { type SVGProps } from 'react'
+
+export const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width='24'
+    height='24'
+    fill='none'
+    viewBox='0 0 24 24'
+    aria-hidden='true'
+    {...props}
+  >
+    <g>
+      <path
+        fill='currentColor'
+        d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'
+      ></path>
+    </g>
+  </svg>
+)
+export default XIcon

app/components/social/icons/index.tsx

@@ -1,3 +1,4 @@
 export { default as Discord } from './Discord'
 export { default as Twitter } from './Twitter'
 export { default as Github } from './Github'
+export { default as X } from './X'

app/components/social/index.ts

@@ -1,7 +1,3 @@
 export * as SocialIcons from './icons'
 
-import { SocialMedia } from './SocialMedia'
-
-export { SocialMedia }
-
-export default SocialMedia
+export { default as SocialMedia } from './SocialMedia'