51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { RefreshCw } from "lucide-react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Quote {
|
|
quote: string;
|
|
author: string;
|
|
}
|
|
|
|
export function QuoteCard() {
|
|
const fetchQuote = async (): Promise<Quote> => {
|
|
// Récupere la liste des citations depuis le fichier dans /public/quotes.json
|
|
const response = await fetch("/quotes.json");
|
|
const data = await response.json();
|
|
|
|
// Retourne une citation aléatoire
|
|
return data[Math.floor(Math.random() * data.length)];
|
|
};
|
|
|
|
const [quote, setQuote] = useState<Quote | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchQuote().then(setQuote);
|
|
}, []);
|
|
|
|
const handleRefresh = () => {
|
|
fetchQuote().then(setQuote);
|
|
};
|
|
|
|
return (
|
|
<Card className='relative transition-transform duration-500 ease-in-out transform hover:scale-105'>
|
|
<CardContent className='p-6'>
|
|
<blockquote className='space-y-2'>
|
|
<p className='text-lg'>{quote ? quote.quote : "Loading..."}</p>
|
|
<footer className='text-sm text-gray-500'>
|
|
{quote ? quote.author : "Loading..."}
|
|
</footer>
|
|
</blockquote>
|
|
<button
|
|
className='absolute bottom-4 right-4 p-1 hover:bg-gray-100 rounded-full'
|
|
onClick={handleRefresh}
|
|
>
|
|
<RefreshCw className='w-4 h-4' />
|
|
</button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|