View - Copy this React, Tailwind Component to your project

import-React-from-"react";-import-{-AiOutlineClose-}-from-"react-icons/ai";-import-{-MdOutlineVisibility-}-from-"react-icons/md";-const-View-=-({-isViewOpen,-setIsViewOpen,-viewData-})-=>-{-if-(!isViewOpen)-return-null;-const-filteredData-=-Object.entries(viewData).filter(-([key])-=>-!["id",-"adminId",-"createdAt",-"updatedAt",-"name"].includes(key)-);-return-(-<div-className="fixed-inset-0-flex-items-center-justify-center-z-50-bg-black-bg-opacity-50-backdrop-blur-sm-transition-opacity-duration-300">-<div-className="bg-white-rounded-lg-shadow-xl-w-full-max-w-6xl-mx-4-md:mx-auto-p-6-max-h-[90vh]-overflow-y-auto">-{/*-Header-*/}-<div-className="flex-justify-between-items-center-border-b-pb-4-mb-4">-<div-className="flex-items-center-gap-2">-<h2-className="text-2xl-font-bold-text-gray-800">-Permission-Details:{"-"}-<span-className="text-blue-500">{viewData.name}</span>-</h2>-</div>-<button-onClick={()-=>-setIsViewOpen(false)}-className="text-gray-500-hover:text-red-500-transition-duration-300"->-<AiOutlineClose-size={28}-/>-</button>-</div>-{/*-Content-*/}-<div-className="grid-grid-cols-1-md:grid-cols-1-gap-6">-{filteredData.map(([key,-value])-=>-(-<div-key={key}-className="bg-gray-50-p-4-rounded-lg-shadow-md-space-y-4"->-{/*-Module-Permissions-*/}-{typeof-value-===-"boolean"-&&-(-<div-className="flex-justify-between-items-center-border-b-pb-2">-<span-className="text-lg-font-semibold-text-gray-700-capitalize">-{key.replace(/([A-Z])/g,-"-$1").toLowerCase()}-</span>-<span-className={`px-4-py-1-rounded-md-text-white-font-medium-${-value-?-"bg-green-500"-:-"bg-red-500"-}`}->-{value-?-"On"-:-"Off"}-</span>-</div>-)}-{/*-Child-Permissions-*/}-{typeof-value-===-"object"-&&-(-<div-className="space-y-2">-<div-className="grid-grid-cols-1-sm:grid-cols-2-gap-3">-{Object.entries(value).map(([subKey,-subValue])-=>-(-<div-key={subKey}-className="flex-justify-between-items-center-bg-gray-100-p-2-rounded-md-shadow-inner"->-<span-className="text-sm-text-gray-600-capitalize">-{subKey.replace(/([A-Z])/g,-"-$1").toLowerCase()}-</span>-<span-className={`font-medium-text-sm-${-typeof-subValue-===-"boolean"-?-subValue-?-"text-green-500"-:-"text-red-500"-:-"text-gray-800"-}`}->-{typeof-subValue-===-"boolean"-?-subValue-?-"On"-:-"Off"-:-subValue}-</span>-</div>-))}-</div>-</div>-)}-</div>-))}-</div>-{/*-Footer-*/}-<div-className="mt-6-flex-justify-end">-<button-onClick={()-=>-setIsViewOpen(false)}-className="px-6-py-2-bg-blue-500-text-white-font-semibold-rounded-md-shadow-md-hover:bg-blue-600-transition-duration-300"->-Close-</button>-</div>-</div>-</div>-);-};-export-default-View;-On-the-left-side-there-will-be-the-module-name-and-on-or-off-on-the-right-side.-Below-there-will-be-the-child-permission-object.-This-will-all-be-in-one-card.