🔧 config: src folders structure

:%s

src/components/common/ButtonCommon/ButtonCommon.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.buttonCommon {
+  color: red;
+}

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -0,0 +1,15 @@
+import { FC, useRef, useEffect } from 'react'
+import s from './ButtonCommon.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ButtonCommon: FC<Props> = ({ }) => {
+    return (
+        <div className={s.buttonCommon}>This is button common</div>
+    )
+}
+
+export default ButtonCommon

src/components/common/Header/Header.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.header {
+  color: green;
+}

src/components/common/Header/Header.tsx

@@ -0,0 +1,15 @@
+import { FC, useRef, useEffect } from 'react'
+import s from './Header.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const Header: FC<Props> = ({ }) => {
+    return (
+        <div className={s.header}>This is Header</div>
+    )
+}
+
+export default Header

src/components/common/Layout/Layout.tsx

@@ -0,0 +1,24 @@
+import { FC, useRef, useEffect } from 'react'
+import Header from '../Header/Header'
+import { CommerceProvider } from '@framework'
+import { useRouter } from 'next/router'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+// note: demo code
+const Layout: FC<Props> = ({ children }) => {
+    const { locale = 'en-US' } = useRouter()
+
+    return (
+        <CommerceProvider locale={locale}>
+            <Header />
+            <main>{children}</main>
+        </CommerceProvider>
+
+    )
+}
+
+export default Layout

src/components/common/index.ts

@@ -0,0 +1,3 @@
+export { default as ButtonCommon } from './ButtonCommon/ButtonCommon'
+export { default as Layout } from './Layout/Layout'
+

src/components/icons/index.ts

@@ -0,0 +1 @@
+// index here

src/components/modules/cart/index.ts

@@ -0,0 +1 @@
+// index here

src/components/modules/home/HomeBanner/HomeBanner.module.css

@@ -0,0 +1,5 @@
+/* style demo here */
+
+.homeBanner {
+  color: green;
+}

src/components/modules/home/HomeBanner/HomeBanner.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react'
+import s from './HomeBanner.module.css'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const HomeBanner: FC<Props> = ({ }) => {
+    return (
+        <div className={s.homeBanner}>This is HomeBanner</div>
+    )
+}
+
+export default HomeBanner

src/components/modules/home/index.ts

@@ -0,0 +1 @@
+export { default as HomeBanner } from './HomeBanner/HomeBanner'