Add ability to download your Taskfile and improve README

Author: rick-nu

src/components/Generator/GeneredTaskfile/Copy/Copy.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { ReactElement } from 'react';
-import { taskfile } from '@/components/Generator/GeneredTaskfile/taskfile';
-import { useFormContext } from 'react-hook-form';
-import { GeneratorSettings } from '@/components/Generator/Generator';
-import CopyToClipboard from '@/components/Generator/GeneredTaskfile/Copy';
-import { highlighter } from './Highlighter';
+import {ReactElement} from 'react';
+import {taskfile} from '@/components/Generator/GeneredTaskfile/taskfile';
+import {useFormContext} from 'react-hook-form';
+import {GeneratorSettings} from '@/components/Generator/Generator';
+import SaveFile from './SaveFile';
+import {highlighter} from './Highlighter';
 
 const GeneratedTaskfile = (): ReactElement => {
 	const form = useFormContext<GeneratorSettings>();
@@ -16,7 +16,7 @@ const GeneratedTaskfile = (): ReactElement => {
 
 	return (
 		<>
-			<CopyToClipboard onCopy={() => navigator.clipboard.writeText(resultTaskfile)} />
+			<SaveFile content={resultTaskfile} />
 			<pre>{highlighter(resultTaskfile)}</pre>
 		</>
 	);

src/components/Generator/GeneredTaskfile/Copy/copy.module.css

@@ -0,0 +1,39 @@
+'use client';
+
+import {ReactElement, useState} from 'react';
+
+import styles from './save-file.module.scss';
+
+type CopyProps = {
+	content: string;
+};
+
+const CopyToClipboard = ({ content }: CopyProps): ReactElement => {
+	const [isCopied, setCopied] = useState(false);
+
+	const onClick = (): 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 (
+		<div className={styles.container}>
+			<button type="button" className={`${styles.download}`} onClick={download} title="Download Taskfile" />
+			<button type="button" className={`${styles.copy} ${isCopied && styles.copied}`} onClick={onClick} title="Copy Taskfile content" />
+		</div>
+	);
+};
+
+export default CopyToClipboard;

src/components/Generator/GeneredTaskfile/Copy/index.tsx

@@ -0,0 +1 @@
+export { default } from './SaveFile';

src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx

@@ -0,0 +1,46 @@
+.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;
+	border-radius: 0.2rem;
+	transition:
+		background-color 200ms ease-in-out;
+}
+
+.download {
+	background-image: url('./download.svg');
+}
+
+.copy {
+	background-image: url('./clipboard.svg');
+	background-size: 1.0rem;
+}
+
+.copy:hover, .download:hover {
+	color: #fff;
+	border-color: #fff;
+}
+
+.copy.copied,
+.copy:hover.copied {
+	background-color: #2ac93faa;
+}