Improve Typescript imports

Author: shellbear

components/Footer.tsx

@@ -6,8 +6,7 @@ import Text from './Text';
 import React from 'react';
 import { SiGithub, SiLinkedin, SiTwitter } from 'react-icons/si';
 import { MdMail } from 'react-icons/md';
-import Malt from '../icons/Malt';
-import Instagram from '../icons/Instagram';
+import { Malt, Instagram } from '@icons';
 
 const StyledFooter = styled.footer`
   width: 100%;

components/Layout.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import Head from 'next/head';
-import styles from '../styles/Home.module.css';
 import Container from './Container';
 import Footer from './Footer';
 import Nav from './Nav';
 
+import styles from '@styles/Home.module.css';
+
 type LayoutProps = {
   children?: React.ReactNode;
   title?: string;

components/index.ts

@@ -6,6 +6,7 @@ export { default as Text } from './Text';
 export { default as Title } from './Title';
 export { default as Container } from './Container';
 export { default as Tag } from './Tag';
+export { default as List } from './List';
 export { default as Card } from './Card';
 export { default as Image } from './Image';
 export { default as TransparentLink } from './TransparentLink';

icons/Instagram.tsx

@@ -5,11 +5,11 @@ interface InstagramProps extends SVGProps<SVGSVGElement> {
   size?: number | string;
 }
 
-const Instagram: React.FC<InstagramProps> = ({
+const Instagram = ({
   size = '1em',
   fill,
   ...props
-}) => (
+}: InstagramProps): JSX.Element => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={size}

icons/index.ts

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

pages/404.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Container, Title, Text } from '../components';
+import { Container, Title, Text } from '@components';
 
-const NotFound: React.FC = () => (
+const NotFound = (): JSX.Element => (
   <Container alignItems="center">
     <Title>404 - Not found</Title>
     <Text>The page does not exist.</Text>

pages/_app.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import Layout from '../components/Layout';
 import { AppProps } from 'next/app';
 import { motion } from 'framer-motion';
 
-import '../styles/globals.css';
+import { Layout } from '@components';
+
+import '@styles/globals.css';
 import 'react-notion-x/src/styles.css';
 import 'prismjs/themes/prism.css';
+
 import 'prismjs/prism.js';
 import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-typescript';

pages/about.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Title, Text, Container, Grid, Link, Card } from '../components';
+import { Title, Text, Container, Grid, Link, Card } from '@components';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 
@@ -17,14 +17,14 @@ import {
   SiPython,
   SiGraphql,
 } from 'react-icons/si';
-import { getPosts, Post } from '../posts';
-import TransparentLink from '../components/TransparentLink';
+import { getPosts, Post } from '@posts';
+import { TransparentLink } from '@components';
 
 interface AboutProps {
   experiences: Post[];
 }
 
-const About: React.FC<AboutProps> = ({ experiences }) => {
+const About = ({ experiences }: AboutProps): JSX.Element => {
   const stacks = React.useMemo(
     () => [
       {

pages/about/[slug].tsx

@@ -1,10 +1,11 @@
 import { GetStaticPaths, GetStaticPropsResult, NextPage } from 'next';
 import { NotionRenderer, NotionRendererProps, Code } from 'react-notion-x';
 import { NotionAPI } from 'notion-client';
-import { getPageInfo, Page, EXPERIENCES } from '../../posts/notion';
-import { Container } from '../../components';
 import Head from 'next/head';
 
+import { getPageInfo, Page, EXPERIENCES } from '@posts/notion';
+import { Container } from '@components';
+
 interface BlogProps {
   page: Page;
   recordMap: NotionRendererProps['recordMap'];

pages/blog/[slug].tsx

@@ -1,9 +1,10 @@
+import Head from 'next/head';
 import { GetStaticPaths, GetStaticPropsResult, NextPage } from 'next';
 import { NotionRenderer, NotionRendererProps, Code } from 'react-notion-x';
 import { NotionAPI } from 'notion-client';
-import { getPageInfo, Page, POSTS } from '../../posts/notion';
-import { Container, Text } from '../../components';
-import Head from 'next/head';
+
+import { getPageInfo, Page, POSTS } from '@posts/notion';
+import { Container, Text } from '@components';
 
 interface BlogProps {
   page: Page;