File size: 2,309 Bytes
1067b6f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | "use client";
import { Store } from "@/db/schema";
import { useState } from "react";
import { TextInputWithLabel } from "../text-input-with-label";
import { Button } from "../ui/button";
import { apiRoutes } from "@/lib/routes";
import { toast } from "../ui/use-toast";
import { Loader2 } from "lucide-react";
import { type updateStore } from "@/server-actions/store";
export const EditStoreFields = (props: {
storeDetails: Store;
updateStore: typeof updateStore;
}) => {
const [isLoading, setIsLoading] = useState(false);
const [formValues, setFormValues] = useState<Record<string, string | null>>({
name: props.storeDetails.name,
industry: props.storeDetails.industry,
description: props.storeDetails.description,
});
const handleUpdateDetails = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsLoading(true);
props
.updateStore({
name: formValues.name,
industry: formValues.industry,
description: formValues.description,
})
.then((res) => {
setIsLoading(false);
toast({
title: res.message,
description: res.action,
});
});
};
return (
<form className="flex flex-col gap-6" onSubmit={handleUpdateDetails}>
<div className="grid grid-cols-2 gap-8 items-start">
<div className="flex flex-col justify-between h-full">
<TextInputWithLabel
required
type="text"
label="Store Name"
id="name"
state={formValues}
setState={setFormValues}
/>
<TextInputWithLabel
type="text"
label="Industry"
id="industry"
state={formValues}
setState={setFormValues}
/>
</div>
<TextInputWithLabel
type="text"
inputType="textarea"
label="Store Description"
id="description"
state={formValues}
setState={setFormValues}
rows="5"
/>
</div>
<div className="flex items-center justify-end">
<Button className="flex gap-2" disabled={isLoading}>
{!!isLoading && <Loader2 size={18} className="animate-spin" />}
Save
</Button>
</div>
</form>
);
};
|