new layout for full account offer list added
This commit was merged in pull request #263.
This commit is contained in:
victorAnumudu
@@ -1,112 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import {PriceFormatter} from '../Helpers/PriceFormatter'
|
||||
|
||||
|
||||
export default function FamilyOfferCard({ datas, hidden = false, setOfferPopout }) {
|
||||
let thePrice = PriceFormatter(datas?.price * 0.01,datas?.currency_code,datas?.currency);
|
||||
|
||||
return (
|
||||
<div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white p-3 pb rounded-2xl">
|
||||
<div className="content">
|
||||
{/* thumbnail */}
|
||||
<div className="w-full h-40">
|
||||
{/* thumbnail image */}
|
||||
<div
|
||||
className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
|
||||
style={{
|
||||
background: `url(${localImgLoad(
|
||||
`images/taskbanners/${datas.banner}`
|
||||
)}) center / contain no-repeat`,
|
||||
}}
|
||||
>
|
||||
{hidden && (
|
||||
<div className="flex justify-center">
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* details */}
|
||||
<div className="details">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
|
||||
{datas.title}
|
||||
</h1>
|
||||
{/* countdown */}
|
||||
{/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Task Code
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{datas.contract}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Remaining Time
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
<CountDown lastDate={datas.expire} />
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col justify-between items-center border-r-2">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Task Code
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{datas.contract}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between items-center">
|
||||
<p className="text-sm text-red-500 tracking-wide">
|
||||
Expires
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
<CountDown lastDate={datas.expire} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-2" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col justify-between items-center border-r-2">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Reward
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{thePrice}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between items-center">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Timeline
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{`${datas.timeline_days} day(s)`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-buttons flex justify-end items-center space-x-2">
|
||||
<button
|
||||
type='button'
|
||||
onClick={()=>setOfferPopout({show: true, data: {...datas, thePrice}})}
|
||||
className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
|
||||
>
|
||||
Start Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import localImgLoad from "../../lib/localImgLoad";
|
||||
import CountDown from "../Helpers/CountDown";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
|
||||
export default function OfferCard({ datas, hidden = false, setOfferPopout }) {
|
||||
let thePrice = PriceFormatter(
|
||||
datas?.price * 0.01,
|
||||
datas?.currency_code,
|
||||
datas?.currency
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="card-style-one flex flex-col justify-between w-full h-[387px] bg-white dark:bg-dark-white p-3 pb rounded-2xl">
|
||||
<div className="content">
|
||||
{/* thumbnail */}
|
||||
<div className="w-full h-40">
|
||||
{/* thumbnail image */}
|
||||
<div
|
||||
className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
|
||||
style={{
|
||||
background: `url(${localImgLoad(
|
||||
`images/taskbanners/${datas.banner}`
|
||||
)}) center / contain no-repeat`,
|
||||
}}
|
||||
>
|
||||
{hidden && <div className="flex justify-center"></div>}
|
||||
</div>
|
||||
</div>
|
||||
{/* details */}
|
||||
<div className="details">
|
||||
<h1 className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1">
|
||||
{datas.title}
|
||||
</h1>
|
||||
{/* countdown */}
|
||||
{/* <div className="w-full h-[54px] flex justify-evenly items-center p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Task Code
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{datas.contract}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[1px] h-full bg-[#E3E4FE] dark:bg-[#a7a9b533] "></div>
|
||||
<div className="flex flex-col justify-between">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Remaining Time
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
<CountDown lastDate={datas.expire} />
|
||||
</p>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="w-full p-2 rounded-lg border border-[#E3E4FE] dark:border-[#a7a9b533] ">
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col justify-between items-center border-r-2">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Task Code
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{datas.contract}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between items-center">
|
||||
<p className="text-sm text-red-500 tracking-wide">Expires</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
<CountDown lastDate={datas.expire} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="my-2" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div className="flex flex-col justify-between items-center border-r-2">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Reward
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{thePrice}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between items-center">
|
||||
<p className="text-sm text-thin-light-gray dark:text-white tracking-wide">
|
||||
Timeline
|
||||
</p>
|
||||
<p className="text-base font-bold tracking-wide text-dark-gray dark:text-white">
|
||||
{`${datas.timeline_days} day(s)`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card-buttons flex justify-end items-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setOfferPopout({ show: true, data: { ...datas, thePrice } })
|
||||
}
|
||||
className="btn-shine w-[98px] h-[33px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
|
||||
>
|
||||
Start Task
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user