74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { View, Text } from "react-native";
|
|
import { useTheme } from "./theme";
|
|
import { Avatar } from "./ui/avatar";
|
|
import { Rating } from "./ui/rating";
|
|
|
|
function formatTimeAgo(timestamp: number): string {
|
|
const now = Date.now();
|
|
const diff = now - timestamp;
|
|
|
|
const seconds = Math.floor(diff / 1000);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(minutes / 60);
|
|
const days = Math.floor(hours / 24);
|
|
const months = Math.floor(days / 30);
|
|
const years = Math.floor(days / 365);
|
|
|
|
if (years > 0) return `пред ${years} ${years === 1 ? "година" : "години"}`;
|
|
if (months > 0) return `пред ${months} ${months === 1 ? "месец" : "месеци"}`;
|
|
if (days > 0) return `пред ${days} ${days === 1 ? "ден" : "денови"}`;
|
|
if (hours > 0) return `пред ${hours} ${hours === 1 ? "час" : "часа"}`;
|
|
if (minutes > 0) return `пред ${minutes} ${minutes === 1 ? "минута" : "минути"}`;
|
|
return "пред малку";
|
|
}
|
|
|
|
interface ReviewCardProps {
|
|
review: {
|
|
_id: string;
|
|
rating: number;
|
|
comment?: string;
|
|
createdAt: number;
|
|
};
|
|
customerName: string;
|
|
customerAvatarId?: string;
|
|
}
|
|
|
|
export function ReviewCard({ review, customerName, customerAvatarId }: ReviewCardProps) {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<View
|
|
accessible
|
|
accessibilityLabel={`Оценка ${review.rating} од 5 од ${customerName}${review.comment ? `, ${review.comment}` : ""}`}
|
|
style={{
|
|
backgroundColor: theme.colors.card,
|
|
borderRadius: theme.radius.lg,
|
|
padding: theme.spacing.lg,
|
|
...theme.shadows.xs,
|
|
borderWidth: 1,
|
|
borderColor: theme.colors.border,
|
|
gap: theme.spacing.md,
|
|
}}
|
|
>
|
|
<View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.md }}>
|
|
<Avatar uri={customerAvatarId ?? null} name={customerName} size={44} />
|
|
<View style={{ flex: 1 }}>
|
|
<Text selectable style={{ ...theme.typography.bodyBold, color: theme.colors.text, fontSize: 15 }}>
|
|
{customerName}
|
|
</Text>
|
|
<Text style={{ ...theme.typography.label, color: theme.colors.textTertiary }}>
|
|
{formatTimeAgo(review.createdAt)}
|
|
</Text>
|
|
</View>
|
|
<Rating value={review.rating} size={16} />
|
|
</View>
|
|
|
|
{review.comment ? (
|
|
<Text selectable style={{ ...theme.typography.body, color: theme.colors.textSecondary, lineHeight: 22 }}>
|
|
{review.comment}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
);
|
|
}
|