Merge branch 'dev/cedric' into dev/guerby
This commit is contained in:
gom-by
@@ -63,8 +63,14 @@ const data = {
|
||||
},
|
||||
{
|
||||
title: "Planning",
|
||||
url: "/dashboard/planning",
|
||||
icon: Calendar,
|
||||
url: "/dashboard/planning",
|
||||
items: [
|
||||
{
|
||||
title: "Planning",
|
||||
url: "/dashboard/planning",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Blogs",
|
||||
|
||||
@@ -3,8 +3,8 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { ApiResponse } from "@/hooks/use-api";
|
||||
import { API_URL } from "@/lib/constants";
|
||||
import { ApiResponse } from "@/types/types";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
interface FormData {
|
||||
|
||||
@@ -1,23 +1,44 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import { CalendarIcon } from "lucide-react"
|
||||
import { format } from "date-fns"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import * as z from "zod"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar } from "@/components/ui/calendar"
|
||||
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { useForm } from "react-hook-form"
|
||||
import * as React from "react";
|
||||
import { CalendarIcon } from "lucide-react";
|
||||
import { format } from "date-fns";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import * as z from "zod";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Calendar } from "@/components/ui/calendar";
|
||||
import {
|
||||
CalendarEventExternal,
|
||||
} from "@schedule-x/calendar";
|
||||
import ICalendarEvent from "@/interfaces/ICalendarEvent"
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
SubmitErrorHandler,
|
||||
SubmitHandler,
|
||||
useForm,
|
||||
UseFormReturn,
|
||||
} from "react-hook-form";
|
||||
import { CalendarEventExternal } from "@schedule-x/calendar";
|
||||
import ICalendarEvent from "@/interfaces/ICalendarEvent";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export const eventFormSchema = z.object({
|
||||
title: z.string().min(1, "Titre requis"),
|
||||
@@ -33,254 +54,325 @@ export const eventFormSchema = z.object({
|
||||
frequency: z.enum(["unique", "quotidien", "hebdomadaire", "mensuel"]),
|
||||
frequencyEndDate: z.date().optional(),
|
||||
isVisible: z.boolean().default(true),
|
||||
})
|
||||
});
|
||||
|
||||
export type EventFormValues = z.infer<typeof eventFormSchema>
|
||||
export type EventFormValues = z.infer<typeof eventFormSchema>;
|
||||
|
||||
const frequencies = [
|
||||
{ label: "Unique", value: "unique" },
|
||||
{ label: "Quotidien", value: "quotidien" },
|
||||
{ label: "Hebdomadaire", value: "hebdomadaire" },
|
||||
{ label: "Mensuel", value: "mensuel" },
|
||||
]
|
||||
];
|
||||
|
||||
const isCalendarEventExternal = (event: CalendarEventExternal | Omit<CalendarEventExternal, "id">): event is CalendarEventExternal => {
|
||||
return (event as CalendarEventExternal).id !== undefined;
|
||||
const isCalendarEventExternal = (
|
||||
event: CalendarEventExternal | Omit<CalendarEventExternal, "id">,
|
||||
): event is CalendarEventExternal => {
|
||||
return (event as CalendarEventExternal).id !== undefined;
|
||||
};
|
||||
|
||||
export const EventForm: React.FC<
|
||||
{
|
||||
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
|
||||
onSubmitEvent: (eventFormValues: EventFormValues) => void;
|
||||
}
|
||||
> = ({
|
||||
event,
|
||||
onSubmitEvent,
|
||||
}) => {
|
||||
|
||||
const form = useForm<EventFormValues>({
|
||||
resolver: zodResolver(eventFormSchema),
|
||||
defaultValues: {
|
||||
title: event.title ? event.title : "",
|
||||
startDate: new Date(), // event.start),
|
||||
startTime: `${new Date(event.start).getHours()}:${new Date(event.start).getMinutes()}`,
|
||||
endDate: new Date(), // event.end),
|
||||
endTime: `${new Date(event.end).getHours()}:${new Date(event.end).getMinutes()}`,
|
||||
fullDay: event.fullday,
|
||||
frequency: "unique",
|
||||
isVisible: event.isVisible,
|
||||
},
|
||||
})
|
||||
export const EventForm: React.FC<{
|
||||
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
|
||||
setForm: React.Dispatch<
|
||||
React.SetStateAction<UseFormReturn<EventFormValues> | undefined>
|
||||
>;
|
||||
}> = ({ event, setForm }) => {
|
||||
const _start = new Date(event.start ?? Date.now());
|
||||
const _end = new Date(event.end ?? Date.now());
|
||||
const form = useForm<EventFormValues>({
|
||||
resolver: zodResolver(eventFormSchema),
|
||||
defaultValues: {
|
||||
title: event.title ? event.title : "",
|
||||
startDate: _start, // event.start),
|
||||
startTime: format(_start, "HH:mm"),
|
||||
endDate: _end, // event.end),
|
||||
endTime: format(_end, "HH:mm"),
|
||||
fullDay: event.fullday,
|
||||
frequency: "unique",
|
||||
isVisible: event.isVisible,
|
||||
},
|
||||
});
|
||||
|
||||
const frequency = form.watch("frequency")
|
||||
useEffect(() => {
|
||||
setForm(form);
|
||||
}, []);
|
||||
|
||||
async function onSubmit(data: EventFormValues) {
|
||||
try {
|
||||
const validatedData = eventFormSchema.parse(data)
|
||||
onSubmitEvent(validatedData)
|
||||
} catch (error) {
|
||||
console.error("On submit error : ", error)
|
||||
}
|
||||
}
|
||||
const frequency = form.watch("frequency");
|
||||
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="w-full max-w-md space-y-4">
|
||||
return (
|
||||
<Form {...form}>
|
||||
<form className="w-full max-w-md space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Titre</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Ajouter un titre"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="title"
|
||||
name="startDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Début</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Titre</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Ajouter un titre" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-[1fr,auto,1fr] items-end gap-2">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Début</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="startTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} className="w-[120px]" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<span className="invisible">Until</span>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Fin</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "yyyy-mm-dd hh:mm") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input type="time" {...field} className="w-[120px]" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox checked={field.value} onCheckedChange={field.onChange} />
|
||||
</FormControl>
|
||||
<FormLabel>Journée complète</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Fréquence</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selectionner Fréquence" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{frequencies.map((frequency) => (
|
||||
<SelectItem key={frequency.value} value={frequency.value}>
|
||||
{frequency.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency !== "unique" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequencyEndDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Jusqu'au</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
|
||||
>
|
||||
{field.value ? format(field.value, "MM/dd/yyyy") : <span>Choisis une date</span>}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isVisible"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel className="align-sub">Evènement visible ?</FormLabel>
|
||||
<FormControl>
|
||||
<Checkbox className="m-3 align-top justify-center"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
<Input
|
||||
type="time"
|
||||
{...field}
|
||||
className="w-[120px]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<Button variant="outline" type="button">
|
||||
Abandonner
|
||||
</Button>
|
||||
<Button type="submit" className="bg-[#6B4EFF] hover:bg-[#5B3FEF]">
|
||||
Sauvegarder
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
<span className="invisible">Until</span>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Fin</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="endTime"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="time"
|
||||
{...field}
|
||||
className="w-[120px]"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullDay"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel>Journée complète</FormLabel>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-4 items-end">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequency"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Fréquence</FormLabel>
|
||||
<Select
|
||||
onValueChange={field.onChange}
|
||||
defaultValue={field.value}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selectionner Fréquence" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{frequencies.map((frequency) => (
|
||||
<SelectItem
|
||||
key={frequency.value}
|
||||
value={frequency.value}
|
||||
>
|
||||
{frequency.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{frequency !== "unique" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="frequencyEndDate"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel>Jusqu'au</FormLabel>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"w-full pl-3 text-left font-normal",
|
||||
!field.value &&
|
||||
"text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{field.value ? (
|
||||
format(
|
||||
field.value,
|
||||
"dd/MM/yyyy",
|
||||
)
|
||||
) : (
|
||||
<span>
|
||||
Choisis une date
|
||||
</span>
|
||||
)}
|
||||
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-auto p-0"
|
||||
align="start"
|
||||
>
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={field.value}
|
||||
onSelect={field.onChange}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="isVisible"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex-1">
|
||||
<FormLabel className="align-sub">
|
||||
Evènement visible ?
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
className="m-3 align-top justify-center"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</form>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -2,12 +2,24 @@ import { ExternalLink } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { API_URL } from "@/lib/constants";
|
||||
import Image from "next/image";
|
||||
|
||||
const Hero = () => {
|
||||
const Hero: React.FC<{ background: string }> = ({ background }) => {
|
||||
return (
|
||||
<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
|
||||
<div className="">
|
||||
<div className="magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center bg-blue-50 opacity-100" />
|
||||
<Image
|
||||
src={background}
|
||||
layout="fill"
|
||||
// objectFit="cover"
|
||||
priority
|
||||
alt="Hero image"
|
||||
unoptimized
|
||||
className="grayscale object-cover "
|
||||
/>
|
||||
{/* Gradient and Blur Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
|
||||
<div className="mx-auto flex max-w-5xl flex-col items-center">
|
||||
<div className="z-10 flex flex-col items-center gap-6 text-center">
|
||||
<img
|
||||
@@ -16,10 +28,12 @@ const Hero = () => {
|
||||
className="h-16"
|
||||
/>
|
||||
<div>
|
||||
<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
|
||||
Trouvez votre équilibre
|
||||
<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
|
||||
Trouvez votre <em>équilibre</em> avec
|
||||
<br />
|
||||
avec Latosa-Escrima
|
||||
<span className="font-extrabold text-3xl lg:text-6xl">
|
||||
Latosa Escrima
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-muted-foreground lg:text-xl">
|
||||
Une évolution des arts martiaux Philippins
|
||||
|
||||
59
frontend/components/homepage-gallery.tsx
Normal file
59
frontend/components/homepage-gallery.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import useMedia from "@/hooks/use-media";
|
||||
import { CarouselItem } from "./ui/carousel";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import Lightbox, { SlideImage } from "yet-another-react-lightbox";
|
||||
import "yet-another-react-lightbox/styles.css";
|
||||
import Zoom from "yet-another-react-lightbox/plugins/zoom";
|
||||
|
||||
export default function HomepageGalleryItems() {
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
mutate,
|
||||
setPage,
|
||||
success,
|
||||
setLimit,
|
||||
isLoading,
|
||||
isValidating,
|
||||
} = useMedia(20);
|
||||
|
||||
const [index, setIndex] = useState<number | null>(null);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex justify-center w-full h-full">
|
||||
<Loader2 className="animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{data?.items.map((i, idx) => (
|
||||
<CarouselItem
|
||||
key={i.id}
|
||||
onClick={() => setIndex(idx)}
|
||||
className="pl-[20px] md:max-w-[452px] cursor-pointer"
|
||||
>
|
||||
<div className="w-full aspect-square">
|
||||
<img
|
||||
src={i.url}
|
||||
alt={i.alt}
|
||||
className="inset-0 border rounded-sm w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
))}
|
||||
<Lightbox
|
||||
open={index !== null}
|
||||
close={() => setIndex(null)}
|
||||
slides={data?.items.map((i) => ({ src: i.url }))}
|
||||
index={index ?? 0}
|
||||
plugins={[Zoom]}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -3,12 +3,10 @@ import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useLogin from "@/hooks/use-login";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { API_URL } from "@/lib/constants";
|
||||
import { ApiResponse } from "@/hooks/use-api";
|
||||
|
||||
export function LoginForm({
|
||||
className,
|
||||
|
||||
@@ -13,8 +13,8 @@ import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import MemberDialog, { Member } from "./member-dialog";
|
||||
import * as z from "zod";
|
||||
import { request, useApi } from "@/hooks/use-api";
|
||||
import { useApi } from "@/hooks/use-api";
|
||||
import request from "@/lib/request";
|
||||
import {
|
||||
CircleX,
|
||||
Loader2,
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
UserRoundPen,
|
||||
UserRoundPlus,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function MembersTable() {
|
||||
const {
|
||||
@@ -107,7 +108,7 @@ export default function MembersTable() {
|
||||
<TableRow>
|
||||
{selectMode && (
|
||||
<TableHead className="w-[50px]">
|
||||
Selectionner
|
||||
Sélectionner
|
||||
</TableHead>
|
||||
)}
|
||||
<TableHead>Prénom</TableHead>
|
||||
@@ -140,9 +141,23 @@ export default function MembersTable() {
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>
|
||||
{member.firstname}
|
||||
<Link
|
||||
href={`/dashboard/members/${member.userId}`}
|
||||
>
|
||||
<span className="underline">
|
||||
{member.firstname}
|
||||
</span>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Link
|
||||
href={`/dashboard/members/${member.userId}`}
|
||||
>
|
||||
<span className="underline">
|
||||
{member.lastname}
|
||||
</span>
|
||||
</Link>
|
||||
</TableCell>
|
||||
<TableCell>{member.lastname}</TableCell>
|
||||
<TableCell>{member.email}</TableCell>
|
||||
<TableCell>{member.phone}</TableCell>
|
||||
<TableCell>{member.role}</TableCell>
|
||||
|
||||
15
frontend/components/nav-bar.css
Normal file
15
frontend/components/nav-bar.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.animate-header-slide-down-fade {
|
||||
animation: header-slide-down-fade 1s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes header-slide-down-fade {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-16px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,8 @@
|
||||
"use client";
|
||||
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
|
||||
import { Menu } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
@@ -22,53 +16,27 @@ import Link from "next/link";
|
||||
import { deleteCookie, getCookie } from "cookies-next";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ThemeSwitcher } from "./theme-switcher";
|
||||
import "./nav-bar.css";
|
||||
|
||||
const subMenuItemsOne = [
|
||||
{
|
||||
title: "Blog",
|
||||
description: "The latest industry news, updates, and info",
|
||||
icon: <Book className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Compnay",
|
||||
description: "Our mission is to innovate and empower the world",
|
||||
icon: <Trees className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Careers",
|
||||
description: "Browse job listing and discover our workspace",
|
||||
icon: <Sunset className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
description:
|
||||
"Get in touch with our support team or visit our community forums",
|
||||
icon: <Zap className="size-5 shrink-0" />,
|
||||
},
|
||||
];
|
||||
|
||||
const subMenuItemsTwo = [
|
||||
{
|
||||
title: "Help Center",
|
||||
description: "Get all the answers you need right here",
|
||||
icon: <Zap className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Contact Us",
|
||||
description: "We are here to help you with any questions you have",
|
||||
icon: <Sunset className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
description: "Check the current status of our services and APIs",
|
||||
icon: <Trees className="size-5 shrink-0" />,
|
||||
},
|
||||
{
|
||||
title: "Terms of Service",
|
||||
description: "Our terms and conditions for using our services",
|
||||
icon: <Book className="size-5 shrink-0" />,
|
||||
},
|
||||
];
|
||||
const Href: React.FC<React.PropsWithChildren<{ href: string }>> = ({
|
||||
href,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<Link
|
||||
className={cn(
|
||||
"text-foreground font-bold",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
}),
|
||||
)}
|
||||
href={href}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
const Navbar = () => {
|
||||
const [cookie, setCookie] = useState<string | null>(null);
|
||||
@@ -77,7 +45,7 @@ const Navbar = () => {
|
||||
setCookie(_cookie?.toString() ?? null);
|
||||
}, []);
|
||||
return (
|
||||
<section className="sticky top-0 z-50 bg-background p-4">
|
||||
<section className="sticky top-0 z-50 bg-background/50 border-b border-b-white/10 backdrop-blur-md p-4 transition duration-200 ease-in-out animate-header-slide-down-fade">
|
||||
<div>
|
||||
<nav className="hidden justify-between lg:flex">
|
||||
<div className="flex items-center gap-6">
|
||||
@@ -92,65 +60,42 @@ const Navbar = () => {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Href href="/">Accueil</Href>
|
||||
<Href href="/planning">Planning</Href>
|
||||
<Href href="/about">À propos</Href>
|
||||
<Href href="/gallery">Gallerie</Href>
|
||||
<Href href="/blogs">Blog</Href>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 animate-in ease-in-out">
|
||||
<ThemeSwitcher />
|
||||
{cookie ? (
|
||||
<Link
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
variant: "outline",
|
||||
}),
|
||||
)}
|
||||
href="/"
|
||||
href="/dashboard"
|
||||
>
|
||||
Accueil
|
||||
Compte
|
||||
</Link>
|
||||
<a
|
||||
) : (
|
||||
<Link
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
variant: "outline",
|
||||
}),
|
||||
)}
|
||||
href="/planning"
|
||||
href="/login"
|
||||
>
|
||||
Planning
|
||||
</a>
|
||||
<a
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
}),
|
||||
)}
|
||||
href="/about"
|
||||
>
|
||||
A propos
|
||||
</a>
|
||||
<a
|
||||
className={cn(
|
||||
"text-muted-foreground",
|
||||
navigationMenuTriggerStyle,
|
||||
buttonVariants({
|
||||
variant: "ghost",
|
||||
}),
|
||||
)}
|
||||
href="/blogs"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 animate-in ease-in-out">
|
||||
<ThemeSwitcher />
|
||||
<Button variant="outline">
|
||||
{cookie ? (
|
||||
<Link href="/dashboard">Compte</Link>
|
||||
) : (
|
||||
<Link href="/login">Se connecter</Link>
|
||||
)}
|
||||
</Button>
|
||||
Se connecter
|
||||
</Link>
|
||||
)}
|
||||
{cookie ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
@@ -219,6 +164,12 @@ const Navbar = () => {
|
||||
>
|
||||
À propos
|
||||
</Link>
|
||||
<Link
|
||||
href="/gallery"
|
||||
className="font-semibold"
|
||||
>
|
||||
Gallerie
|
||||
</Link>
|
||||
<Link
|
||||
href="/blog"
|
||||
className="font-semibold"
|
||||
|
||||
@@ -23,7 +23,7 @@ interface PhotoDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onDelete?: (id: Media["id"]) => void;
|
||||
onSave: (photo: Omit<Media, "id">, file: File) => void;
|
||||
onSave: (photo: Omit<Media, "id"> | Media, file: File) => void;
|
||||
}
|
||||
|
||||
export function PhotoDialog({
|
||||
@@ -34,7 +34,7 @@ export function PhotoDialog({
|
||||
onSave,
|
||||
}: PhotoDialogProps) {
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [newPhoto, setNewPhoto] = useState<Omit<Media, "id">>({
|
||||
const [newPhoto, setNewPhoto] = useState<Omit<Media, "id"> | Media>({
|
||||
url: "",
|
||||
alt: "",
|
||||
path: "",
|
||||
|
||||
27
frontend/components/photo-viewer.tsx
Normal file
27
frontend/components/photo-viewer.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@radix-ui/react-dialog";
|
||||
import Image, { ImageProps } from "next/image";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const PhotoViewer: React.FC<ImageProps> = ({ ...props }) => {
|
||||
const [selected, setSelected] = useState(false);
|
||||
return (
|
||||
<Dialog open={selected} onOpenChange={setSelected}>
|
||||
<DialogTitle>{props.alt}</DialogTitle>
|
||||
<DialogTrigger asChild>
|
||||
<Image onClick={() => setSelected(true)} {...props} />
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<Image {...props} unoptimized />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhotoViewer;
|
||||
@@ -1,16 +1,14 @@
|
||||
"use client";
|
||||
|
||||
import { ApiResponse, request } from "@/hooks/use-api";
|
||||
import { ApiResponse } from "@/types/types";
|
||||
import request from "@/lib/request";
|
||||
import "@schedule-x/theme-shadcn/dist/index.css";
|
||||
import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
|
||||
import { createEventsServicePlugin } from "@schedule-x/events-service";
|
||||
import { createDragAndDropPlugin } from "@schedule-x/drag-and-drop";
|
||||
import { createResizePlugin } from "@schedule-x/resize";
|
||||
import { createEventRecurrencePlugin } from "@schedule-x/event-recurrence";
|
||||
import {
|
||||
createViewDay,
|
||||
createViewWeek,
|
||||
} from "@schedule-x/calendar";
|
||||
import { createViewDay, createViewWeek } from "@schedule-x/calendar";
|
||||
import { useEffect, useState } from "react";
|
||||
import { format } from "date-fns";
|
||||
import { Dialog, DialogProps } from "@radix-ui/react-dialog";
|
||||
@@ -27,62 +25,43 @@ import { getCookie } from "cookies-next";
|
||||
import { useTheme } from "next-themes";
|
||||
import { EventForm, EventFormValues } from "./event-dialog";
|
||||
import ICalendarEvent from "@/interfaces/ICalendarEvent";
|
||||
|
||||
const mapFrequencyToRrule = (frequency: "unique" | "quotidien" | "hebdomadaire" | "mensuel", frequencyEndDate?: Date): string => {
|
||||
let rrule = "";
|
||||
|
||||
switch (frequency) {
|
||||
case "quotidien":
|
||||
rrule = "FREQ=DAILY";
|
||||
break;
|
||||
case "hebdomadaire":
|
||||
rrule = "FREQ=WEEKLY";
|
||||
break;
|
||||
case "mensuel":
|
||||
rrule = "FREQ=MONTHLY";
|
||||
break;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
|
||||
if (frequencyEndDate) {
|
||||
const until = frequencyEndDate.getTime();
|
||||
const untilDate = new Date(until);
|
||||
const epochDateString = untilDate.toISOString().replace(/[-:]/g, "").split(".")[0]; // Format as YYYYMMDDTHHmmss
|
||||
rrule += `;UNTIL=${epochDateString}`;
|
||||
}
|
||||
|
||||
return rrule;
|
||||
};
|
||||
import { UseFormReturn } from "react-hook-form";
|
||||
import mapFrequencyToRrule from "@/lib/mapFrequencyToRrule";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
const Planning: React.FC<{
|
||||
events: ICalendarEvent[];
|
||||
mutate?: KeyedMutator<ApiResponse<ICalendarEvent[]>>;
|
||||
}> = ({ events, mutate }) => {
|
||||
modifiable?: boolean;
|
||||
}> = ({ events, mutate, modifiable = false }) => {
|
||||
const { toast } = useToast();
|
||||
const { resolvedTheme } = useTheme();
|
||||
console.log(resolvedTheme);
|
||||
const isConnected = getCookie("auth_token");
|
||||
const plugins = isConnected
|
||||
? [
|
||||
createEventsServicePlugin(),
|
||||
createDragAndDropPlugin(),
|
||||
createResizePlugin(),
|
||||
createEventRecurrencePlugin(),
|
||||
]
|
||||
: [];
|
||||
const [eventSelected, setEventSelected] =
|
||||
useState<ICalendarEvent | null>(null);
|
||||
const [newEvent, setNewEvent] = useState<Omit<
|
||||
ICalendarEvent,
|
||||
"id"
|
||||
> | null>(null);
|
||||
const plugins =
|
||||
isConnected && modifiable
|
||||
? [
|
||||
createEventsServicePlugin(),
|
||||
createDragAndDropPlugin(),
|
||||
createResizePlugin(),
|
||||
createEventRecurrencePlugin(),
|
||||
]
|
||||
: [];
|
||||
const [eventSelected, setEventSelected] = useState<ICalendarEvent | null>(
|
||||
null,
|
||||
);
|
||||
const [newEvent, setNewEvent] = useState<Omit<ICalendarEvent, "id"> | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const handleEventUpdate = async (eventSelected: ICalendarEvent) => {
|
||||
const event: ICalendarEvent = {
|
||||
const handleEventUpdate = async (
|
||||
eventSelected: ICalendarEvent | Omit<ICalendarEvent, "id">,
|
||||
) => {
|
||||
if (!isConnected || !modifiable) return;
|
||||
const event = {
|
||||
...eventSelected,
|
||||
start: `${new Date(eventSelected.start).toISOString()}`,
|
||||
end: `${new Date(eventSelected.end).toISOString()}`,
|
||||
};
|
||||
} as ICalendarEvent;
|
||||
try {
|
||||
const res = await request<undefined>(`/events/${event.id}/update`, {
|
||||
method: "PATCH",
|
||||
@@ -91,10 +70,19 @@ const Planning: React.FC<{
|
||||
csrfToken: false,
|
||||
});
|
||||
if (res.status === "Error") {
|
||||
// calendar?.events?.update(oldEvent);
|
||||
toast({
|
||||
title: "Une erreur est survenue.",
|
||||
description: res.message,
|
||||
});
|
||||
} else {
|
||||
mutate?.();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
if (e instanceof Error)
|
||||
toast({
|
||||
title: "Une erreur est survenue.",
|
||||
description: e.message,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -116,11 +104,10 @@ const Planning: React.FC<{
|
||||
end: format(new Date(event.end), "yyyy-MM-dd HH:mm"),
|
||||
})),
|
||||
callbacks: {
|
||||
onEventClick(event, e) {
|
||||
onEventClick(event, e) {
|
||||
setEventSelected(event as ICalendarEvent);
|
||||
},
|
||||
},
|
||||
async onEventUpdate(newEvent) {
|
||||
|
||||
await handleEventUpdate(newEvent as ICalendarEvent);
|
||||
},
|
||||
},
|
||||
@@ -136,11 +123,14 @@ const Planning: React.FC<{
|
||||
calendar?.setTheme(resolvedTheme === "dark" ? "dark" : "light");
|
||||
}, [resolvedTheme]);
|
||||
|
||||
const AddButton: React.FC = () => (
|
||||
<Button onClick={() => setNewEvent({})} variant="outline">
|
||||
Nouveau
|
||||
</Button>
|
||||
);
|
||||
const AddButton: React.FC = () => {
|
||||
if (!isConnected || !modifiable) return <></>;
|
||||
return (
|
||||
<Button onClick={() => setNewEvent({})} variant="outline">
|
||||
Nouveau
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -148,85 +138,125 @@ const Planning: React.FC<{
|
||||
<AddButton />
|
||||
<ScheduleXCalendar calendarApp={calendar} />
|
||||
</div>
|
||||
{newEvent && (
|
||||
{newEvent && isConnected && modifiable && (
|
||||
<EventDialog
|
||||
open={newEvent !== null || false}
|
||||
onOpenChange={(open) => {
|
||||
setNewEvent((e) => (open ? e : null));
|
||||
}}
|
||||
event={newEvent}
|
||||
onSubmitEvent={async (eventFormValues) => {
|
||||
onAdd={async (formValues) => {
|
||||
if (!isConnected || !modifiable) return;
|
||||
const rrule = mapFrequencyToRrule(
|
||||
eventFormValues.frequency,
|
||||
eventFormValues.frequencyEndDate
|
||||
)
|
||||
try {
|
||||
const event: Omit<ICalendarEvent, "id"> = {
|
||||
...newEvent,
|
||||
start: `${eventFormValues.startDate} ${eventFormValues.startTime}`,
|
||||
end: `${eventFormValues.endDate} ${eventFormValues.endTime}`,
|
||||
title: `${eventFormValues.title}`,
|
||||
fullDay: eventFormValues.fullDay,
|
||||
rrule: rrule,
|
||||
isVisible: eventFormValues.isVisible
|
||||
}
|
||||
const res = await request<undefined>(
|
||||
`/events/new`,
|
||||
{
|
||||
method: "POST",
|
||||
body: event,
|
||||
requiresAuth: true,
|
||||
csrfToken: false,
|
||||
},
|
||||
);
|
||||
if (res.status === "Error") {
|
||||
console.log("Error");
|
||||
}
|
||||
if (res.status === "Success") {
|
||||
mutate?.();
|
||||
console.log("Success");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
formValues.frequency,
|
||||
formValues.frequencyEndDate,
|
||||
);
|
||||
const [sHours, sMinutes] =
|
||||
formValues.startTime.split(":");
|
||||
formValues.startDate.setHours(
|
||||
parseInt(sHours),
|
||||
parseInt(sMinutes),
|
||||
);
|
||||
const [eHours, eMinutes] =
|
||||
formValues.endTime.split(":");
|
||||
formValues.endDate.setHours(
|
||||
parseInt(eHours),
|
||||
parseInt(eMinutes),
|
||||
);
|
||||
console.log(formValues.endDate);
|
||||
const event: Omit<ICalendarEvent, "id"> = {
|
||||
...newEvent,
|
||||
start: formValues.startDate.toISOString(),
|
||||
end: formValues.endDate.toISOString(),
|
||||
title: `${formValues.title}`,
|
||||
fullday: formValues.fullDay,
|
||||
rrule: rrule,
|
||||
isVisible: formValues.isVisible,
|
||||
};
|
||||
const res = await request<undefined>(`/events/new`, {
|
||||
method: "POST",
|
||||
body: event,
|
||||
requiresAuth: true,
|
||||
csrfToken: false,
|
||||
});
|
||||
if (res.status === "Error") {
|
||||
toast({
|
||||
title: "Une erreur est survenue.",
|
||||
description: res.message,
|
||||
});
|
||||
}
|
||||
if (res.status === "Success") {
|
||||
mutate?.();
|
||||
console.log("Success");
|
||||
}
|
||||
}}
|
||||
event={newEvent}
|
||||
/>
|
||||
)}
|
||||
{eventSelected && (
|
||||
{eventSelected && modifiable && isConnected && (
|
||||
<EventDialog
|
||||
open={eventSelected !== null || false}
|
||||
onOpenChange={(open) => {
|
||||
setEventSelected((e) => (open ? e : null));
|
||||
}}
|
||||
event={eventSelected}
|
||||
onSubmitEvent={ (eventForm) => {
|
||||
console.log("Event form: " + eventForm)
|
||||
}}
|
||||
onDelete={async () => {
|
||||
calendar?.events?.remove(eventSelected.id);
|
||||
onDelete={async (id) => {
|
||||
if (!isConnected || !modifiable) return;
|
||||
calendar?.events?.remove(id);
|
||||
try {
|
||||
const res = await request<undefined>(
|
||||
`/events/${eventSelected.id}/delete`,
|
||||
`/events/${id}/delete`,
|
||||
{
|
||||
method: "DELETE",
|
||||
body: eventSelected,
|
||||
requiresAuth: false,
|
||||
requiresAuth: true,
|
||||
csrfToken: false,
|
||||
},
|
||||
);
|
||||
if (res.status === "Error") {
|
||||
console.log("Error");
|
||||
toast({
|
||||
title: "Une erreur est survenue.",
|
||||
description: res.message,
|
||||
});
|
||||
}
|
||||
if (res.status === "Success") {
|
||||
console.log("Success");
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} catch (e: unknown) {
|
||||
if (e instanceof Error)
|
||||
toast({
|
||||
title: "Une erreur est survenue.",
|
||||
description: e.message,
|
||||
});
|
||||
}
|
||||
setEventSelected(null);
|
||||
}}
|
||||
onUpdate={async () => {
|
||||
await handleEventUpdate(eventSelected);
|
||||
onUpdate={async (formValues) => {
|
||||
if (!isConnected || !modifiable) return;
|
||||
const rrule = mapFrequencyToRrule(
|
||||
formValues.frequency,
|
||||
formValues.frequencyEndDate,
|
||||
);
|
||||
const [sHours, sMinutes] =
|
||||
formValues.startTime.split(":");
|
||||
formValues.startDate.setHours(
|
||||
parseInt(sHours),
|
||||
parseInt(sMinutes),
|
||||
);
|
||||
const [eHours, eMinutes] =
|
||||
formValues.endTime.split(":");
|
||||
formValues.endDate.setHours(
|
||||
parseInt(eHours),
|
||||
parseInt(eMinutes),
|
||||
);
|
||||
const event: ICalendarEvent = {
|
||||
...eventSelected,
|
||||
start: formValues.startDate.toISOString(),
|
||||
end: formValues.endDate.toISOString(),
|
||||
title: `${formValues.title}`,
|
||||
fullday: formValues.fullDay,
|
||||
rrule: rrule,
|
||||
isVisible: formValues.isVisible,
|
||||
};
|
||||
await handleEventUpdate(event);
|
||||
setEventSelected(null);
|
||||
}}
|
||||
/>
|
||||
@@ -237,59 +267,55 @@ const Planning: React.FC<{
|
||||
|
||||
const EventDialog: React.FC<
|
||||
{
|
||||
onSubmitEvent: (eventFormValues: EventFormValues) => void;
|
||||
onDelete?: () => void;
|
||||
onUpdate?: () => void;
|
||||
onAdd?: () => void;
|
||||
onDelete?: (id: string) => void;
|
||||
onUpdate?: (formValues: EventFormValues) => void;
|
||||
onAdd?: (formValues: EventFormValues) => void;
|
||||
event: ICalendarEvent | Omit<ICalendarEvent, "id">;
|
||||
} & DialogProps
|
||||
> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSubmitEvent,
|
||||
onDelete,
|
||||
onUpdate,
|
||||
onAdd,
|
||||
event,
|
||||
}) => {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{event.title}</DialogTitle>
|
||||
<DialogDescription>{event.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<EventForm
|
||||
event={event}
|
||||
onSubmitEvent={onSubmitEvent}/>
|
||||
<DialogFooter className="flex flex-row justify-end">
|
||||
{onUpdate && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => onUpdate()}
|
||||
type="submit"
|
||||
>
|
||||
Actualiser
|
||||
</Button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => onDelete()}
|
||||
type="submit"
|
||||
>
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
{onAdd && !onUpdate && !onDelete && (
|
||||
<Button onClick={() => onAdd()} type="submit">
|
||||
Créer
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent >
|
||||
</Dialog >
|
||||
);
|
||||
> = ({ open, onOpenChange, onDelete, onUpdate, onAdd, event }) => {
|
||||
const [form, setForm] = useState<UseFormReturn<EventFormValues>>();
|
||||
|
||||
const submitForm = (event: "add" | "update") => {
|
||||
const callback = event === "add" ? onAdd : onUpdate;
|
||||
if (callback) form?.handleSubmit(callback)();
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{event.title}</DialogTitle>
|
||||
<DialogDescription>{event.description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<EventForm event={event} setForm={setForm} />
|
||||
<DialogFooter className="flex flex-row justify-end">
|
||||
{onUpdate && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => submitForm("update")}
|
||||
type="submit"
|
||||
>
|
||||
Actualiser
|
||||
</Button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() => onDelete(event.id)}
|
||||
type="submit"
|
||||
>
|
||||
Supprimer
|
||||
</Button>
|
||||
)}
|
||||
{onAdd && !onUpdate && !onDelete && (
|
||||
<Button onClick={() => submitForm("add")} type="submit">
|
||||
Créer
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default Planning;
|
||||
|
||||
@@ -14,6 +14,18 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import type IShortcode from "@/interfaces/IShortcode";
|
||||
import Image from "next/image";
|
||||
import Media from "@/interfaces/Media";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "./ui/pagination";
|
||||
import useMedia from "@/hooks/use-media";
|
||||
import { Loader2 } from "lucide-react";
|
||||
|
||||
interface ShortcodeDialogProps {
|
||||
onSave: (shortcode: IShortcode) => void;
|
||||
@@ -33,6 +45,8 @@ export default function ShortcodeDialog({
|
||||
);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!(_shortcode?.code && (_shortcode.media_id || _shortcode.value)))
|
||||
return;
|
||||
onSave(_shortcode);
|
||||
setOpen();
|
||||
resetForm();
|
||||
@@ -92,6 +106,7 @@ export default function ShortcodeDialog({
|
||||
setShortcode((p) => ({
|
||||
...p,
|
||||
value: e.target.value,
|
||||
media_id: undefined,
|
||||
}))
|
||||
}
|
||||
className="col-span-3"
|
||||
@@ -99,27 +114,29 @@ export default function ShortcodeDialog({
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="media">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="mediaId" className="text-right">
|
||||
Media ID
|
||||
</Label>
|
||||
<Input
|
||||
id="mediaId"
|
||||
value={_shortcode.media_id}
|
||||
onChange={(e) =>
|
||||
setShortcode((p) => ({
|
||||
...p,
|
||||
media_id: e.target.value,
|
||||
}))
|
||||
}
|
||||
className="col-span-3"
|
||||
/>
|
||||
</div>
|
||||
<PhotoGrid
|
||||
onSelect={(photo) => {
|
||||
setShortcode((p) => ({
|
||||
...p,
|
||||
media_id: photo.id,
|
||||
value: undefined,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button type="submit" onClick={handleSave}>
|
||||
<Button
|
||||
disabled={
|
||||
!(
|
||||
_shortcode?.code &&
|
||||
(_shortcode.media_id || _shortcode.value)
|
||||
)
|
||||
}
|
||||
type="submit"
|
||||
onClick={handleSave}
|
||||
>
|
||||
Enregistrer
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
@@ -127,3 +144,144 @@ export default function ShortcodeDialog({
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
const LazyImage = ({
|
||||
photo,
|
||||
onClick,
|
||||
isSelected,
|
||||
}: {
|
||||
photo: Media;
|
||||
onClick: () => void;
|
||||
isSelected: boolean;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={`aspect-square ${isSelected ? "ring-4 ring-primary" : ""}`}
|
||||
>
|
||||
<Image
|
||||
src={photo.url || "/placeholder.svg"}
|
||||
alt={photo.alt}
|
||||
width={300}
|
||||
height={300}
|
||||
className="object-cover w-full h-full cursor-pointer transition-transform hover:scale-105"
|
||||
onClick={onClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const PhotoGrid: React.FC<{ onSelect: (photo: Media) => void }> = ({
|
||||
onSelect,
|
||||
}) => {
|
||||
const { data, error, isLoading, success, setPage, setLimit, mutate } =
|
||||
useMedia(5);
|
||||
const [selectedPhoto, setSelectedPhoto] = useState<Media | null>(null);
|
||||
|
||||
const handlePhotoClick = (photo: Media) => {
|
||||
setSelectedPhoto(photo);
|
||||
onSelect(photo);
|
||||
};
|
||||
|
||||
const handleChangeSelection = () => {
|
||||
setSelectedPhoto(null);
|
||||
// if (!photos) return;
|
||||
// const currentIndex = photos.findIndex(
|
||||
// (photo) => photo.id === selectedPhoto?.id,
|
||||
// );
|
||||
// const nextIndex = (currentIndex + 1) % photos.length;
|
||||
// setSelectedPhoto(photos[nextIndex]);
|
||||
};
|
||||
|
||||
if (isLoading) return <Loader2 className="animate-spin" />;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4">
|
||||
<h1 className="text-2xl font-bold mb-4">Gallerie Photo</h1>
|
||||
{selectedPhoto ? (
|
||||
<div className="flex flex-col items-center">
|
||||
<Image
|
||||
src={selectedPhoto.url || "/placeholder.svg"}
|
||||
alt={selectedPhoto.alt}
|
||||
width={600}
|
||||
height={600}
|
||||
className="w-full max-w-2xl h-auto mb-4 rounded-lg"
|
||||
/>
|
||||
<div className="flex gap-4 mt-4">
|
||||
<Button onClick={handleChangeSelection}>
|
||||
Changer de sélection
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{data?.items?.map((photo) => {
|
||||
return (
|
||||
<LazyImage
|
||||
photo={photo}
|
||||
key={photo.id}
|
||||
onClick={() => handlePhotoClick(photo)}
|
||||
isSelected={false}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Pagination className="mt-8">
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setPage((prev) =>
|
||||
Math.max(prev - 1, 1),
|
||||
);
|
||||
}}
|
||||
className={
|
||||
data?.page === 1
|
||||
? "pointer-events-none opacity-50"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
{[...Array(data?.totalPages)].map((_, i) => (
|
||||
<PaginationItem key={i + 1}>
|
||||
<PaginationLink
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setPage(i + 1);
|
||||
}}
|
||||
isActive={data?.page === i + 1}
|
||||
>
|
||||
{i + 1}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
))}
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setPage((prev) =>
|
||||
Math.min(
|
||||
prev + 1,
|
||||
data?.totalPages ?? 1,
|
||||
),
|
||||
);
|
||||
}}
|
||||
className={
|
||||
data?.page === data?.totalPages
|
||||
? "pointer-events-none opacity-50"
|
||||
: ""
|
||||
}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||
import { Check } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
React.ComponentRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
))
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
className={cn("flex items-center justify-center text-current")}
|
||||
>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
export { Checkbox }
|
||||
export { Checkbox };
|
||||
|
||||
@@ -104,7 +104,7 @@ const FormLabel = React.forwardRef<
|
||||
FormLabel.displayName = "FormLabel";
|
||||
|
||||
const FormControl = React.forwardRef<
|
||||
React.ElementRef<typeof Slot>,
|
||||
React.ComponentRef<typeof Slot>,
|
||||
React.ComponentPropsWithoutRef<typeof Slot>
|
||||
>(({ ...props }, ref) => {
|
||||
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||
|
||||
@@ -6,7 +6,7 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.Root
|
||||
|
||||
129
frontend/components/ui/toast.tsx
Normal file
129
frontend/components/ui/toast.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as ToastPrimitives from "@radix-ui/react-toast";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider;
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ComponentRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
||||
|
||||
const toastVariants = cva(
|
||||
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "border bg-background text-foreground",
|
||||
destructive:
|
||||
"destructive group border-destructive bg-destructive text-destructive-foreground",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
Toast.displayName = ToastPrimitives.Root.displayName;
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
|
||||
className,
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
));
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn("text-sm font-semibold [&+div]:text-xs", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm opacity-90", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
};
|
||||
43
frontend/components/ui/toaster.tsx
Normal file
43
frontend/components/ui/toaster.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import {
|
||||
Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from "@/components/ui/toast";
|
||||
|
||||
export function Toaster() {
|
||||
const { toasts } = useToast();
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map(function ({
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Toast key={id} {...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && (
|
||||
<ToastDescription>
|
||||
{description}
|
||||
</ToastDescription>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>
|
||||
);
|
||||
})}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
@@ -18,6 +18,13 @@ export default function YouTubeEmbed({
|
||||
}) {
|
||||
const [isIframeLoaded, setIframeLoaded] = useState(loadIframe);
|
||||
|
||||
const id =
|
||||
typeof video === "string"
|
||||
? video
|
||||
: typeof video.id === "string"
|
||||
? video.snippet.resourceId.videoId
|
||||
: video.id.videoId;
|
||||
|
||||
const isString = typeof video === "string";
|
||||
|
||||
const _loadIframe = () => setIframeLoaded(true);
|
||||
@@ -36,7 +43,7 @@ export default function YouTubeEmbed({
|
||||
className="rounded-md shadow-current aspect-video"
|
||||
width={width === "full" ? "100%" : width}
|
||||
height={height === "full" ? "100%" : height}
|
||||
src={`https://www.youtube-nocookie.com/embed/${isString ? video : video.id.videoId}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
|
||||
src={`https://www.youtube-nocookie.com/embed/${id}?rel=0&modestbranding=1&autoplay=${autoPlay ? 1 : 0}`}
|
||||
title={
|
||||
isString ? "YouTube video player" : video.snippet.title
|
||||
}
|
||||
@@ -50,7 +57,7 @@ export default function YouTubeEmbed({
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="w-full h-full object-cover rounded-md shadow-current"
|
||||
src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
|
||||
src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
|
||||
alt={
|
||||
isString
|
||||
? "YouTube video player"
|
||||
@@ -62,7 +69,7 @@ export default function YouTubeEmbed({
|
||||
width={width}
|
||||
height={height}
|
||||
className="w-full h-full object-cover rounded-md shadow-current"
|
||||
src={`https://img.youtube.com/vi/${isString ? video : video.id.videoId}/hqdefault.jpg`}
|
||||
src={`https://img.youtube.com/vi/${id}/hqdefault.jpg`}
|
||||
alt={
|
||||
isString
|
||||
? "YouTube video player"
|
||||
|
||||
Reference in New Issue
Block a user