You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

115 lines
4.7 KiB

import React, { useState } from "react";
import "./index.scss";
import cancleIcon from "./cancle-icon.svg";
import calender from "./calender.svg";
const PopupCard = () => {
const [activeInput, setActiveInput] = useState(false);
return (
<section className="">
<button
className="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
type="button"
data-modal-toggle="defaultModal"
>
click me to see popUpCard Modal
</button>
{/* modal */}
<div
id="defaultModal"
tabindex="-1"
aria-hidden="true"
className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
>
<div className="relative p-4 w-full h-full md:h-auto">
<div className="w-8/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
<div className="flex justify-between items-start p-5 rounded-t">
{/* cancle icon */}
<div
type="button"
data-modal-toggle="defaultModal"
className="p-2 cursor-pointer rounded bg-[#F8F8F8]"
>
<img src={cancleIcon} className="w-4" />
</div>
</div>
{/* modalBody */}
<div className="w-11/12 mx-auto mt-3">
{/* top */}
<div className="flex">
{/* right */}
<input
type="text"
className="relative w-1/2 border-2 rounded-md text-sm h-12
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
style={{
color: "#00253A",
borderColor: activeInput ? "#22577E" : "#06BACE",
}}
onFocus={() => setActiveInput(true)}
onBlur={() => setActiveInput(false)}
/>
<span
className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-bold`}
style={{ color: activeInput ? "#22577E" : "#06BACE" }}
>
نام کارت
</span>
{/* divider */}
<div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
{/* left */}
<div date-rangepicker className="flex items-center w-1/2">
<div className="relative w-full">
<img src={calender} className="absolute top-3 left-2" />
<input
name="start"
type="text"
className="w-full border-2 border-blue-400 rounded-md text-sm h-12
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
/>
</div>
</div>
</div>
{/* divider */}
<div className="border-2 border-red-600 my-5"></div>
{/* middle */}
<div className="flex">
{/* right */}
<textarea
class="resize relative w-1/2 border-2 rounded-md text-sm
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
></textarea>
<span
className={`absolute right-20 -mt-2 bg-white text-xs px-2 font-bold`}
style={{ color: activeInput ? "#22577E" : "#06BACE" }}
>
نام کارت
</span>
{/* divider */}
<div className="bg-[#DBDBDB] w-0.5 mx-5"></div>
{/* left */}
<div date-rangepicker className="flex items-center w-1/2">
<div className="relative w-full">
<img src={calender} className="absolute top-3 left-2" />
<input
name="start"
type="text"
className="w-full border-2 border-blue-400 rounded-md text-sm h-12
focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default PopupCard;