Skip to content

Commit

Permalink
Merge branch 'hngprojects:dev' into feat/HNG-create-superadmin-settin…
Browse files Browse the repository at this point in the history
…gs-page-team-KIMIKO
  • Loading branch information
abanicaisse authored Jul 29, 2024
2 parents 77f6760 + 10028cd commit b49a21a
Show file tree
Hide file tree
Showing 16 changed files with 939 additions and 58 deletions.
3 changes: 2 additions & 1 deletion src/app/(auth-routes)/login/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ const LoginPage = () => {
/>
Sign in with Google
</Button>

<Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src={Facebook}
Expand All @@ -118,7 +119,7 @@ const LoginPage = () => {
alt="Facebook"
className="mr-2"
/>
Sign in with Google
Sign in with facebook
</Button>
</div>

Expand Down
132 changes: 104 additions & 28 deletions src/app/(auth-routes)/register/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,13 @@

import { zodResolver } from "@hookform/resolvers/zod";
import { DialogContent, DialogTitle } from "@radix-ui/react-dialog";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

import CustomButton from "~/components/common/common-button/common-button";
import { DialogDemo } from "~/components/common/Dialog";
import { Button } from "~/components/ui/button";
import {
Form,
FormControl,
Expand All @@ -24,6 +23,8 @@ import {
InputOTPGroup,
InputOTPSlot,
} from "~/components/ui/input-otp";
import { useToast } from "~/components/ui/use-toast";
import { getApiUrl } from "../../../utils/getApiUrl";

const formSchema = z.object({
fullname: z.string().min(2, {
Expand All @@ -40,6 +41,26 @@ const formSchema = z.object({
type FormData = z.infer<typeof formSchema>;

const SignUp = () => {
const [apiUrl, setApiUrl] = useState("");
const { toast } = useToast();

useEffect(() => {
const fetchApiUrl = async () => {
try {
const url = await getApiUrl();
setApiUrl(url);
} catch {
toast({
title: "Error",
description: "Failed to fetch API URL",
variant: "destructive",
});
}
};

fetchApiUrl();
}, [toast]);

const form = useForm<FormData>({
resolver: zodResolver(formSchema),
});
Expand All @@ -53,7 +74,7 @@ const SignUp = () => {
})();
};

const handleSubmit = () => {
const handleSubmit = async () => {
form.handleSubmit(handleFormSubmit)();
};

Expand All @@ -66,26 +87,72 @@ const SignUp = () => {
</p>
</div>
<div className="flex flex-col justify-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
<Button className="flex items-center rounded-md border border-gray-300 bg-white px-4 py-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/google.svg"
width={20}
height={20}
alt="Goggle"
className="mr-2"
/>
Sign in with Google
</Button>
<Button className="flex items-center rounded-md border border-gray-300 bg-white p-4 px-4 text-gray-700 shadow-sm hover:bg-gray-50">
<Image
src="/images/facebook.svg"
width={20}
height={20}
alt="Facebook"
className="mr-2"
/>
Sign in with Google
</Button>
<CustomButton
isDisabled={!apiUrl}
variant="outline"
isLeftIconVisible={true}
href={
apiUrl === ""
? undefined
: `${apiUrl}/api/v1/auth/google?provider=google`
}
icon={
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.3055 10.0415H21.5V10H12.5V14H18.1515C17.327 16.3285 15.1115 18 12.5 18C9.1865 18 6.5 15.3135 6.5 12C6.5 8.6865 9.1865 6 12.5 6C14.0295 6 15.421 6.577 16.4805 7.5195L19.309 4.691C17.523 3.0265 15.134 2 12.5 2C6.9775 2 2.5 6.4775 2.5 12C2.5 17.5225 6.9775 22 12.5 22C18.0225 22 22.5 17.5225 22.5 12C22.5 11.3295 22.431 10.675 22.3055 10.0415Z"
fill="#FFC107"
/>
<path
d="M3.65295 7.3455L6.93845 9.755C7.82745 7.554 9.98045 6 12.5 6C14.0295 6 15.421 6.577 16.4805 7.5195L19.309 4.691C17.523 3.0265 15.134 2 12.5 2C8.65895 2 5.32795 4.1685 3.65295 7.3455Z"
fill="#F97316"
/>
<path
d="M12.5 22.0003C15.083 22.0003 17.43 21.0118 19.2045 19.4043L16.1095 16.7853C15.0718 17.5745 13.8038 18.0014 12.5 18.0003C9.89903 18.0003 7.69053 16.3418 6.85853 14.0273L3.59753 16.5398C5.25253 19.7783 8.61353 22.0003 12.5 22.0003Z"
fill="#4CAF50"
/>
<path
d="M22.3055 10.0415H21.5V10H12.5V14H18.1515C17.7571 15.1082 17.0467 16.0766 16.108 16.7855L16.1095 16.7845L19.2045 19.4035C18.9855 19.6025 22.5 17 22.5 12C22.5 11.3295 22.431 10.675 22.3055 10.0415Z"
fill="#1976D2"
/>
</svg>
}
>
Sign up with Google
</CustomButton>
<CustomButton
isDisabled={!apiUrl}
variant="outline"
isLeftIconVisible={true}
icon={
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_16038_1232)">
<path
d="M24 12.073C24 5.40405 18.6269 -0.00195312 11.9999 -0.00195312C5.36995 -0.000453125 -0.00305176 5.40405 -0.00305176 12.0745C-0.00305176 18.1 4.38595 23.095 10.1219 24.001V15.5635H7.07695V12.0745H10.1249V9.41205C10.1249 6.38655 11.9174 4.71555 14.6579 4.71555C15.9719 4.71555 17.3444 4.95105 17.3444 4.95105V7.92105H15.8309C14.3414 7.92105 13.8764 8.85255 13.8764 9.80805V12.073H17.2034L16.6724 15.562H13.8749V23.9995C19.6109 23.0935 24 18.0985 24 12.073Z"
fill="#1976D2"
/>
</g>
<defs>
<clipPath id="clip0_16038_1232">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
}
>
Sign up with Facebook
</CustomButton>
</div>
<div className="mx-auto py-4 md:w-2/4">
<Form {...form}>
Expand Down Expand Up @@ -157,9 +224,14 @@ const SignUp = () => {
</FormItem>
)}
/>
<Button type="submit" className="w-full" onClick={handleSubmit}>
<CustomButton
variant="primary"
type="submit"
className="w-full"
onClick={handleSubmit}
>
Create Account
</Button>
</CustomButton>
<DialogDemo open={open} onOpenChanged={setOpen}>
<DialogContent
aria-labelledby="dialog-title"
Expand Down Expand Up @@ -188,9 +260,13 @@ const SignUp = () => {
</InputOTPGroup>
))}
</InputOTP>
<Button type="submit" className="w-full">
<CustomButton
variant="primary"
type="submit"
className="w-full"
>
Continue
</Button>
</CustomButton>
<div className="flex flex-col items-center">
<p className="text-xs text-gray-500">
Would you rather use email and password?
Expand Down
24 changes: 13 additions & 11 deletions src/app/(auth-routes)/sign-up/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,19 @@ const page = () => {
Create an account to get started with us.
</p>
<div className="mt-6 flex flex-col items-center gap-2 text-center sm:flex-row md:gap-[18px]">
<button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
<Image
src={"/signup/icons/flat-color-icons_google.svg"}
alt="Google Icon"
width={24}
height={24}
/>
<p className="text-neutralColor-dark-2 font-medium">
Sign in with Google
</p>
</button>
<Link href={process.env.API_URL + "/api/v1/auth/google-login"}>
<button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
<Image
src={"/signup/icons/flat-color-icons_google.svg"}
alt="Google Icon"
width={24}
height={24}
/>
<p className="text-neutralColor-dark-2 font-medium">
Sign in with Google
</p>
</button>
</Link>
<button className="flex w-full flex-row items-center justify-center gap-2.5 rounded-lg border border-border px-4 py-3 md:w-fit md:px-8 md:py-4">
<Image
src={"/signup/icons/bi_facebook.svg"}
Expand Down
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 border border-dashed border-[#CBD5E1] 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 src/app/dashboard/(user-dashboard)/products/[productId]/page.tsx
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;
Loading

0 comments on commit b49a21a

Please sign in to comment.