Spaces:
Paused
Paused
File size: 2,093 Bytes
0b9dc2e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | import { X } from 'lucide-react';
import { useOnborda, type CardComponentProps } from 'onborda';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { useTranslation } from '@/i18n/useI18n';
export const TourCard = ({
step,
currentStep,
totalSteps,
nextStep,
prevStep,
arrow,
}: CardComponentProps) => {
const { t } = useTranslation();
const { closeOnborda } = useOnborda();
const isFirst = currentStep === 0;
const isLast = currentStep === totalSteps - 1;
const handleClose = () => {
localStorage.setItem('chat_tour_done', '1');
closeOnborda();
};
const handleNext = () => {
if (isLast) {
handleClose();
return;
}
nextStep();
};
return (
<>
{/* Arrow inherits color via `currentColor`; force it to the card's
background so the triangle visually merges with the card. */}
<span style={{ color: 'var(--card)' }}>{arrow}</span>
<Card size="sm" className="w-80 shadow-lg">
<CardHeader className="flex flex-row items-start justify-between gap-2">
<CardTitle>{step.title}</CardTitle>
<button
onClick={handleClose}
className="text-muted-foreground hover:text-foreground -mt-1"
aria-label={t('tour.skip')}
>
<X className="size-4" />
</button>
</CardHeader>
<CardContent className="text-muted-foreground text-sm leading-relaxed">
{step.content}
</CardContent>
<CardFooter className="flex items-center justify-between">
<span className="text-muted-foreground text-xs">
{t('tour.step', { current: currentStep + 1, total: totalSteps })}
</span>
<div className="flex items-center gap-2">
{!isFirst && (
<Button size="sm" variant="ghost" onClick={prevStep}>
{t('tour.prev')}
</Button>
)}
<Button size="sm" onClick={handleNext}>
{isLast ? t('tour.finish') : t('tour.next')}
</Button>
</div>
</CardFooter>
</Card>
</>
);
};
|