Skip to content

Commit

Permalink
clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@ItsPi3141
ItsPi3141 committed Sep 6, 2024
1 parent e13d2b0 commit ec0f4af
Show file tree
Hide file tree
Showing 8 changed files with 1,150 additions and 981 deletions.
98 changes: 45 additions & 53 deletions app/components/fileupload.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import "./fileupload.css";

let closeInter = 0;
export function FileUpload({ onUpload }) {
export default function FileUpload({ onUpload }) {
const [visible, setVisible] = useState(false);
const [error, setError] = useState(false);

Expand Down Expand Up @@ -52,13 +52,34 @@ export function FileUpload({ onUpload }) {
>
{/* Sparkle effects container */}
<div>
<div className="sparkle-white upload-effect" style={{ bottom: "-40px", right: "-15px" }} />
<div className="sparkle-white upload-effect" style={{ top: "-67px", right: "12px" }} />
<div className="light-white upload-effect" style={{ top: "24px", right: "-35px" }} />
<div className="light-white upload-effect" style={{ top: "-32px", left: "-10px" }} />
<div className="cross-white upload-effect" style={{ right: "100px", bottom: "-35px" }} />
<div className="cross-white upload-effect" style={{ left: "-70px", bottom: "50px" }} />
<div className="pop-white upload-effect" style={{ bottom: "-40px", left: "50px" }} />
<div
className="sparkle-white upload-effect"
style={{ bottom: "-40px", right: "-15px" }}
/>
<div
className="sparkle-white upload-effect"
style={{ top: "-67px", right: "12px" }}
/>
<div
className="light-white upload-effect"
style={{ top: "24px", right: "-35px" }}
/>
<div
className="light-white upload-effect"
style={{ top: "-32px", left: "-10px" }}
/>
<div
className="cross-white upload-effect"
style={{ right: "100px", bottom: "-35px" }}
/>
<div
className="cross-white upload-effect"
style={{ left: "-70px", bottom: "50px" }}
/>
<div
className="pop-white upload-effect"
style={{ bottom: "-40px", left: "50px" }}
/>
</div>
{/* Upload box */}
<div className="flex flex-col justify-center items-center border-[#fff6] border-2 border-dashed rounded-md w-full h-full">
Expand All @@ -79,60 +100,31 @@ export function FileUpload({ onUpload }) {
</div>
</div>
</div>
<p className="font-bold text-2xl">{error ? "Invalid file format" : "Upload image"}</p>
<p className="text-sm">{error ? "Please select a valid image file" : "Drop your avatar here to use it"}</p>
<p className="font-bold text-2xl">
{error ? "Invalid file format" : "Upload image"}
</p>
<p className="text-sm">
{error
? "Please select a valid image file"
: "Drop your avatar here to use it"}
</p>
</div>
</div>
)}
</div>
);
}

// function DocumentSvg() {
// return (
// <svg fill="none" height="96" viewBox="0 0 72 96" width="72" xmlns="http://www.w3.org/2000/svg">
// <path
// d="m72 29.3v60.3c0 2.24 0 3.36-.44 4.22-.38.74-1 1.36-1.74 1.74-.86.44-1.98.44-4.22.44h-59.2c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-83.2c0-2.24 0-3.36.44-4.22.38-.74 1-1.36 1.74-1.74.86-.44 1.98-.44 4.22-.44h36.3c1.96 0 2.94 0 3.86.22.5.12.98.28 1.44.5v16.88c0 2.24 0 3.36.44 4.22.38.74 1 1.36 1.74 1.74.86.44 1.98.44 4.22.44h16.88c.22.46.38.94.5 1.44.22.92.22 1.9.22 3.86z"
// fill="#d3d6fd"
// />
// <path
// d="m68.26 20.26c1.38 1.38 2.06 2.06 2.56 2.88.18.28.32.56.46.86h-16.88c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-16.880029c.3.14.58.28.86.459999.82.5 1.5 1.18 2.88 2.56z"
// fill="#939bf9"
// />
// <path
// clip-rule="evenodd"
// d="m56 40h-16v4h16zm0 12h-16v4h16zm-40 12h40v4h-40zm40 12h-40v4h40zm-30-20h-4v-12h-6v-4h16v4h-6z"
// fill="#5865f2"
// fill-rule="evenodd"
// />
// </svg>
// );
// }

