moved uploading to new page (#565)

pages/hemsedal24/lastopp.tsx

@@ -0,0 +1 @@
+export {default} from 'src/hemsedal24/upload'

src/hemsedal24/bilder.module.css

@@ -3,34 +3,66 @@
   margin-left: 3rem;
   margin-right: 3rem;
 }
-.tilbake {
+.tilbake,
+.lastoppbilder {
   color: var(--color-standard__black);
   margin-bottom: 2rem;
   width: 30%;
   z-index: 1;
   display: flex;
   gap: 5%;
   flex-direction: row;
-  justify-content: flex-start;
   text-decoration: none;
 }
+.tilbake {
+  justify-content: flex-start;
+}
+.lastoppbilder {
+  justify-content: flex-end;
+}
 
-.tilbake span {
+.tilbake span,
+.lastoppbilder span {
   color: var(--color-standard__black);
   padding: 0 6px 0 0;
   font-weight: 400;
   font-family: 'Graphik Web';
 }
 
-.tilbake img {
+.tilbake img,
+.lastoppbilder img {
   vertical-align: middle;
 }
 
-.tilbake a {
+.tilbake a,
+.lastoppbilder a {
   margin-left: 6rem;
   margin-right: 4rem;
   text-decoration: none;
 }
+
+.links {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.links a .child:nth-child(2) {
+  align-items: flex-end;
+}
+
+.uploadSite {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 40rem;
+  margin: 3rem;
+}
+
+.linksUploadsite {
+  width: 100%;
+}
 .uploadDropZone {
   z-index: 1;
 }
@@ -44,7 +76,7 @@
   width: 25rem;
   background-color: none;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
 }
 
 /* applied to button */
@@ -208,7 +240,7 @@ html {
     grid-template-columns: repeat(3, 1fr);
   }
 
-  .uploadDropZone {
+  /*   .uploadDropZone {
     position: fixed;
     bottom: 5%;
     left: 50%;
@@ -220,7 +252,7 @@ html {
     width: auto;
     padding: 0;
     margin: 0;
-  }
+  } */
   .customButton {
     align-items: center;
     justify-content: center;
@@ -249,6 +281,10 @@ html {
     width: 100%;
   }
 
+  .lastoppbilder img {
+    width: 120%;
+  }
+
   @-moz-document url-prefix() {
     .uploadDropZone {
       margin-bottom: 1rem;

src/hemsedal24/bilder.tsx

@@ -1,11 +1,12 @@
-import { UploadButton } from '../../src/utils/uploadthing';
+
 import styles from './bilder.module.css';
 import React, { useEffect, useState } from 'react';
 import Files from './components/Files';
 import '@uploadthing/react/styles.css';
 import bop from './images/bop.svg';
 import Link from 'next/link';
 import arrowLeft from './images/arrow-left.svg'
+import bildeopplastning from './images/bildeopplastning.svg'
 
 export default function Bilder() {
   const [mobile, setMobile] = useState(false);
@@ -35,25 +36,18 @@ console.log((width/21)+(((width / 100) | 0)/4))
   }, []);
   return (
     <main className={styles.main}>
+      <div className={styles.links}>
       <Link className={styles.tilbake} href="/hemsedal24">
           <img src={arrowLeft} width={24} height={28} alt="pil venste" />
           <span>Tilbake</span>
         </Link>
+      <Link className={styles.lastoppbilder} href="/hemsedal24/lastopp">
+      <img src={bildeopplastning} alt="knapp til bildeopplastning" />
+      </Link>
+      </div>
       <div id="header" className={styles.header}>
         <h3>{mobile ? `Bild${'e'.repeat((width/24))}r 📸` : 'Bildeeeeeeeeeeeeeeeeeeeer 📸'}</h3>
-        <div className={styles.uploadDropZone}>
-          <UploadButton
-            className={`${styles.customButton}`}
-            appearance={{container:"items-end"}}
-            /**
-             * @see https://docs.uploadthing.com/api-reference/react#uploadbutton
-             */
-            endpoint="videoAndImage"
-            onClientUploadComplete={(_: any) => {
-              fetchFiles();
-            }}
-          />
-        </div>
+
       </div>
       {filesData && (
         <div>

src/hemsedal24/components/Files.tsx

@@ -4,7 +4,6 @@ import useEmblaCarousel from "embla-carousel-react";
 import styles from '../bilder.module.css'
 import { useState } from "react";
 import Popover from "./Popover"
-
 export default function Files({ data }: any) {
   const [isPopoverOpen, setIsPopoverOpen] = useState("")
   const [startIndex, setStartIndex]= useState(1)

src/hemsedal24/upload.tsx

@@ -0,0 +1,40 @@
+import { UploadButton } from '../../src/utils/uploadthing';
+import styles from './bilder.module.css';
+import '@uploadthing/react/styles.css';
+import Link from 'next/link';
+import arrowLeft from './images/arrow-left.svg';
+
+export default function Upload() {
+  return (
+    <div className={styles.uploadSite}>
+      <div className={styles.linksUploadsite}>
+        <Link className={styles.tilbake} href="/hemsedal24">
+          <img src={arrowLeft} width={24} height={28} alt="pil venste" />
+          <span>Til hjemmeside</span>
+        </Link>
+        <Link className={styles.tilbake} href="/hemsedal24/bilder">
+
+          <img src={arrowLeft} width={24} height={28} alt="pil venste" />
+          <span>Tilbake til bilder</span>
+        </Link>
+      </div>
+      <div className={styles.uploadDropZone}>
+        <UploadButton
+          className={`${styles.customButton}`}
+          appearance={{ container: 'items-center' }}
+          /**
+           * @see https://docs.uploadthing.com/api-reference/react#uploadbutton
+           */
+          endpoint="videoAndImage"
+          onClientUploadComplete={(res: any) => {
+            // Do something with the response
+            console.log('Files: ', res);
+          }}
+          onUploadError={(error: Error) => {
+            alert(`En feil har skjedd. Feilmelding: ${error.message}`);
+          }}
+        />
+      </div>
+    </div>
+  );
+}