refactor: project structure with components

docs/linguagens/python/estruturando-o-projeto.mdx

@@ -9,20 +9,49 @@ displayed_sidebar: pythonSidebar
 Agora precisamos criar uma estrutura para o projeto, definir onde vão ficar os eventos, os comandos e outras funções relacionadas ao bot.
 
 ### Estrutura de arquivos
-![Estrutura do projeto](./assets/folder-structure.png)
+<Directory>
+  <Directory.Folder name='cogs'>
+    <Directory.File name='commands.py' />
+    <Directory.File name='events.py' />
+  </Directory.Folder>
+
+  <Directory.File name='main.py' />
+
+  <Directory.Env />
+</Directory>
 
 ### Descrição dos diretórios
 
-<div className='flex flex-col gap-4'>
-  ![Diretório main](./assets/dir-main.png)\
-  `main.py` será o arquivo principal, onde definimos o `client` e iniciamos o bot, além de que será usado para carregar outros arquivos do projeto.
+<ul className='space-y-10 list-none p-0 [&>li]:space-y-1'>
+  <li>
+    <Directory>
+      <Directory.File name='main.py' highlight />
+    </Directory>
+
+    Será o arquivo principal, onde definimos o client e iniciamos o bot; Também será usado para carregar outros arquivos do projeto, como comandos e eventos.
+  </li>
+
+  <li>
+    <Directory>
+      <Directory.Folder name='cogs' highlight />
+    </Directory>
+
+    Cogs são extensões do discord.py. Cada cog é um módulo Python que contém um conjunto de comandos, listeners de eventos e/ou outras funcionalidades.
+  </li>
+
+  <li>
+    <Directory>
+      <Directory.Folder name='functions' highlight />
+    </Directory>
+
+    Pode conter arquivos com funções auxiliares indiretas, que serão usadas em um ou vários arquivos da aplicação.
+  </li>
 
-  ![Diretório cogs](./assets/dir-cogs.png)\
-  Cogs são extensões do discord.py. Cada cog é um módulo Python que contém um conjunto de comandos, listeners de eventos e/ou outras funcionalidades.
+  <li>
+    <Directory>
+      <Directory.Env highlight />
+    </Directory>
 
-  ![Diretório funções](./assets/dir-functions.png)\
-  A pasta `functions/` pode conter arquivos com funções auxiliares indiretas, que serão usadas em um ou vários arquivos da aplicação.
-
-  ![Diretório env](./assets/dir-env.png)\
-  `.env` é usado para armazenar variáveis de ambiente de forma segura, como o token do bot e outras credenciais privadas.
-</div>
+    Será usado para armazenar variáveis de ambiente de forma segura, como o token do bot e outras credenciais privadas.
+  </li>
+</ul>

src/components/Directory/Directory.tsx

@@ -0,0 +1,81 @@
+{/* <img src='/img/icons/folder.svg' alt="" /> */ }
+
+import { default as FolderIcon } from '@site/static/img/icons/folder.svg'
+import { default as FileIcon } from '@site/static/img/icons/file.svg'
+import { default as EnvIcon } from '@site/static/img/icons/env.svg'
+
+type HighlightProp = { highlight: boolean }
+
+interface DirectoryProps {
+  children: JSX.Element
+}
+
+interface FolderProps extends HighlightProp {
+  name: string
+  children?: JSX.Element
+}
+
+interface FileProps extends HighlightProp {
+  name: string
+}
+
+const iconSize = 20
+
+function Directory({ children }: DirectoryProps) {
+  return (
+    <div className="w-full sm:max-w-[220px] py-2 overflow-hidden border-2 rounded-2xl border-solid border-ctp-surface0 bg-ctp-mantle text-ctp-text text-sm [&_svg]:fill-ctp-text">
+      {children}
+    </div>
+  )
+}
+
+function HighlightIcon() {
+  return (
+    <span className='w-[12px] h-[12px] rounded-full border border-solid border-ctp-text bg-emerald-400 ml-auto mr-0 relative'>
+      <span className='w-2/5 h-2/5 shadow-[2px_2px_15px_2px_rgba(5,150,105)] shadow-emerald-300 absolute inset-0' />
+    </span>
+  )
+}
+
+function Folder({ name, children, highlight = false }: FolderProps) {
+  return (
+    <div className={`flex flex-col w-full`}>
+      <div className={`w-full flex items-center gap-2 px-4 ${!highlight ? 'pt-1' : ''}`}>
+        <FolderIcon width={iconSize} height={iconSize} />
+        <span>{name}</span>
+        {highlight && <HighlightIcon />}
+      </div>
+      {children && (
+        <div className="pl-5 pt-1">
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function File({ name, highlight = false }: FileProps) {
+  return (
+    <div className={`flex flex-1 items-center gap-2 px-4 ${!highlight ? 'py-1' : ''}`}>
+      <FileIcon width={iconSize} height={iconSize} />
+      <span>{name}</span>
+      {highlight && <HighlightIcon />}
+    </div>
+  )
+}
+
+function Env({ highlight = false }: HighlightProp) {
+  return (
+    <div className={`flex flex-1 items-center gap-2 px-4 ${!highlight ? 'py-1' : ''}`}>
+      <EnvIcon width={iconSize} height={iconSize} />
+      <span>.env</span>
+      {highlight && <HighlightIcon />}
+    </div>
+  )
+}
+
+Directory.Folder = Folder
+Directory.File = File
+Directory.Env = Env
+
+export { Directory }

src/theme/MDXComponents.ts

@@ -3,10 +3,12 @@ import MDXComponents from '@theme-original/MDXComponents';
 
 import { CardSection } from '../components/CardSection';
 import { Card } from '../components/Card';
+import { Directory } from '../components/Directory/Directory';
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
+  Directory,
   CardSection,
   Card
 };