Chabdeltsang/Neah-Enkun
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajout d'effets de transition et de transformations au survol pour plusieurs composants de l'interface utilisateur

Browse Source
This commit is contained in:
Kevin 2025-02-24 16:20:00 +01:00
parent 4676f27293
commit c1bb630f76
6 changed files with 57 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
front/components/calendar-widget.tsx
View File

@ -1,19 +1,18 @@
import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Card, CardContent, CardHeader } from "@/components/ui/card";
export function CalendarWidget() { export function CalendarWidget() {
return ( return (
<Card> <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader> <CardHeader>
<div className="text-sm font-medium">JEUDI</div> <div className='text-sm font-medium'>JEUDI</div>
<div className="text-4xl font-bold">24</div> <div className='text-4xl font-bold'>24</div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-2"> <div className='space-y-2'>
<h3 className="font-medium">Classe UX Design en visio conférence</h3> <h3 className='font-medium'>Classe UX Design en visio conférence</h3>
<p className="text-sm text-gray-500">Rappel : Examen dans 2 jours</p> <p className='text-sm text-gray-500'>Rappel : Examen dans 2 jours</p>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
) );
} }

9
front/components/messages.tsx
View File

@ -1,15 +1,14 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function Messages() { export function Messages() {
return ( return (
<Card> <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader> <CardHeader>
<CardTitle>Messages - Non Lu</CardTitle> <CardTitle>Messages - Non Lu</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-6 text-center text-gray-500"> <CardContent className='p-6 text-center text-gray-500'>
Aucun nouveau messages Aucun nouveau messages
</CardContent> </CardContent>
</Card> </Card>
) );
} }

23
front/components/news.tsx
View File

@ -1,37 +1,38 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export function News() { export function News() {
const newsItems = [ const newsItems = [
{ {
title: "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest", title:
"Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
source: "CNN", source: "CNN",
}, },
{ {
title: "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?", title:
"Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
source: "CBS Sports", source: "CBS Sports",
}, },
{ {
title: "China's Baidu reports 15% revenue growth, beating expectations", title: "China's Baidu reports 15% revenue growth, beating expectations",
source: "CNBC", source: "CNBC",
}, },
] ];
return ( return (
<Card> <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader> <CardHeader>
<CardTitle>News</CardTitle> <CardTitle>News</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className='space-y-4'>
{newsItems.map((item, i) => ( {newsItems.map((item, i) => (
<div key={i} className="space-y-1"> <div key={i} className='space-y-1'>
<h3 className="font-medium">{item.title}</h3> <h3 className='font-medium'>{item.title}</h3>
<p className="text-sm text-gray-500">{item.source}</p> <p className='text-sm text-gray-500'>{item.source}</p>
</div> </div>
))} ))}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
) );
} }

35
front/components/podcast.tsx
View File

@ -1,30 +1,33 @@
import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Card, CardContent, CardHeader } from "@/components/ui/card";
import Image from "next/image" import Image from "next/image";
export function Podcast() { export function Podcast() {
return ( return (
<Card> <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader> <CardHeader>
<div className="text-sm font-medium text-red-500">PODCAST</div> <div className='text-sm font-medium text-red-500'>PODCAST</div>
<div className="text-lg font-bold">DU JOUR</div> <div className='text-lg font-bold'>DU JOUR</div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className='space-y-4'>
<div className="flex space-x-4"> <div className='flex space-x-4'>
<Image <Image
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png" src='https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png'
alt="Podcast cover" alt='Podcast cover'
width={80} width={80}
height={80} height={80}
className="rounded-lg" className='rounded-lg'
/> />
<div className="space-y-1"> <div className='space-y-1'>
<h3 className="font-medium">Raphaël Glucksmann, Député Européen et Essayiste</h3> <h3 className='font-medium'>
<p className="text-sm text-gray-500">Une vie au service de l'engagement</p> Raphaël Glucksmann, Député Européen et Essayiste
<p className="text-xs text-gray-400">InPower par Louise Aubery</p> </h3>
<p className='text-sm text-gray-500'>
Une vie au service de l'engagement
</p>
<p className='text-xs text-gray-400'>InPower par Louise Aubery</p>
</div> </div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
) );
} }

2
front/components/quote-card.tsx
View File

@ -30,7 +30,7 @@ export function QuoteCard() {
}; };
return ( return (
<Card className='relative'> <Card className='relative transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardContent className='p-6'> <CardContent className='p-6'>
<blockquote className='space-y-2'> <blockquote className='space-y-2'>
<p className='text-lg'>{quote ? quote.quote : "Loading..."}</p> <p className='text-lg'>{quote ? quote.quote : "Loading..."}</p>

24
front/components/todo.tsx
View File

@ -1,35 +1,37 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox" import { Checkbox } from "@/components/ui/checkbox";
export function Todo() { export function Todo() {
const todos = [ const todos = [
{ text: "send e-mails", done: false }, { text: "send e-mails", done: false },
{ text: "do the visuals", done: false }, { text: "do the visuals", done: false },
{ text: "write the contract", done: false }, { text: "write the contract", done: false },
] ];
return ( return (
<Card> <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader> <CardHeader>
<CardTitle>Todo</CardTitle> <CardTitle>Todo</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-4"> <div className='space-y-4'>
{todos.map((todo, i) => ( {todos.map((todo, i) => (
<div key={i} className="flex items-center space-x-2"> <div key={i} className='flex items-center space-x-2'>
<Checkbox id={`todo-${i}`} /> <Checkbox id={`todo-${i}`} />
<label htmlFor={`todo-${i}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> <label
htmlFor={`todo-${i}`}
className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
>
{todo.text} {todo.text}
</label> </label>
</div> </div>
))} ))}
<Button className="w-full mt-4" variant="secondary"> <Button className='w-full mt-4' variant='secondary'>
Add Todo Add Todo
</Button> </Button>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
) );
} }