gitscope
← marzneshin / v0.6.0 / dashboard/src/components/entity-field-card/index.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/entity-field-card/index.tsx · TypeScript
Blame Raw
 1import { LucideIcon } from 'lucide-react';
 2import { Label, Separator } from '@marzneshin/components';
 3import { FC } from 'react'
 4
 5interface EntityFieldCardProps {
 6    FirstIcon: LucideIcon;
 7    SecondIcon: LucideIcon;
 8    firstAmount: number | string;
 9    secondAmount: number | string;
10    name: string;
11}
12
13
14export const EntityCardProperty = ({ Icon, amount }: { Icon: LucideIcon, amount: number | string }) => (
15    <div className="flex flex-row items-center w-full">
16        <Icon className="w-4 h-4 font-light mr-1" />
17        {amount}
18    </div>
19)
20
21export const EntityFieldCard: FC<EntityFieldCardProps> = (
22    { FirstIcon, SecondIcon, firstAmount, secondAmount, name }
23) => {
24    return (
25        <div className="w-full flex justify-between flex-row items-center">
26            <Label>{name}</Label>
27            <div className="flex flex-row items-center gap-1">
28                <EntityCardProperty Icon={FirstIcon} amount={firstAmount} />
29                <Separator className="w-4 rotate-[-75deg]" />
30                <EntityCardProperty Icon={SecondIcon} amount={secondAmount} />
31            </div>
32        </div>
33    )
34};