-
Notifications
You must be signed in to change notification settings - Fork 264
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' into feat/HNG-user-dashboard-page-layout
Signed-off-by: Eva Raymond <[email protected]>
- Loading branch information
Showing
24 changed files
with
1,106 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
128 changes: 128 additions & 0 deletions
128
src/app/dashboard/(user-dashboard)/products/[productId]/form-images/project-logo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,128 @@ | ||
| import { X } from "lucide-react"; | ||
| import React, { useState } from "react"; | ||
| import { UseFormReturn } from "react-hook-form"; | ||
|
|
||
| import BlurImage from "~/components/miscellaneous/blur-image"; | ||
| import { Button } from "~/components/ui/button"; | ||
| import { cn } from "~/lib/utils"; | ||
| import { EditProduct } from "../../_components/schema/schema"; | ||
|
|
||
| type Properties = { | ||
| form: UseFormReturn<EditProduct>; | ||
| name: string; | ||
| }; | ||
| const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| event.preventDefault(); | ||
| }; | ||
| const ProjectLogo = ({ form, name }: Properties) => { | ||
| const [isDragging, setIsDragging] = useState(false); | ||
|
|
||
| const projectLogo = form.getValues("media"); | ||
|
|
||
| const handleDrop = (event: React.DragEvent<HTMLDivElement>) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
|
|
||
| const target = event.dataTransfer.files[0] as File; | ||
|
|
||
| if (target.type === "image/gif") { | ||
| return name; | ||
| } | ||
| const event_data = { | ||
| target: { | ||
| files: event.dataTransfer.files, | ||
| }, | ||
| }; | ||
| handleImageChange( | ||
| event_data as unknown as React.ChangeEvent<HTMLInputElement>, | ||
| ); | ||
| setIsDragging(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="relative grid h-full w-[inherit] place-items-center rounded-xl bg-[#FAFAFA]"> | ||
| <div | ||
| data-upload | ||
| className="flexx absolute inset-0 z-10 hidden items-center justify-center rounded-xl bg-white/30 text-black" | ||
| > | ||
| <div className="grid h-full w-full place-items-center rounded-xl bg-white/80 uppercase backdrop-blur-xl"> | ||
| <p className="items-center md:flex md:flex-col"> | ||
| <span className="animate-pulse md:text-xs">Uploading...</span>{" "} | ||
| <b>10%</b> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| {isDragging && ( | ||
| <div className="pointer-events-none absolute inset-0 z-20 grid h-full w-full scale-95 place-items-center rounded-xl border-2 border-dashed border-white bg-white/20 backdrop-blur-xl"> | ||
| <p className="text-xl text-white">Drop to upload</p> | ||
| </div> | ||
| )} | ||
|
|
||
| {projectLogo.url && typeof projectLogo.url === "string" ? ( | ||
| <div className="absolute inset-0 h-full w-full rounded-xl"> | ||
| <div className="h-full w-full overflow-hidden rounded-xl"> | ||
| <BlurImage | ||
| src={projectLogo.url} | ||
| width={500} | ||
| height={500} | ||
| alt="nft" | ||
| className={cn( | ||
| "size-full object-cover transition-all duration-300", | ||
| )} | ||
| /> | ||
| </div> | ||
| <Button | ||
| disabled={false} | ||
| variant={"ghost"} | ||
| size={"icon"} | ||
| type="button" | ||
| className="absolute right-1 top-1 rounded-full bg-black/40 p-1 backdrop-blur-xl hover:bg-red-500 hover:text-white disabled:cursor-not-allowed disabled:bg-black/40 md:-right-1 md:-top-1 md:bg-white/20 md:disabled:bg-white/20" | ||
| > | ||
| <X className="size-8 min-[500px]:size-10" /> | ||
| </Button> | ||
| </div> | ||
| ) : ( | ||
| <div | ||
| onDrop={handleDrop} | ||
| onDragOver={(event) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| setIsDragging(true); | ||
| }} | ||
| onDragLeave={(event) => { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| setIsDragging(false); | ||
| }} | ||
| className="grid h-full w-full place-items-center" | ||
| > | ||
| <label | ||
| className="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-y-2 text-neutral-dark-1 hover:text-black" | ||
| htmlFor={`media`} | ||
| > | ||
| <Button | ||
| type="button" | ||
| variant={"secondary"} | ||
| size={"sm"} | ||
| className="pointer-events-none flex !h-[32px] items-center bg-white text-sm text-[#0F172A] shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)]" | ||
| > | ||
| Upload New | ||
| </Button> | ||
| <p className="text-xs md:text-sm">Add Image or drag it here</p> | ||
| </label> | ||
| <input | ||
| type="file" | ||
| hidden | ||
| accept=" image/*" | ||
| name={`media`} | ||
| id={`media`} | ||
| onChange={handleImageChange} | ||
| /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProjectLogo; |
16 changes: 16 additions & 0 deletions
16
src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { notFound } from "next/navigation"; | ||
|
|
||
| import ProductDetailsContent from "./product-details-content"; | ||
|
|
||
| const ProductDetailsPage = async ({ | ||
| params, | ||
| }: { | ||
| params: { productId: string }; | ||
| }) => { | ||
| const id = params.productId; | ||
| if (!id) return notFound(); | ||
|
|
||
| return <ProductDetailsContent productId={id} />; | ||
| }; | ||
|
|
||
| export default ProductDetailsPage; |
Oops, something went wrong.