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() {
return (
<Card>
<Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader>
<div className="text-sm font-medium">JEUDI</div>
<div className="text-4xl font-bold">24</div>
<div className='text-sm font-medium'>JEUDI</div>
<div className='text-4xl font-bold'>24</div>
</CardHeader>
<CardContent>
<div className="space-y-2">
<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>
<div className='space-y-2'>
<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>
</div>
</CardContent>
</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() {
return (
<Card>
<Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader>
<CardTitle>Messages - Non Lu</CardTitle>
</CardHeader>
<CardContent className="p-6 text-center text-gray-500">
<CardContent className='p-6 text-center text-gray-500'>
Aucun nouveau messages
</CardContent>
</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() {
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",
},
{
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",
},
{
title: "China's Baidu reports 15% revenue growth, beating expectations",
source: "CNBC",
},
]
];
return (
<Card>
<Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader>
<CardTitle>News</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className='space-y-4'>
{newsItems.map((item, i) => (
<div key={i} className="space-y-1">
<h3 className="font-medium">{item.title}</h3>
<p className="text-sm text-gray-500">{item.source}</p>
<div key={i} className='space-y-1'>
<h3 className='font-medium'>{item.title}</h3>
<p className='text-sm text-gray-500'>{item.source}</p>
</div>
))}
</div>
</CardContent>
</Card>
)
);
}

35
front/components/podcast.tsx
View File

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

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

@ -30,7 +30,7 @@ export function QuoteCard() {
};
return (
<Card className='relative'>
<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>

24
front/components/todo.tsx
View File

@ -1,35 +1,37 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
export function Todo() {
const todos = [
{ text: "send e-mails", done: false },
{ text: "do the visuals", done: false },
{ text: "write the contract", done: false },
]
];
return (
<Card>
<Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
<CardHeader>
<CardTitle>Todo</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className='space-y-4'>
{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}`} />
<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}
</label>
</div>
))}
<Button className="w-full mt-4" variant="secondary">
<Button className='w-full mt-4' variant='secondary'>
Add Todo
</Button>
</div>
</CardContent>
</Card>
)
);
}