fix responsive design
This commit is contained in:
@@ -1,11 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import UploadFile from "@/app/component/UploadFile";
|
||||
import { useState } from "react";
|
||||
|
||||
function Head() {
|
||||
const [image, setImage] = useState({
|
||||
file: "",
|
||||
blob: "",
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<UploadFile />
|
||||
<UploadFile image={image} setImage={setImage} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,12 +6,12 @@ import { Button } from "@mui/material";
|
||||
|
||||
function Item({ data, loading }) {
|
||||
return (
|
||||
<li className="rounded-[8px] bg-[#FFF] p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
|
||||
<li className="rounded-[8px] bg-[#FFF] p-[12px] dark:shadow-transparent dark:bg-[#222433] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[4px]">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
<div className="flex items-center justify-start gap-[16px]">
|
||||
<p className="text-[16px] min-w-[60px] font-medium text-[#616161]">
|
||||
<p className="text-[16px] min-w-[60px] font-medium text-[#616161] dark:text-[#A1A1A1]">
|
||||
{data.status ? "فعال" : "غیر فعال"}
|
||||
</p>
|
||||
<SwitchTable value={data.status} />
|
||||
@@ -30,34 +30,38 @@ function Item({ data, loading }) {
|
||||
<ul className="flex flex-col mt-[16px]">
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
|
||||
شماره کارت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[12px] font-medium">
|
||||
<p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
|
||||
{data.card_number}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<span className="block h-px w-[calc(100%-20px)] dark:bg-[#343645] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">شماره شبا:</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
|
||||
شماره شبا:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[12px] font-medium">
|
||||
<p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
|
||||
{data.shaba_number}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px] dark:bg-[#343645]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">بانک:</p>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal dark:text-[#A1A1A1]">
|
||||
بانک:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[12px] font-medium">
|
||||
<p className="text-[#616161] text-[12px] font-medium dark:text-[#A1A1A1]">
|
||||
{data.bank}
|
||||
</p>
|
||||
</TextLoading>
|
||||
|
||||
Reference in New Issue
Block a user