// function CodeSvg() {
// return (
// <svg fill="none" height="96" viewBox="0 0 72 96" width="72" xmlns="http://www.w3.org/2000/svg">
// <path
// d="m72 29.3v60.3c0 2.24 0 3.36-.44 4.22-.38.74-1 1.36-1.74 1.74-.86.44-1.98.44-4.22.44h-59.2c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-83.2c0-2.24 0-3.36.44-4.22.38-.74 1-1.36 1.74-1.74.86-.44 1.98-.44 4.22-.44h36.3c1.96 0 2.94 0 3.86.22.5.12.98.28 1.44.5v16.88c0 2.24 0 3.36.44 4.22.38.74 1 1.36 1.74 1.74.86.44 1.98.44 4.22.44h16.88c.22.46.38.94.5 1.44.22.92.22 1.9.22 3.86z"
// fill="#d3d6fd"
// />
// <path
// d="m68.26 20.26c1.38 1.38 2.06 2.06 2.56 2.88.18.28.32.56.46.86h-16.88c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-16.880029c.3.14.58.28.86.459999.82.5 1.5 1.18 2.88 2.56z"
// fill="#939bf9"
// />
// <path
// clip-rule="evenodd"
// d="m23.7 40.46c.66-.28 1.32-.38 1.98-.42.62-.04 1.38-.04 2.26-.04h.06v4c-.96 0-1.58 0-2.04.02-.46.04-.64.08-.72.12-.48.2-.88.6-1.08 1.08-.04.1-.08.26-.12.72-.04.48-.04 1.1-.04 2.06v6.06c0 .88 0 1.64-.04 2.26-.06.66-.14 1.32-.42 1.98-.26.64-.64 1.2-1.1 1.7.46.5.84 1.06 1.1 1.7.28.66.38 1.32.42 1.98.04.62.04 1.38.04 2.26v6.06c0 .96 0 1.58.02 2.04.04.46.08.64.12.72.2.48.6.88 1.08 1.08.1.04.26.08.72.12.48.04 1.1.04 2.06.04v4h-.06c-.88 0-1.64 0-2.26-.04-.66-.06-1.32-.14-1.98-.42-1.46-.6-2.64-1.76-3.24-3.24-.28-.66-.38-1.32-.42-1.98-.04-.62-.04-1.38-.04-2.26v-6.06c0-.96 0-1.58-.02-2.04-.04-.46-.08-.64-.12-.72-.2-.48-.6-.88-1.08-1.08-.1-.04-.26-.08-.72-.12-.48-.04-1.1-.04-2.06-.04v-4c.96 0 1.58 0 2.04-.02.46-.04.64-.08.72-.12.48-.2.88-.58 1.08-1.08.04-.1.08-.26.12-.72.04-.48.04-1.1.04-2.06v-6.06c0-.88 0-1.64.04-2.26.06-.66.14-1.32.42-1.98.6-1.46 1.76-2.64 3.24-3.24zm29.52 17.38c.1.04.26.08.72.12.48.04 1.1.04 2.06.04v4c-.96 0-1.58 0-2.04.02-.46.04-.64.08-.72.12-.48.2-.88.6-1.08 1.08-.04.1-.08.26-.12.72-.04.48-.04 1.1-.04 2.06v6.06c0 .88 0 1.64-.04 2.26-.06.66-.14 1.32-.42 1.98-.6 1.46-1.78 2.64-3.24 3.24-.66.28-1.32.38-1.98.42-.62.04-1.38.04-2.26.04h-.06v-4c.96 0 1.58 0 2.04-.02.46-.04.64-.08.72-.12.48-.2.88-.58 1.08-1.08.04-.1.08-.26.12-.72.04-.48.04-1.1.04-2.06v-6.06c0-.88 0-1.64.04-2.26.06-.66.16-1.32.42-1.98.26-.64.64-1.2 1.1-1.7-.46-.5-.84-1.06-1.1-1.7-.28-.66-.38-1.32-.42-1.98-.04-.62-.04-1.38-.04-2.26v-6.06c0-.96 0-1.58-.02-2.04-.04-.46-.08-.64-.12-.72-.2-.48-.6-.88-1.08-1.08-.1-.04-.26-.08-.72-.12-.48-.04-1.1-.04-2.06-.04v-4h.06c.88 0 1.64 0 2.26.04.66.06 1.32.14 1.98.42 1.46.6 2.64 1.76 3.24 3.24.28.66.38 1.32.42 1.98.04.62.04 1.38.04 2.26v6.06c0 .96 0 1.58.02 2.04.04.46.08.64.12.72.2.48.6.88 1.08 1.08z"
// fill="#5865f2"
// fill-rule="evenodd"
// />
// </svg>
// );
// }

