feat : improve birthdate input

src/app/home/page.tsx

@@ -23,7 +23,7 @@ const MainPage = () => {
  <>
  <Container className="flex flex-col items-center justify-center md:flex-row md:space-x-9">
  <div>
- <div className="flex w-full items-center justify-center rounded-2xl bg-primary-variant-2 md:w-[30vw]">
+ <div className="flex aspect-[4/3] w-full items-center justify-center rounded-2xl bg-primary-variant-2 md:w-[30vw]">
  <img src={JohnjudImage} alt="Johnjud" className="px-10 py-7" />
  </div>
  </div>

src/components/Admin/Pets/Add/DateInputInfo.tsx

@@ -10,10 +10,13 @@ interface DateInputInfoProps {
 }
 
 const DateInputInfo = (props: DateInputInfoProps) => {
+ const maxDate = new Date().toISOString().split("T")[0];
+
  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {
  const date = event.target.value;
  props.onChange(date);
  };
+
  return (
  <div className="grid grid-cols-4 gap-2">
  <div className="flex flex-row items-center">
@@ -28,6 +31,7 @@ const DateInputInfo = (props: DateInputInfoProps) => {
  className="w-full rounded-lg border border-accent-gray-variant px-2 py-1 font-semibold"
  onChange={handleOnChange}
  value={props.value}
+ max={maxDate}
  />
  </div>
  ) : (

src/components/Card/PetCard/index.tsx

@@ -62,8 +62,12 @@ const PetCard = ({
  }, [id]);
 
  const age = useMemo(() => {
- const { years, months } = UtcStringToYearMonth({ utcString: birthDate });
- return years + " ปี " + months + " เดือน";
+ const { years, months, days } = UtcStringToYearMonth({
+ utcString: birthDate,
+ });
+
+ const age = years > 0 ? `${years} ปี ` : "";
+ return age + (months > 0 ? `${months} เดือน ` : `${days} วัน`);
  }, [birthDate]);
 
  const petGender = useMemo(() => {

src/components/Card/SmallPetCard.tsx

@@ -29,8 +29,13 @@ const SmallPetCard = ({
  return "/pets/" + id;
  }, [id]);
 
- const { years, months } = useMemo(() => {
- return UtcStringToYearMonth({ utcString: birthdate });
+ const age = useMemo(() => {
+ const { years, months, days } = UtcStringToYearMonth({
+ utcString: birthdate,
+ });
+
+ const age = years > 0 ? `${years} ปี ` : "";
+ return age + (months > 0 ? `${months} เดือน ` : `${days} วัน`);
  }, [birthdate]);
 
  return (
@@ -66,7 +71,7 @@ const SmallPetCard = ({
  <Icon icon="ph:gift" className="h-5 w-5 text-accent-gray" />
  </div>
  <div className="text-xs font-normal text-accent-gray">
- อายุ {years} ปี {months} เดือน
+ อายุ {age}
  </div>
  </div>
  </div>

src/hooks/mutation/usePostPet.ts

@@ -11,7 +11,7 @@ const useCreatePet = () => {
  toast.success("เพิ่มสัตว์เลี้ยงสำเร็จ");
  setTimeout(() => {
  navigate("/admin/pets");
- }, 2000);
+ }, 1500);
  },
  onError: () => {
  toast.error("มีบางอย่างผิดพลาด");

src/utils/dateConverter.ts

@@ -4,13 +4,11 @@ const UtcStringToYearMonth = ({ utcString }: { utcString: string }) => {
  const birthdate = dayjs(utcString);
  const currentUtcTime = dayjs();
 
- const yearsDifference = currentUtcTime.diff(birthdate, "year");
- const remainingMonths = currentUtcTime.diff(birthdate, "month") % 12;
+ const years = currentUtcTime.diff(birthdate, "year");
+ const months = currentUtcTime.diff(birthdate, "month") % 12;
+ const days = currentUtcTime.diff(birthdate, "day") % 30;
 
- const years = yearsDifference;
- const months = remainingMonths;
-
- return { years, months };
+ return { years, months, days };
 };
 
 const UtcStringToYear = ({ utcString }: { utcString: string }) => {