tsms/src/components/EditUser/UserDetail.tsx

"use client";

import { UserResult } from "@/app/api/user";
import { UserInputs } from "@/app/api/user/actions";
import {
  Card,
  CardContent,
  Grid,
  Stack,
  TextField,
  Typography,
} from "@mui/material";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";

interface Props {
    data: UserResult
}


const UserDetail: React.FC<Props> = ({
    data
}) => {
  const { t } = useTranslation();
  const {
    register,
    formState: { errors },
    control,
  } = useFormContext<UserInputs>();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("User Detail")}
        </Typography>
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs={6}>
            <TextField
              label={t("username")}
              fullWidth
              {...register("name", {
                required: "username required!",
              })}
              error={Boolean(errors.name)}
            />
          </Grid>
          <Grid item xs={6}>
            <TextField
              label={t("email")}
              fullWidth
              {...register("email", {
                required: "email required!",
              })}
              error={Boolean(errors.email)}
            />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  );
};

export default UserDetail;