feat/yml-download (#112)

* feat(entity): adding downloader

* feat(entity): adding style

* feat(entity): adding copy

* feat(entity): renaming

front/src/hooks/useDownload.ts

@@ -0,0 +1,30 @@
+const useDownload = (file: string): {
+  onDownload: (name: string | undefined, format: string) => void
+} => {
+  const onDownload = (name: string = 'File', extension: string = 'txt'): void => {
+    const url = window.URL.createObjectURL(
+      new Blob([file])
+    )
+
+    const link = document.createElement('a')
+
+    link.href = url
+    link.setAttribute('download', `${name}.${extension}`)
+
+    document.body.appendChild(link)
+
+    link.click()
+
+    if (link.parentNode == null) {
+      throw new Error('Link not defined')
+    }
+
+    link.parentNode.removeChild(link)
+  }
+
+  return {
+    onDownload
+  }
+}
+
+export default useDownload

front/src/hooks/useDrawerManager.ts

@@ -74,7 +74,6 @@ const useDrawerManager = (stackId: string): {
       form.positionY = y
 
       const { data: entityCreated } = await DrawerManager.create(stackId, form, type)
-      console.log(entityCreated)
 
       const entityDrawer: TServiceDrawer = drawer(entityCreated, EventsCanvas.context!)
       entityDrawer.create()

front/src/views/organisms/ComposeFileModal.organism.tsx

@@ -1,15 +1,34 @@
 import React, { type ReactElement } from 'react'
 import ModalOrganism from './Modal.organism'
+import Button from '../atoms/forms/Button.atom'
+import useDownload from '../../hooks/useDownload'
+import { AiOutlineCopy, AiOutlineDownload } from 'react-icons/ai'
 
 interface ComposeFileModalOrganismProps {
   toggle: () => void
   composeFileData: string
 }
 
 const ComposeFileModalOrganism = ({ toggle, composeFileData }: ComposeFileModalOrganismProps): ReactElement => {
+  const { onDownload } = useDownload(composeFileData)
+
+  const onDownloadClick = (): void => {
+    onDownload('docker-compose', 'yml')
+  }
+
+  const onCopyClick = async (): Promise<void> => {
+    await navigator.clipboard.writeText(composeFileData)
+  }
+
   return (
     <ModalOrganism toggle={toggle}>
-        <textarea className="h-96 w-full" readOnly value={composeFileData} />
+      <div className="w-full flex justify-around">
+        <Button className="btn-ghost" label="Copy" icon={<AiOutlineCopy />} onClick={onCopyClick}/>
+        <Button className="btn-ghost" label="Download" icon={<AiOutlineDownload />} onClick={onDownloadClick}/>
+      </div>
+      <hr/>
+      <textarea className="h-96 w-full" readOnly value={composeFileData}/>
+
     </ModalOrganism>
   )
 }