svrjs-nextjs-website/app/(auth)/admin/downloads/page.tsx

132 lines
3.5 KiB
TypeScript
Raw Normal View History

2024-06-20 17:37:45 +02:00
"use client";
2024-06-20 19:46:48 +02:00
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form";
2024-06-20 17:37:45 +02:00
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
2024-06-20 19:46:48 +02:00
import { UploadButton, UploadDropzone } from "@/lib/uploadthing";
import { downloadSchema } from "@/lib/validations/validation";
2024-06-20 17:37:45 +02:00
2024-06-20 19:46:48 +02:00
const AdminPage = () => {
2024-06-20 17:37:45 +02:00
const form = useForm<z.infer<typeof downloadSchema>>({
resolver: zodResolver(downloadSchema),
2024-06-26 21:47:18 +02:00
defaultValues: {
fileName: "",
version: "",
downloadLink: "",
fileSize: "",
},
2024-06-20 17:37:45 +02:00
});
2024-06-20 19:46:48 +02:00
const onSubmit: SubmitHandler<z.infer<typeof downloadSchema>> = async (
data
) => {
const response = await fetch("/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
});
2024-06-20 17:37:45 +02:00
2024-06-20 19:46:48 +02:00
if (response.ok) {
2024-06-20 20:46:05 +02:00
form.reset();
2024-06-20 19:46:48 +02:00
console.log("Upload successful");
alert("Uploaded");
} else {
console.error("Upload failed");
alert("Upload Failed");
}
};
2024-06-20 17:37:45 +02:00
2024-06-20 19:46:48 +02:00
return (
2024-06-26 21:47:18 +02:00
<section id="downloads-page" className="wrapper container">
<h1 className="text-3xl font-bold py-6">Mods Form</h1>
2024-06-20 19:46:48 +02:00
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="fileName"
render={({ field }) => (
<FormItem>
<FormLabel>File Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="version"
render={({ field }) => (
<FormItem>
<FormLabel>Version</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="downloadLink"
render={({ field }) => (
<FormItem>
<FormLabel>Download Link</FormLabel>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
field.onChange(res[0].url);
}}
onUploadError={(error: Error) => {
alert(`ERROR! ${error.message}`);
}}
/>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="fileSize"
render={({ field }) => (
<FormItem>
<FormLabel>File Size</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type="submit"
className="w-full text-lg rounded-full"
size={"lg"}
2024-06-20 17:37:45 +02:00
>
2024-06-20 19:46:48 +02:00
Submit
</Button>
</form>
</Form>
2024-06-20 17:37:45 +02:00
</section>
);
};
2024-06-20 19:46:48 +02:00
export default AdminPage;