refactor: Import/Exports

Refactor import and export statements

gatsby-browser.tsx

@@ -3,11 +3,11 @@
 import { WrapPageElementBrowserArgs } from 'gatsby';
 import 'prismjs/themes/prism.css';
 import React from 'react';
-import Layout from './src/components/Layout';
+import { Default } from './src/layouts';
 import './src/styles/main.css';
 
 function wrapPageElement({ element, props }: WrapPageElementBrowserArgs): JSX.Element {
-  return <Layout {...props}>{element}</Layout>;
+  return <Default {...props}>{element}</Default>;
 }
 
 export { wrapPageElement };

gatsby-ssr.tsx

@@ -2,10 +2,10 @@
 
 import { WrapPageElementBrowserArgs } from 'gatsby';
 import React from 'react';
-import Layout from './src/components/Layout';
+import { Default } from './src/layouts';
 
 function wrapPageElement({ element, props }: WrapPageElementBrowserArgs): JSX.Element {
-  return <Layout {...props}>{element}</Layout>;
+  return <Default {...props}>{element}</Default>;
 }
 
 export { wrapPageElement };

src/components/Categories/Categories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import Category, { CategoryProps } from '../Category';
+import type { CategoryProps } from '../Category';
+import Category from '../Category';
 import Section from '../Section';
 
 interface CategoriesProps {

src/components/index.ts

@@ -0,0 +1,26 @@
+export * from './Aside';
+export { default as Aside } from './Aside';
+export * from './Categories';
+export { default as Categories } from './Categories';
+export * from './Column';
+export { default as Column } from './Column';
+export * from './Content';
+export { default as Content } from './Content';
+export * from './Footer';
+export { default as Footer } from './Footer';
+export * from './GitHub';
+export { default as GitHub } from './GitHub';
+export * from './Grid';
+export { default as Grid } from './Grid';
+export * from './Header';
+export { default as Header } from './Header';
+export * from './Main';
+export { default as Main } from './Main';
+export * from './Navigation';
+export { default as Navigation } from './Navigation';
+export * from './Row';
+export { default as Row } from './Row';
+export * from './Section';
+export { default as Section } from './Section';
+export * from './SEO';
+export { default as SEO } from './SEO';

src/components/Layout/Layout.tsx → src/layouts/Default/Default.tsx

@@ -1,20 +1,13 @@
 import { startCase } from 'lodash-es';
 import React, { ReactNode } from 'react';
+import { Aside, Content, Footer, GitHub, Grid, Header, Main, Navigation } from '../../components';
 import useIndexPage from '../../hooks';
-import Aside from '../Aside';
-import Content from '../Content';
-import Footer from '../Footer';
-import GitHub from '../GitHub';
-import Grid from '../Grid';
-import Header from '../Header';
-import Main from '../Main';
-import Navigation from '../Navigation';
-
-interface LayoutProps {
+
+interface DefaultProps {
   children: ReactNode;
 }
 
-function Layout(props: LayoutProps) {
+function Default(props: DefaultProps) {
   const { children } = props;
 
   const {
@@ -58,5 +51,5 @@ function Layout(props: LayoutProps) {
   );
 }
 
-export type { LayoutProps };
-export default Layout;
+export type { DefaultProps };
+export default Default;

src/layouts/Default/index.ts

@@ -0,0 +1,4 @@
+import Default from './Default';
+
+export default Default;
+export * from './Default';

src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from './Default';
+export { default as Default } from './Default';

src/pages/index.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import Categories from '../components/Categories';
-import Section from '../components/Section';
-import SEO from '../components/SEO';
+import { Categories, Section, SEO } from '../components';
 import resources from '../constants/resources';
 import tools from '../constants/tools';
 import useIndexPage from '../hooks';