navigator.clipboard.writeText(resultTaskfile)} />
+
{highlighter(resultTaskfile)}
>
);
diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx b/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx
new file mode 100644
index 0000000..0d0da64
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/SaveFile/SaveFile.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import {ReactElement, useState} from 'react';
+
+import styles from './save-file.module.scss';
+
+type CopyProps = {
+ content: string;
+};
+
+const SaveFile = ({ content }: CopyProps): ReactElement => {
+ const [isCopied, setCopied] = useState(false);
+
+ const copyToClipboard = (): void => {
+ setCopied(true);
+ navigator.clipboard.writeText(content);
+
+ setTimeout(() => setCopied(false), 1000);
+ };
+
+ const download = (): void => {
+ const blob = new Blob([content], { type: 'text/x-shellscript' });
+ const elem = window.document.createElement('a');
+ elem.href = window.URL.createObjectURL(blob);
+ elem.download = 'Taskfile';
+ document.body.appendChild(elem);
+ elem.click();
+ document.body.removeChild(elem);
+ };
+
+ return (
+
+
+
+
+ );
+};
+
+export default SaveFile;
diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/clipboard.svg b/src/components/Generator/GeneredTaskfile/SaveFile/clipboard.svg
new file mode 100644
index 0000000..b01711f
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/SaveFile/clipboard.svg
@@ -0,0 +1,19 @@
+
+
diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/download.svg b/src/components/Generator/GeneredTaskfile/SaveFile/download.svg
new file mode 100644
index 0000000..3bf8a21
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/SaveFile/download.svg
@@ -0,0 +1,33 @@
+
+
diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/index.tsx b/src/components/Generator/GeneredTaskfile/SaveFile/index.tsx
new file mode 100644
index 0000000..e716dc5
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/SaveFile/index.tsx
@@ -0,0 +1 @@
+export { default } from './SaveFile';
diff --git a/src/components/Generator/GeneredTaskfile/SaveFile/save-file.module.scss b/src/components/Generator/GeneredTaskfile/SaveFile/save-file.module.scss
new file mode 100644
index 0000000..e62b0f4
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/SaveFile/save-file.module.scss
@@ -0,0 +1,45 @@
+.container {
+ position: sticky;
+ top: 0;
+ float: right;
+ transform: translateY(-1rem);
+ display: flex;
+ flex-direction: row;
+ gap: 0.5rem;
+}
+
+.copy,
+.download {
+ background-color: #10001fc2;
+ color: rgb(255 255 255 / 0.5);
+ border: 0.1rem solid rgb(255 255 255 / 0.5);
+ border-radius: 0.2rem;
+ height: 2.6rem;
+ width: 2.6rem;
+ cursor: pointer;
+ font-size: 1rem;
+ background-size: 1.2rem;
+ background-repeat: no-repeat;
+ background-position: center;
+ transition: background-color 200ms ease-in-out;
+}
+
+.download {
+ background-image: url('./download.svg');
+}
+
+.copy {
+ background-image: url('./clipboard.svg');
+ background-size: 1rem;
+}
+
+.copy:hover,
+.download:hover {
+ color: #fff;
+ border-color: #fff;
+}
+
+.copy.copied,
+.copied:hover {
+ background-color: #2ac93faa;
+}