Added submission page.

package.json

@@ -12,20 +12,27 @@
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.186.0",
+    "@next/env": "^12.3.1",
     "@supabase/auth-helpers-nextjs": "^0.2.9",
     "@supabase/auth-helpers-react": "^0.2.3",
     "@supabase/supabase-js": "^1.35.7",
+    "hash-wasm": "^4.9.0",
     "next": "12.3.1",
     "next-seo": "^5.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.4.0",
     "react-query": "^3.39.2",
-    "react-transition-group": "^4.4.5"
+    "react-textarea-autosize": "^8.3.4",
+    "react-transition-group": "^4.4.5",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/node": "^18.7.2",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
+    "@types/uuid": "^8.3.4",
     "eslint": "8.23.1",
     "eslint-config-next": "12.3.1",
     "eslint-config-prettier": "^8.5.0",

public/sitemap.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://abitofpersonal.space</loc><lastmod>2022-10-10T08:29:19.127Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://abitofpersonal.space/about</loc><lastmod>2022-10-10T08:29:19.127Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://abitofpersonal.space</loc><lastmod>2022-10-10T21:37:38.287Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://abitofpersonal.space/about</loc><lastmod>2022-10-10T21:37:38.287Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://abitofpersonal.space/submit</loc><lastmod>2022-10-10T21:37:38.287Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>

src/components/FileUpload/FileUpload.module.scss

@@ -0,0 +1,89 @@
+@import '../../styles/mixins';
+
+.file_input {
+  flex: 1;
+  width: 100%;
+  border: $border;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out,
+    background-position 0.3s ease-in-out;
+  background: linear-gradient(to right, $highlight 50%, white 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  letter-spacing: -1px;
+  white-space: nowrap;
+  min-width: 100px;
+  overflow: hidden;
+  position: relative;
+
+  &:hover {
+    transform: scale(0.95);
+    opacity: 1;
+  }
+}
+
+.file_input_filled {
+  @extend .file_input;
+  opacity: 1;
+  transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out,
+    background-position 0.5s ease-in-out;
+
+  &::after {
+    position: absolute;
+    width: calc(100% - 6px);
+    height: calc(100% - 6px);
+    top: 3px;
+    left: 3px;
+    content: ' ';
+    border: 1px solid $highlight;
+    border-radius: 5px;
+  }
+  overflow: hidden;
+}
+
+.file_input_real {
+  display: none;
+}
+
+.file_input_real_populated {
+  display: none;
+  pointer-events: none;
+}
+
+.file_icon {
+  border-left: $border;
+  background-color: white;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  padding: 5px 10px;
+  cursor: pointer;
+  pointer-events: all;
+
+  & svg {
+    transform-origin: 50% 50%;
+    transition: transform 0.1s ease-in-out;
+  }
+
+  &:hover svg {
+    transform: scale(1.2);
+  }
+}
+
+.file_title {
+  position: absolute;
+  bottom: 7px;
+  left: 10px;
+  z-index: 1;
+  opacity: 0.5;
+  font-style: italic;
+}

src/components/FileUpload/FileUpload.tsx

@@ -0,0 +1,71 @@
+/*
+ * FileUpload.tsx
+ * author: evan kirkiles
+ * created on Thu Aug 25 2022
+ * 2022 the nobot space,
+ */
+import s from './FileUpload.module.scss';
+import { FiX, FiCheckCircle, FiUpload } from 'react-icons/fi';
+import {
+  ChangeEventHandler,
+  HTMLAttributes,
+  MouseEventHandler,
+  useRef,
+} from 'react';
+
+type FileUploadProps = {
+  file: File | null;
+  setFile: (newFile: File | null) => void;
+  accept?: string;
+  children?: React.ReactNode;
+  style?: HTMLAttributes<HTMLLabelElement>['style'];
+  required?: boolean;
+};
+
+const FileUpload: React.FC<FileUploadProps> = function FileUpload({
+  file,
+  accept,
+  setFile,
+  children,
+  style,
+  required,
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
+    if (!event.target.files) return;
+    setFile(event.target.files[0]);
+  };
+
+  const onClearClick: MouseEventHandler = (event) => {
+    event.stopPropagation();
+    setFile(null);
+    if (inputRef.current) inputRef.current.value = '';
+  };
+
+  return (
+    <>
+      <label
+        className={file ? s.file_input_filled : s.file_input}
+        onClick={() => {
+          if (!inputRef.current) return;
+          inputRef.current.click();
+        }}
+        style={style}
+      >
+        {children}
+        <div className={s.file_title}>{file?.name}</div>
+      </label>
+      <input
+        type="file"
+        multiple={false}
+        ref={inputRef}
+        accept={accept}
+        className={file ? s.file_input_real_populated : s.file_input_real}
+        onChange={onChange}
+        required={required}
+      />
+    </>
+  );
+};
+
+export default FileUpload;

src/components/Header/Header.module.scss

@@ -49,3 +49,11 @@
   gap: 10px;
   cursor: pointer;
 }
+
+.internal_link {
+  cursor: pointer;
+
+  &:hover {
+    border-bottom: $border;
+  }
+}

src/components/Header/Header.tsx

@@ -5,7 +5,6 @@
  * 2022 the nobot space,
  */
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
 import Logo from '../Logo/Logo';
 import s from './Header.module.scss';
 
@@ -20,13 +19,13 @@ const Header: React.FC = function Header() {
         </Link>
         <div style={{ flex: 1 }}></div>
         <Link href="/submit">
-          <div>submit</div>
+          <div className={s.internal_link}>submit</div>
         </Link>
         <Link href="/about">
-          <div>about</div>
+          <div className={s.internal_link}>about</div>
         </Link>
         <Link href="/credits">
-          <div>credits</div>
+          <div className={s.internal_link}>credits</div>
         </Link>
       </div>
     </div>