const{Fragment:e,jsx:n,jsxs:l}=arguments[0];function _createMdxContent(r){const a={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...r.components};return l(e,{children:[n(a.h2,{id:"introduction",children:n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#introduction",children:"Introduction"})}),"\n",n(a.p,{children:"A good Folder Structure is needed to keep the code maintainable and productive."}),"\n",n(a.p,{children:"In this post, I will be discussing pros and cons of three folder structures which may help you to organise you project."}),"\n",n(a.p,{children:"You can follow these links, if you are in a hurry."}),"\n",l(a.ul,{children:["\n",l(a.li,{children:["\n",n(a.p,{children:n(a.a,{href:"#folder-structure-1",children:"Folder Structure 1"})}),"\n"]}),"\n",l(a.li,{children:["\n",n(a.p,{children:n(a.a,{href:"#folder-structure-2",children:"Folder Structure 2"})}),"\n"]}),"\n",l(a.li,{children:["\n",n(a.p,{children:n(a.a,{href:"#folder-structure-3---the-ultimate-folder-structure",children:"Folder Structure 3 - The Ultimate Folder Structure"})}),"\n"]}),"\n"]}),"\n",n(a.h2,{id:"folder-structure-1",children:n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#folder-structure-1",children:"Folder Structure 1"})}),"\n",n(a.p,{children:"This structure is straight forward. We use the component name as filename."}),"\n",n(a.p,{children:"It will be easier to search the file using component name because filename and component name are same."}),"\n",l(a.p,{children:["Hit ",n(a.code,{children:"Ctrl + P"})," shortcut (in Visual Studio Code) and type Header, You will see the Header.tsx file. Hit enter to open the file."]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"plaintext","data-theme":"tokyo-night",children:l(a.code,{"data-language":"plaintext","data-theme":"tokyo-night",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{children:"project-root/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── src/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── components/"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ ├── Header.tsx"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ └── Footer.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── app/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── layout.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── page.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── public/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── favicon.ico"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── .gitignore"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── package.json"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"└── tsconfig.json"})})]})})}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/components/Header.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"use client"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" Header"}),n(a.span,{style:{color:"#9ABDF5"},children:"()"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full max-w-7xl mx-auto"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#9AA5CE"},children:"BrandName"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" Header"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/app/layout.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(a.span,{"data-line":"","data-highlighted-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"import"}),n(a.span,{style:{color:"#0DB9D7"},children:" Header"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"@components/Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" RootLayout"}),n(a.span,{style:{color:"#9ABDF5"},children:"("}),n(a.span,{style:{color:"#89DDFF"},children:"{"}),n(a.span,{style:{color:"#E0AF68"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:" }:"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"}),n(a.span,{style:{color:"#C0CAF5"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:":"}),n(a.span,{style:{color:"#C0CAF5"},children:" React"}),n(a.span,{style:{color:"#89DDFF"},children:"."}),n(a.span,{style:{color:"#C0CAF5"},children:"ReactNode"}),n(a.span,{style:{color:"#9ABDF5"},children:" })"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex flex-col min-h-screen"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#DE5971"},children:"Header "}),n(a.span,{style:{color:"#BA3C97"},children:"/>"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex-1"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#7DCFFF"},children:"{"}),n(a.span,{style:{color:"#C0CAF5"},children:"children"}),n(a.span,{style:{color:"#7DCFFF"},children:"}"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" RootLayout"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",n(a.p,{children:n(a.strong,{children:"Pros of Folder Structure 1"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"The import statements are clean"}),"\n",n(a.li,{children:"File search is easy"}),"\n"]}),"\n",n(a.p,{children:n(a.strong,{children:"Cons of Folder Structure 1"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"We need to find another place to store only header specific utility styles or components such as Header.css, etc."}),"\n"]}),"\n",n(a.h2,{id:"folder-structure-2",children:n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#folder-structure-2",children:"Folder Structure 2"})}),"\n",l(a.p,{children:["This structure is similar to ",n(a.a,{href:"#folder-structure-1",children:"Folder Structure 1"}),". But here, the components files live inside a folder. The name of the folder will also be the component name."]}),"\n",n(a.p,{children:"This structure enables to store the component specific files inside the folder along with main component file."}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"plaintext","data-theme":"tokyo-night",children:l(a.code,{"data-language":"plaintext","data-theme":"tokyo-night",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{children:"project-root/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── src/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── components/"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ ├── Header"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ │ │── Header.tsx"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ │ │── Header.css"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ │ │── DesktopNavigation.tsx"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ │ └── MobileMenu.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ └── Footer"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ └── Footer.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── app/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── layout.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── page.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── public/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── favicon.ico"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── .gitignore"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── package.json"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"└── tsconfig.json"})})]})})}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/components/Header.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"use client"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" Header"}),n(a.span,{style:{color:"#9ABDF5"},children:"()"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full max-w-7xl mx-auto"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#9AA5CE"},children:"BrandName"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" Header"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/app/layout.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(a.span,{"data-line":"","data-highlighted-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"import"}),n(a.span,{style:{color:"#0DB9D7"},children:" Header"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"@components/Header/Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" RootLayout"}),n(a.span,{style:{color:"#9ABDF5"},children:"("}),n(a.span,{style:{color:"#89DDFF"},children:"{"}),n(a.span,{style:{color:"#E0AF68"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:" }:"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"}),n(a.span,{style:{color:"#C0CAF5"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:":"}),n(a.span,{style:{color:"#C0CAF5"},children:" React"}),n(a.span,{style:{color:"#89DDFF"},children:"."}),n(a.span,{style:{color:"#C0CAF5"},children:"ReactNode"}),n(a.span,{style:{color:"#9ABDF5"},children:" })"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex flex-col min-h-screen"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#DE5971"},children:"Header "}),n(a.span,{style:{color:"#BA3C97"},children:"/>"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex-1"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#7DCFFF"},children:"{"}),n(a.span,{style:{color:"#C0CAF5"},children:"children"}),n(a.span,{style:{color:"#7DCFFF"},children:"}"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" RootLayout"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",n(a.p,{children:n(a.strong,{children:"Pros of Folder Structure 2"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"We can store component specific code inside the folder (Header/ in this case)"}),"\n"]}),"\n",n(a.p,{children:n(a.strong,{children:"Cons of Folder Structure 2"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"Imports statements will be redundant"}),"\n",n(a.li,{children:"We need to specify Header/Header while searching and navigating to the Header component file in text editors"}),"\n"]}),"\n",n(a.h2,{id:"folder-structure-3---the-ultimate-folder-structure",children:n(a.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#folder-structure-3---the-ultimate-folder-structure",children:"Folder Structure 3 - The Ultimate Folder Structure"})}),"\n",l(a.p,{children:["This structure is same as ",n(a.a,{href:"#folder-structure-2",children:"Folder Structure 2"}),". But here, each component folder will have an index.ts file."]}),"\n",n(a.p,{children:"It will have features of above two Folder Structures"}),"\n",n(a.p,{children:"This structure enables to store the component specific files inside the folder along with main component file."}),"\n",n(a.p,{children:"It will be easier to search the file using component name."}),"\n",l(a.p,{children:["Hit ",n(a.code,{children:"Ctrl + P"})," shortcut (in Visual Studio Code) and type Header, You will see the Header.tsx file. Hit enter to open the file."]}),"\n",n(a.figure,{"data-rehype-pretty-code-figure":"",children:n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"plaintext","data-theme":"tokyo-night",children:l(a.code,{"data-language":"plaintext","data-theme":"tokyo-night",style:{display:"grid"},children:[n(a.span,{"data-line":"",children:n(a.span,{children:"project-root/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── src/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── components/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ ├── Header"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ │ │── Header.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ │ │── Header.css"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ │ │── index.ts"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ │ │── DesktopNavigation.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ │ └── MobileMenu.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ └── Footer"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ │ │── Footer.tsx"})}),"\n",n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{children:"│ │ └── index.ts"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── app/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ ├── layout.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── page.tsx"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── public/"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"│ └── favicon.ico"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── .gitignore"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"├── package.json"})}),"\n",n(a.span,{"data-line":"",children:n(a.span,{children:"└── tsconfig.json"})})]})})}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"Header.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"use client"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" Header"}),n(a.span,{style:{color:"#9ABDF5"},children:"()"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"w-full max-w-7xl mx-auto"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#9AA5CE"},children:"BrandName"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" Header"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/components/Header/index.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"1",children:[l(a.span,{"data-line":"","data-highlighted-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#9ABDF5"},children:" { "}),n(a.span,{style:{color:"#7DCFFF"},children:"default"}),n(a.span,{style:{color:"#9ABDF5"},children:" }"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"./Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"}),n(a.span,{style:{color:"#51597D",fontStyle:"italic"},children:" // Default export"})]}),"\n",l(a.span,{"data-line":"","data-highlighted-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#FF9E64"},children:" *"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"./Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"}),n(a.span,{style:{color:"#51597D",fontStyle:"italic"},children:" // Named export"})]})]})})]}),"\n",l(a.figure,{"data-rehype-pretty-code-figure":"",children:[n(a.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"tokyo-night",children:"src/layout.tsx"}),n(a.pre,{style:{backgroundColor:"#1a1b26",color:"#a9b1d6"},tabIndex:"0","data-language":"jsx","data-theme":"tokyo-night",children:l(a.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"tokyo-night",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[n(a.span,{"data-line":"","data-highlighted-line":"",children:n(a.span,{style:{color:"#51597D",fontStyle:"italic"},children:"// No need to specify /Header one more time as in Folder Structure 2"})}),"\n",l(a.span,{"data-line":"","data-highlighted-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"import"}),n(a.span,{style:{color:"#0DB9D7"},children:" Header"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"@components/Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"}),n(a.span,{style:{color:"#51597D",fontStyle:"italic"},children:" // Default import"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"import"}),n(a.span,{style:{color:"#9ABDF5"},children:" { "}),n(a.span,{style:{color:"#0DB9D7"},children:"MobileMenu"}),n(a.span,{style:{color:"#9ABDF5"},children:" }"}),n(a.span,{style:{color:"#7DCFFF"},children:" from"}),n(a.span,{style:{color:"#89DDFF"},children:' "'}),n(a.span,{style:{color:"#9ECE6A"},children:"@components/Header"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#89DDFF"},children:";"}),n(a.span,{style:{color:"#51597D",fontStyle:"italic"},children:" //Named import"})]}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7"},children:"function"}),n(a.span,{style:{color:"#7AA2F7"},children:" RootLayout"}),n(a.span,{style:{color:"#9ABDF5"},children:"("}),n(a.span,{style:{color:"#89DDFF"},children:"{"}),n(a.span,{style:{color:"#E0AF68"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:" }:"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"}),n(a.span,{style:{color:"#C0CAF5"},children:" children"}),n(a.span,{style:{color:"#89DDFF"},children:":"}),n(a.span,{style:{color:"#C0CAF5"},children:" React"}),n(a.span,{style:{color:"#89DDFF"},children:"."}),n(a.span,{style:{color:"#C0CAF5"},children:"ReactNode"}),n(a.span,{style:{color:"#9ABDF5"},children:" })"}),n(a.span,{style:{color:"#9ABDF5"},children:" {"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BB9AF7",fontStyle:"italic"},children:" return"}),n(a.span,{style:{color:"#9ABDF5"},children:" ("})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex flex-col min-h-screen"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#DE5971"},children:"Header "}),n(a.span,{style:{color:"#BA3C97"},children:"/>"})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" <"}),n(a.span,{style:{color:"#F7768E"},children:"div"}),n(a.span,{style:{color:"#BB9AF7"},children:" className"}),n(a.span,{style:{color:"#89DDFF"},children:"="}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#9ECE6A"},children:"flex-1"}),n(a.span,{style:{color:"#89DDFF"},children:'"'}),n(a.span,{style:{color:"#BA3C97"},children:">"}),n(a.span,{style:{color:"#7DCFFF"},children:"{"}),n(a.span,{style:{color:"#C0CAF5"},children:"children"}),n(a.span,{style:{color:"#7DCFFF"},children:"}"}),n(a.span,{style:{color:"#BA3C97"},children:""})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#BA3C97"},children:" "})]}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#9ABDF5"},children:" )"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]}),"\n",n(a.span,{"data-line":"",children:n(a.span,{style:{color:"#9ABDF5"},children:"}"})}),"\n",n(a.span,{"data-line":"",children:" "}),"\n",l(a.span,{"data-line":"",children:[n(a.span,{style:{color:"#7DCFFF"},children:"export"}),n(a.span,{style:{color:"#7DCFFF"},children:" default"}),n(a.span,{style:{color:"#C0CAF5"},children:" RootLayout"}),n(a.span,{style:{color:"#89DDFF"},children:";"})]})]})})]}),"\n",n(a.p,{children:n(a.strong,{children:"Pros of Folder Structure 3"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"We can store component specific code inside the folder (Header/ in this case)"}),"\n",n(a.li,{children:"The imports look clean"}),"\n",n(a.li,{children:"File search in editor will be easy"}),"\n"]}),"\n",n(a.p,{children:n(a.strong,{children:"Cons of Folder Structure 3"})}),"\n",l(a.ul,{children:["\n",n(a.li,{children:"You need add one extra file"}),"\n"]})]})}return{default:function(e={}){const{wrapper:l}=e.components||{};return l?n(l,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};