From 04ba0d3118b2fe9fdaf9574d4a21de89fc8746ed Mon Sep 17 00:00:00 2001 From: TuanVT Date: Fri, 24 Jul 2026 14:39:25 +0700 Subject: [PATCH] feat/update-code --- .../layouts/GridColumn/GridColumn.tsx | 48 +++++++----------- .../page/auth/MainRegister/MainRegister.tsx | 8 +-- .../CreateConsultation/CreateConsultation.tsx | 18 +++---- .../UpdateConsultation/UpdateConsultation.tsx | 49 +++++++++---------- .../MainPagePatient/MainPagePatient.tsx | 10 ---- 5 files changed, 56 insertions(+), 77 deletions(-) diff --git a/src/components/layouts/GridColumn/GridColumn.tsx b/src/components/layouts/GridColumn/GridColumn.tsx index 68d696b..59e0029 100644 --- a/src/components/layouts/GridColumn/GridColumn.tsx +++ b/src/components/layouts/GridColumn/GridColumn.tsx @@ -4,6 +4,18 @@ import React from "react"; import { GridColumnProps } from "./interface"; import clsx from "clsx"; +// Mapping số cột mong muốn trên Desktop (lg/xl) thành class responsive đầy đủ +const colResponsiveMap: Record = { + 1: "grid-cols-1", + 2: "grid-cols-1 sm:grid-cols-2", + 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", + 4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", + 5: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5", + 6: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6", + 8: "grid-cols-2 sm:grid-cols-4 lg:grid-cols-8", + 12: "grid-cols-3 sm:grid-cols-6 lg:grid-cols-12", +}; + const GridColumn = ({ children, col = 3, @@ -22,41 +34,19 @@ const GridColumn = ({ /* ===== GAP ===== */ sm ? "gap-2" : "gap-4", - /* ===== DEFAULT COL ===== */ - { - "grid-cols-1": col === 1, - "grid-cols-2": col === 2, - "grid-cols-3": col === 3, - "grid-cols-4": col === 4, - "grid-cols-5": col === 5, - "grid-cols-6": col === 6, - "grid-cols-8": col === 8, - "grid-cols-12": col === 12, - }, + /* ===== RESPONSIVE GRID BY COL ===== */ + colResponsiveMap[col] || "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", - /* ===== RESPONSIVE ===== */ - "xl:grid-cols-3", // giống default SCSS fallback - "lg:grid-cols-2", - "md:grid-cols-2", - "sm:grid-cols-1", + /* ===== CUSTOM OVERRIDES ===== */ + tabletCol3 && "md:grid-cols-3 lg:grid-cols-3", + mobile2 && "grid-cols-2", - /* ===== CUSTOM RULES ===== */ - tabletCol3 && "lg:grid-cols-3", - - mobile2 && "sm:grid-cols-2", - - /* ===== COL 4 SPECIAL ===== */ - col === 4 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"), - - /* ===== COL 5 ===== */ - col === 5 && clsx("xl:grid-cols-3", "lg:grid-cols-2", "sm:grid-cols-1"), - - /* ===== SCROLL ===== */ + /* ===== SCROLL MODES ===== */ scroll20 && "grid-flow-col auto-cols-[20%] overflow-x-auto snap-x snap-mandatory gap-2", scrollMobile85 && - "md:grid-cols-none md:grid-flow-col md:auto-cols-[85%] md:overflow-x-auto md:snap-x md:snap-mandatory", + "max-md:grid-cols-none max-md:grid-flow-col max-md:auto-cols-[85%] max-md:overflow-x-auto max-md:snap-x max-md:snap-mandatory", className, )} diff --git a/src/components/page/auth/MainRegister/MainRegister.tsx b/src/components/page/auth/MainRegister/MainRegister.tsx index 3acca9a..dcbe6af 100644 --- a/src/components/page/auth/MainRegister/MainRegister.tsx +++ b/src/components/page/auth/MainRegister/MainRegister.tsx @@ -86,14 +86,14 @@ export default function MainRegister() { label={ Họ và tên - * + {/* * */} } placeholder="Nhập họ và tên" type="text" name="fullName" onClean - isRequired + // isRequired isBlur showDone icon={} @@ -105,14 +105,14 @@ export default function MainRegister() { label={ Email - * + {/* * */} } placeholder="Nhập email" type="email" name="email" onClean - isRequired + // isRequired isBlur showDone icon={} diff --git a/src/components/page/consultation/CreateConsultation/CreateConsultation.tsx b/src/components/page/consultation/CreateConsultation/CreateConsultation.tsx index 4d6b5dd..0247fef 100644 --- a/src/components/page/consultation/CreateConsultation/CreateConsultation.tsx +++ b/src/components/page/consultation/CreateConsultation/CreateConsultation.tsx @@ -137,14 +137,14 @@ const CreateConsultation = () => {
{
{/* BODY */} -
+
{ setForm((prev) => ({ ...prev, vitalSigns: String(v) })) } /> - + + { - Kế hoạch điều trị * - - } - name="treatmentPlan" - placeholder="Nhập kế hoạch điều trị" - value={form.treatmentPlan} - isRequired - onChangeValue={(v) => - setForm((prev) => ({ ...prev, treatmentPlan: String(v) })) - } - /> - - - Ghi chú bác sĩ * - - } + label={Ghi chú bác sĩ} name="doctorNotes" placeholder="Nhập ghi chú" value={form.doctorNotes} - isRequired onChangeValue={(v) => setForm((prev) => ({ ...prev, doctorNotes: String(v) })) } /> - +