Add ResolverCard component
This commit is contained in:
33
app/src/components/ResolverCard.tsx
Normal file
33
app/src/components/ResolverCard.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import type { JSX } from "react";
|
||||
import { Pressable, View } from "react-native";
|
||||
import { Typography } from "heroui-native";
|
||||
import type { Resolver } from "@/data/mock";
|
||||
|
||||
interface ResolverCardProps {
|
||||
resolver: Resolver;
|
||||
isSelected: boolean;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
export function ResolverCard({ resolver, isSelected, onSelect }: ResolverCardProps): JSX.Element {
|
||||
return (
|
||||
<Pressable
|
||||
onPress={onSelect}
|
||||
className={`mb-1.5 rounded-xl border p-3 ${
|
||||
isSelected ? "border-accent bg-accent/10" : "border-border bg-transparent"
|
||||
}`}
|
||||
>
|
||||
<View className="flex-row items-center justify-between">
|
||||
<Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
|
||||
{resolver.name}
|
||||
</Typography>
|
||||
<Typography type="body-sm" weight="semibold" className={isSelected ? "text-accent" : undefined}>
|
||||
{resolver.fee}
|
||||
</Typography>
|
||||
</View>
|
||||
<Typography type="body-xs" color="muted" className="mt-0.5">
|
||||
{resolver.type} · {resolver.wins}% buyer-favorable
|
||||
</Typography>
|
||||
</Pressable>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user