Fix width table columns

Dium-dev · Aug 27, 2024 · 43cc02f · 43cc02f
1 parent 180c532
commit 43cc02f
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 25 deletions.
diff --git a/src/actions/admin.ts b/src/actions/admin.ts
@@ -14,7 +14,7 @@ export const login = async (email: string, password: string) => {
 
     const data = await response.json();
 
-    if (data.statusCode === 401) {
+    if (!response.ok) {
       return {
         error: "Acceso no autorizado",
       };

diff --git a/src/app/(admin)/atc24$rw/admin/components/FormModal.tsx b/src/app/(admin)/atc24$rw/admin/components/FormModal.tsx
@@ -15,7 +15,7 @@ export const FormModal = () => {
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent>
+      <DialogContent className="h-full md:h-auto overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>

diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewForm.tsx
@@ -165,7 +165,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
           name="user"
           render={({ field }) => (
             <FormItem className="w-full">
-              <FormLabel>Nombre del usuario</FormLabel>
+              <FormLabel>Usuario</FormLabel>
               <FormControl>
                 <Input placeholder="Nombre del usuario" {...field} />
               </FormControl>
@@ -201,7 +201,7 @@ export const ReviewForm = ({ review }: ReviewFormProps) => {
           ) : (
             <div className="flex flex-col gap-y-0.5 items-center">
               <FiUploadCloud size={50} />
-              <p>Carga la imagen del usuario, arrastra o haz click</p>
+              <p className="text-center">Carga la imagen del usuario, arrastra o haz click</p>
             </div>
           )}
         </div>

diff --git a/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx b/src/app/(admin)/atc24$rw/admin/components/ReviewsTable.tsx
@@ -20,6 +20,7 @@ import { FormEvent, useTransition } from "react";
 import { useRouter } from "next/navigation";
 import { REVIEWS_API } from "@/lib/constants";
 import { cn, createFormData } from "@/lib/utils";
+import useMobile from "@/hooks/useMobile";
 
 interface ReviewsTableProps {
   reviews: Review[];
@@ -28,6 +29,7 @@ interface ReviewsTableProps {
 export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
+  const { isMobile } = useMobile();
   const { onOpen } = useReviewFormModal();
 
   const handleDelele = (id: string) => {
@@ -69,7 +71,7 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
       updateReview(formData, token)
         .then((data) => {
           if (data.success) {
-            toast.success(data.success);
+            toast.success(`Reseña ${value ? "activada" : "desactivada"} exitosamente`);
           }
           if (data.error) {
             toast.error(data.error);
@@ -84,12 +86,12 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead>Usuario</TableHead>
+            <TableHead className="text-center md:text-left md:w-72">Usuario</TableHead>
             <TableHead>Texto</TableHead>
-            <TableHead>Calificación</TableHead>
-            <TableHead>Visibilidad</TableHead>
-            <TableHead>Editar</TableHead>
-            <TableHead className="flex items-center justify-end">
+            <TableHead className="md:w-36 text-center">{isMobile ? "⭐️" : "Calificación"}</TableHead>
+            <TableHead className="md:w-36 text-center">Estado</TableHead>
+            <TableHead className="md:w-36 text-center">Editar</TableHead>
+            <TableHead className="md:w-36 text-center">
               Eliminar
             </TableHead>
           </TableRow>
@@ -100,22 +102,22 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
               JSON.parse(review.active) == false ? "opacity-50" : ""
             )}>
               <TableCell>
-                <div className="flex items-center gap-x-3">
+                <div className="flex flex-col md:flex-row items-center gap-x-3">
                   <Image
                     src={`${REVIEWS_API}/images/reviews/${review.image}`}
                     className="rounded-full aspect-square object-cover"
-                    width={70}
-                    height={70}
+                    width={isMobile ? 40 : 70}
+                    height={isMobile ? 40 : 70}
                     alt="Imagen del usuario"
                   />
-                  <span className="font-bold">{review.user}</span>
+                  <span className="font-bold text-center">{review.user}</span>
                 </div>
               </TableCell>
-              <TableCell className="max-w-[15rem] pr-6">
+              <TableCell className="max-w-[5rem] md:max-w-[15rem] truncate">
                 {review.review}
               </TableCell>
-              <TableCell>{review.rating}</TableCell>
-              <TableCell>
+              <TableCell className="text-center">{review.rating}</TableCell>
+              <TableCell className="text-center">
                 <Switch
                   defaultChecked={
                     JSON.parse(review.active || "false") ? true : false
@@ -127,26 +129,26 @@ export const ReviewsTable = ({ reviews }: ReviewsTableProps) => {
                   disabled={isPending}
                 />
               </TableCell>
-              <TableCell>
+              <TableCell className="text-center">
                 <CiEdit
                   size={25}
                   onClick={() => onOpen(review)}
-                  className="cursor-pointer"
+                  className="cursor-pointer mx-auto"
                 />
               </TableCell>
-              <TableCell>
+              <TableCell className="text-center">
                 <DeleteAlert onDelete={() => handleDelele(review.id)}>
                   <CiTrash
                     size={25}
-                    className="cursor-pointer hover:text-red-500"
+                    className="cursor-pointer hover:scale-125 text-red-600 mx-auto transition-all"
                   />
                 </DeleteAlert>
               </TableCell>
             </TableRow>
           ))}
         </TableBody>
       </Table>
-      <Button onClick={() => onOpen()} className="my-6">
+      <Button onClick={() => onOpen()} className="my-5">
         Crear reseña
       </Button>
     </>

diff --git a/src/app/(admin)/atc24$rw/admin/page.tsx b/src/app/(admin)/atc24$rw/admin/page.tsx
@@ -5,7 +5,7 @@ const AdminPage = async () => {
   const reviews = await getReviews();
 
   return (
-    <main className="w-full p-8">
+    <main className="w-full md:p-8 flex flex-col items-center">
       <ReviewsTable reviews={reviews} />
     </main>
   );

diff --git a/src/app/(admin)/atc24$rw/page.tsx b/src/app/(admin)/atc24$rw/page.tsx
@@ -81,7 +81,7 @@ const LoginPage = () => {
               </FormItem>
             )}
           />
-          <Button className="w-full bg-primary-lm hover:bg-red-600" disabled={isPending}>
+          <Button className="w-full bg-primary-lm hover:bg-red-600 dark:text-white" disabled={isPending}>
             {!isPending ? (
               "Ingresar"
             ) : (

diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#22c55e] data-[state=unchecked]:bg-input",
       className
     )}
     {...props}