Arch and components by functionality

components/core/Footer/Footer.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Footer.module.css";
-import { Container } from "ui";
+import { Container } from "@components/ui";
 
 interface Props {
   className?: string;

components/core/Layout/Layout.tsx

@@ -1,8 +1,8 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Layout.module.css";
-import { Navbar, Featurebar } from "components";
-import { Container } from "ui";
+import { Navbar, Featurebar } from "@components/core";
+import { Container } from "@components/ui";
 
 interface Props {
   className?: string;

components/core/Navbar/Navbar.tsx

@@ -1,8 +1,8 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./Navbar.module.css";
-import { Logo, Container } from "ui";
-import { Avatar, Searchbar } from "components";
+import { Logo, Container } from "@components/ui";
+import { Avatar, Searchbar } from "@components/core";
 interface Props {
   className?: string;
   children?: any;

components/core/index.ts

@@ -2,6 +2,5 @@ export { default as Avatar } from "./Avatar";
 export { default as Footer } from "./Footer";
 export { default as Navbar } from "./Navbar";
 export { default as Searchbar } from "./Searchbar";
-export { default as ProductView } from "./ProductView";
 export { default as Layout } from "./Layout";
 export { default as Featurebar } from "./Featurebar";

components/product/ProductView/ProductView.tsx

@@ -1,7 +1,7 @@
 import cn from "classnames";
 import React, { FunctionComponent } from "react";
 import s from "./ProductView.module.css";
-import { Button } from "ui";
+import { Button } from "@components/ui";
 
 interface ProductData {
   description: string;

components/product/index.ts

@@ -0,0 +1 @@
+export { default as ProductView } from "./ProductView";

pages/_app.tsx

@@ -1,4 +1,4 @@
-import "@styles/global.css";
+import "@assets/global.css";
 
 export default function MyApp({ Component, pageProps }) {
   return (

pages/index.tsx

@@ -1,4 +1,4 @@
-import { Layout } from "components";
+import { Layout } from "@components/core";
 
 export default function Home() {
   return (

pages/product/[id].tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
-import { ProductView, Layout } from "components";
-import ErrorPage from "next/error";
+import { Layout } from "@components/core";
+import { ProductView } from "@components/product";
 
 export async function getStaticProps() {
   const productData = {

tsconfig.json

@@ -16,7 +16,7 @@
     "jsx": "preserve",
     "paths": {
       "@components/*": ["components/*"],
-      "@styles/*": ["styles/*"]
+      "@assets/*": ["assets/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],