|
|
|
|
@ -2,6 +2,7 @@ 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); |
|
|
|
|
@ -15,46 +16,63 @@ const PopupCard = () => { |
|
|
|
|
> |
|
|
|
|
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 max-w-2xl h-full md:h-auto"> |
|
|
|
|
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700"> |
|
|
|
|
<div className="flex justify-between items-start p-5 rounded-t "> |
|
|
|
|
<div className="relative p-4 w-full h-full md:h-auto"> |
|
|
|
|
<div className="w-9/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="bg-blue-100 p-2 cursor-pointer" |
|
|
|
|
className="p-2 cursor-pointer rounded bg-[#F8F8F8]" |
|
|
|
|
> |
|
|
|
|
<img src={cancleIcon} className="w-4" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* modalBody */} |
|
|
|
|
{/* top */} |
|
|
|
|
<div className="px-5 mt-3 "> |
|
|
|
|
<div className="px-5 mt-3 flex "> |
|
|
|
|
{/* right */} |
|
|
|
|
<input |
|
|
|
|
type="text" |
|
|
|
|
className="relative w-1/2 border-2 border-blue-200 rounded-md text-sm h-12 |
|
|
|
|
focus:outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-400" |
|
|
|
|
style={{ color: "#00253A" }} |
|
|
|
|
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)} |
|
|
|
|
// onClick={() => {
|
|
|
|
|
// setActiveInput(true);
|
|
|
|
|
// }}
|
|
|
|
|
/> |
|
|
|
|
{/* ${activeInput ? "text-red-500" : "text-yellow-400"} */} |
|
|
|
|
<span |
|
|
|
|
className={`absolute right-10 -mt-2 bg-white text-xs px-2 font-bold ${ |
|
|
|
|
activeInput ? "text-blue-600" : "text-red-600" |
|
|
|
|
}`}
|
|
|
|
|
className={`absolute right-10 -mt-2 bg-white text-xs px-2 font-bold`} |
|
|
|
|
style={{ color: activeInput ? "#22577E" : "#06BACE" }} |
|
|
|
|
> |
|
|
|
|
نام کارت |
|
|
|
|
</span> |
|
|
|
|
{/* left */} |
|
|
|
|
{/* <div |
|
|
|
|
date-rangepicker |
|
|
|
|
className="flex items-center w-1/2 bg-red-600" |
|
|
|
|
> |
|
|
|
|
<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-blue-500 focus:ring-1 focus:ring-blue-500" |
|
|
|
|
placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> */} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
