feat: refactor project structure

Refactored the project structure so that each page has its own tree of components and a global "Components" folder for the components that is used by more than one page.
- Added an "assets" directory that exports all static images/icons/fonts/...etc

src/Components/CopyToClipboard/CopyToClipboard.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import CopyToClipboard from './CopyToClipboard';
+
+export default {
+  title: 'Shared/Copy To Clipboard',
+  component: CopyToClipboard,
+
+} as ComponentMeta<typeof CopyToClipboard>;
+
+const Template: ComponentStory<typeof CopyToClipboard> = (args) => <div className="flex h-[400px] justify-center items-center"><div className="input-wrapper mt-32 max-w-[320px] mx-auto">
+  <input
+    className="input-field overflow-ellipsis"
+    value={'Some Text To Copy'}
+  />
+  <CopyToClipboard {...args} text="Some Text To Copy" />
+</div></div>;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Some Text To Copy"
+}
+
+export const Above = Template.bind({});
+Above.args = {
+  text: "Some Text To Copy",
+  direction: "top"
+}
+

src/Components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { IoIosCopy } from 'react-icons/io'
+import CopyToClipboardComponent from 'react-copy-to-clipboard';
+import { motion } from 'framer-motion'
+
+interface Props {
+    text: string;
+    onCopy?: () => void,
+    direction?: 'top' | 'bottom'
+    iconClasses?: string;
+    alertClasses?: string;
+}
+
+export default function CopyToClipboard({ text, direction = 'bottom', iconClasses = '', alertClasses = '', onCopy = () => { } }: Props) {
+    const [showAlert, setShowAlert] = useState(false)
+    const handleCopy = () => {
+        setShowAlert(true)
+        onCopy()
+    }
+
+    const className = direction === 'bottom' ? 'top-full' : 'bottom-full';
+
+    const variants = {
+        hidden: {
+            display: 'none',
+            opacity: 0,
+            y: direction === 'bottom' ? -20 : 20
+        },
+        show: {
+            opacity: 1,
+            display: 'block',
+            y: direction === 'bottom' ? 10 : -10
+        },
+        fade: {
+            display: 'none',
+            opacity: 0
+        }
+    }
+
+    return (
+        <>
+            <CopyToClipboardComponent text={text} onCopy={handleCopy}>
+                <IoIosCopy className={`input-icon hover:cursor-pointer ${iconClasses}`} />
+            </CopyToClipboardComponent>
+            <motion.div
+                variants={variants}
+                initial='hidden'
+                animate={showAlert ? 'show' : 'fade'}
+                onAnimationComplete={() => {
+                    if (showAlert)
+                        setTimeout(() => setShowAlert(false), 2000)
+                }}
+                className={`absolute rounded-xl text-center bg-black text-white w-full p-16 ${className} ${alertClasses}`}>Copied to clipboard <IoIosCopy className='align-middle' />
+            </motion.div >
+        </>
+    )
+}