MoonMiners/src/app/Components/StakingSourcesViewBackup.tsx

59 lines
1.7 KiB
TypeScript

"use client";
import React from "react";
import { IInventoryItem, IStakingSource } from "typings";
import StakingSource from "./StakingSource";
const StakingSourcesView = (props: {
stakingSources: IStakingSource[] | null;
inventoryItems: IInventoryItem[] | null | undefined;
claimStake: (stakingEventId: number) => void;
startStake: (
inventoryItemId: number,
storeItemId: string,
wellId: number
) => void;
createStakingSource: () => void;
}) => {
return (
<div className="bg-slate-800 p-4 rounded-lg text-white col-span-5">
<div className="flex items-center mb-4">
<h2 className="text-3xl font-bold">Your Moons</h2>
<button
className="bg-green-600 rounded-full ml-2 p-1 inline"
onClick={() => props.createStakingSource()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={2}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 4.5v15m7.5-7.5h-15"
/>
</svg>
</button>
</div>
<div className="grid grid-cols-3 gap-4">
{props.stakingSources &&
props.stakingSources.length > 0 &&
props.stakingSources.map((stakingSource, id) => (
<StakingSource
key={id}
stakingSource={stakingSource}
inventoryItems={props.inventoryItems}
claimStake={props.claimStake}
startStake={props.startStake}
/>
))}
</div>
</div>
);
};
export default StakingSourcesView;