41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import type { JSX } from "react";
|
|
import { useState } from "react";
|
|
import { Pressable, View } from "react-native";
|
|
import { Typography } from "heroui-native";
|
|
import type { Resolver } from "@/data/mock";
|
|
import { MonoText } from "@/components/MonoText";
|
|
|
|
interface ResolverCardProps {
|
|
resolver: Resolver;
|
|
isSelected: boolean;
|
|
onSelect: () => void;
|
|
}
|
|
|
|
export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
const borderClass = isSelected ? "border-accent" : isHovered ? "border-border-secondary" : "border-border";
|
|
const bgClass = isSelected ? "bg-accent/10" : "bg-surface-secondary";
|
|
|
|
return (
|
|
<Pressable
|
|
onPress={onSelect}
|
|
onHoverIn={() => setIsHovered(true)}
|
|
onHoverOut={() => setIsHovered(false)}
|
|
className={`mb-1.5 rounded-xl border p-3 ${borderClass} ${bgClass}`}
|
|
>
|
|
<View className="flex-row items-center justify-between">
|
|
<Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
|
|
{resolver.name}
|
|
</Typography>
|
|
<MonoText weight="semibold" className={isSelected ? "text-accent" : undefined}>
|
|
{resolver.fee}
|
|
</MonoText>
|
|
</View>
|
|
<Typography type="body-xs" color="muted" className="mt-0.5">
|
|
{resolver.type} · {resolver.wins}% buyer-favorable
|
|
</Typography>
|
|
</Pressable>
|
|
);
|
|
}
|