69 lines
3.3 KiB
JavaScript
69 lines
3.3 KiB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
|
|
import { I as InputError } from "./input-error-D1JIzedA.js";
|
|
import { L as LoadingButton } from "./loading-button-CCIxhJrY.js";
|
|
import { C as Card } from "./card-B-gBwpxd.js";
|
|
import { I as Input } from "./input-BsvJqbcd.js";
|
|
import { usePage, useForm } from "@inertiajs/react";
|
|
import { Camera } from "lucide-react";
|
|
import { useState } from "react";
|
|
import "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "./button-CdJZJLGw.js";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
const Profile = () => {
|
|
const { props } = usePage();
|
|
const { translate } = props;
|
|
const { input, button, common, dashboard } = translate;
|
|
const { name, photo } = props.auth.user;
|
|
const [imageUrl, setImageUrl] = useState(photo);
|
|
const { data, setData, post, errors, clearErrors, processing } = useForm({
|
|
name,
|
|
photo: null
|
|
});
|
|
const submit = (e) => {
|
|
e.preventDefault();
|
|
clearErrors();
|
|
post(route("settings.profile"));
|
|
};
|
|
const handleImageChange = (e) => {
|
|
const files = e.target.files;
|
|
if (files && files[0]) {
|
|
setData("photo", files[0]);
|
|
setImageUrl(URL.createObjectURL(files[0]));
|
|
}
|
|
};
|
|
return /* @__PURE__ */ jsx(Card, { className: "p-4 sm:p-6", children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "flex flex-col items-center gap-6 md:flex-row", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center text-center md:max-w-[250px]", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "relative mb-4 h-[100px] w-[100px] md:h-[120px] md:w-[120px]", children: [
|
|
imageUrl ? /* @__PURE__ */ jsx("img", { alt: "item-1", src: imageUrl, className: "h-[100px] w-[100px] rounded-full md:h-[120px] md:w-[120px]" }) : /* @__PURE__ */ jsx("div", { className: "h-[100px] w-[100px] rounded-full bg-gray-300 md:h-[120px] md:w-[120px]" }),
|
|
/* @__PURE__ */ jsx("label", { htmlFor: "formFileSm", className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 cursor-pointer items-center justify-center rounded-full bg-gray-100", children: /* @__PURE__ */ jsx(Camera, { className: "h-6 w-6 text-gray-500" }) }) }),
|
|
/* @__PURE__ */ jsx("input", { hidden: true, id: "formFileSm", type: "file", onChange: handleImageChange })
|
|
] }),
|
|
/* @__PURE__ */ jsx("small", { className: "text-gray-500", children: dashboard.image_upload_requirements }),
|
|
errors.photo && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: errors.photo })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "w-full", children: [
|
|
/* @__PURE__ */ jsxs("div", { className: "mt-6 mb-10", children: [
|
|
/* @__PURE__ */ jsx(
|
|
Input,
|
|
{
|
|
required: true,
|
|
type: "name",
|
|
name: "name",
|
|
value: data.name,
|
|
placeholder: input.name_placeholder,
|
|
onChange: (e) => setData("name", e.target.value)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(InputError, { message: errors.name, className: "mt-2" })
|
|
] }),
|
|
/* @__PURE__ */ jsx(LoadingButton, { loading: processing, className: "h-9 w-full", children: button.save_changes })
|
|
] })
|
|
] }) });
|
|
};
|
|
export {
|
|
Profile as default
|
|
};
|