0c1f15464f
* Basic UI for resources * Style upgrades etc. * Add template for drill * Add moons and drill templates * Add mining timer * Delete comment * Modify some styling to cards and resources * Enhance styling on difference components --------- Co-authored-by: Nico Li <nilindenau@gmail.com>
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Resource } from "typings";
|
|
import ResourceItem from "./ResourceItem";
|
|
|
|
const ResourceView = (props: { resources: Resource[] }) => {
|
|
return (
|
|
<div className="p-4">
|
|
<div className="grid grid-cols-5 gap-8">
|
|
<div className="bg-green-800 rounded-lg p-3">
|
|
<div className="text-white">
|
|
<span className="text-green-400">Moonbucks</span>
|
|
<h3 className="text-2xl font-bold">$5,342.23</h3>
|
|
<button className="px-2 text-sm mt-1 rounded-lg font-bold bg-green-400 text-green-800">
|
|
Sell Resources
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{props.resources.map((resource, id) => {
|
|
const resourceCardProps = {
|
|
resource: resource,
|
|
isMining: true,
|
|
yieldPerSecond: 0.15,
|
|
};
|
|
return (
|
|
<ResourceItem key={id} resourceCardProps={resourceCardProps} />
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ResourceView;
|