55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import { IStoreItem } from "typings";
|
|
import CommonCardLayout from "../Layouts/CommonCardLayout";
|
|
import Chart from "./Chart";
|
|
import Image from "next/image";
|
|
|
|
const StoreItem = (props: {
|
|
storeItem: IStoreItem;
|
|
buyStoreItem: (itemId: string) => void;
|
|
}) => {
|
|
return (
|
|
<CommonCardLayout>
|
|
<div className="flex ">
|
|
<div className="flex-1 pr-4 mr-4">
|
|
<h3 className="text-2xl font-bold mb-2">{props.storeItem.name}</h3>
|
|
<p className="text-sm mb-3">{props.storeItem.description}</p>
|
|
<div className="py-4 my-2">
|
|
<button
|
|
onClick={() => props.buyStoreItem(props.storeItem.id)}
|
|
className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center"
|
|
>
|
|
Buy | ${props.storeItem.price}
|
|
</button>
|
|
</div>
|
|
<div className="flex">
|
|
<div className="mr-3">
|
|
<p className="font-bold">Base Yield</p>
|
|
<p className="">{props.storeItem.claimAmount}</p>
|
|
</div>
|
|
<div className="">
|
|
<p className="font-bold">Upgrades</p>
|
|
{props.storeItem.upgrades.map((upgrade, id) => (
|
|
<span key={id} className="mr-2">
|
|
{upgrade.claimBoost}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative object-contain w-48 h-48">
|
|
<Image
|
|
src={props.storeItem.image}
|
|
alt={props.storeItem.name}
|
|
fill
|
|
className="rounded-lg border border-white/20 shadow-lg object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</CommonCardLayout>
|
|
);
|
|
};
|
|
|
|
export default StoreItem;
|