function ImageSvg() {
return (
<svg fill="none" height="96" viewBox="0 0 72 96" width="72" xmlns="http://www.w3.org/2000/svg">
<svg
aria-hidden="true"
fill="none"
height="96"
viewBox="0 0 72 96"
width="72"
xmlns="http://www.w3.org/2000/svg"
>
<clipPath id="a">
<path d="m0 0h72v96h-72z" />
</clipPath>
Expand Down
16 changes: 14 additions & 2 deletions app/components/image.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
const baseImgUrl = process.env.NEXT_PUBLIC_BASE_IMAGE_URL || "";

export function Image(props) {
return <img {...props} src={props.src.startsWith("http") || props.src.startsWith("data:") || props.src === "" ? props.src : `${baseImgUrl}${props.src}`} />;
export default function Image(props) {
return (
<img
{...props}
alt=""
src={
props.src.startsWith("http") ||
props.src.startsWith("data:") ||
props.src === ""
? props.src
: `${baseImgUrl}${props.src}`
}
/>
);
}
51 changes: 32 additions & 19 deletions app/components/modal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,66 @@
export function Modal(props) {
export default function Modal(props) {
return (
<div
className="fixed top-0 left-0 w-screen h-screen flex justify-center items-center bg-[#000d] select-none"
className="top-0 left-0 fixed flex justify-center items-center bg-[#000d] w-screen h-screen select-none"
style={{
transition: "opacity 0.2s ease-in-out",
opacity: props.visible ? 1 : 0,
pointerEvents: props.visible ? "" : "none"
pointerEvents: props.visible ? "" : "none",
}}
>
<div
className="modal-box xs:w-[420px] xs:min-h-[400px] w-screen min-h-screen bg-surface4 text-white xs:rounded-lg overflow-hidden flex flex-col relative"
className="relative flex flex-col bg-surface4 xs:rounded-lg w-screen xs:w-[420px] min-h-screen xs:min-h-[200px] text-white overflow-hidden modal-box"
style={{
transition: "all 0.2s ease-in-out",
scale: props.visible ? 1 : 0,
transform: props.visible ? "translateY(0)" : "translateY(100%)"
transform: props.visible ? "translateY(0)" : "translateY(100%)",
}}
>
<button
className="absolute top-4 right-4 text-secondaryAlt hover:text-white transition-colors [transition-duration:200ms]"
type="button"
className="top-4 right-4 absolute text-secondaryAlt hover:text-white transition-colors [transition-duration:200ms]"
onClick={props.onClose}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
>
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"
></path>
/>
</svg>
</button>
{props.title && (
<div className="pt-8 flex justify-center">
<p className="text-2xl font-semibold [letter-spacing:.02em] text-center">{props.title}</p>
<div className="flex justify-center pt-8">
<p className="font-semibold text-2xl [letter-spacing:.02em] text-center">
{props.title}
</p>
</div>
)}
{props.subtitle && (
<div className="flex justify-center px-4">
<p className="text-white text-opacity-70 text-center xs:text-base text-sm">{props.subtitle}</p>
<p className="text-center text-sm text-white/70 xs:text-base">
{props.subtitle}
</p>
</div>
)}
<div className="grow p-4 flex flex-col justify-stretch">{props.children}</div>
<div className="bg-surface3 p-4 h-[70px] flex justify-end">
<div className="flex flex-col justify-stretch p-4 grow">
{props.children}
</div>
<div className="flex justify-end bg-surface3 p-4 h-[70px]">
{props.secondaryText && (
<button
type="button"
className="px-6 py-2 rounded text-sm text-white/70 hover:underline transition"
onClick={props.onClose}
>
{props.secondaryText || "Cancel"}
</button>
)}
<button
className="bg-primary hover:bg-primaryAlt py-2 px-4 rounded transition"
type="button"
className="bg-primary hover:bg-primaryAlt px-6 py-2 rounded text-sm transition"
onClick={props.onClose}
>
Close
{props.closeText || "Close"}
</button>
</div>
</div>
Expand Down
Loading

0 comments on commit ec0f4af

Please sign in to comment.