@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/components/waiting-section.tsx

@@ -0,0 +1,15 @@
+import {Waiting, WaitingProps} from "./waiting";
+import React from "react";
+
+
+export interface WaitingSectionProps extends WaitingProps, React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+
+export function WaitingSection({label, className, ...props}: WaitingSectionProps) {
+    return (
+        <div {...props} className={`flex-auto flex justify-center items-center ${className || ''}`}>
+            <Waiting label={label}/>
+        </div>
+    )
+}

package/src/presentation/components/waiting.tsx

@@ -0,0 +1,14 @@
+import {WaitingBar} from "./waiting-bar";
+
+export interface WaitingProps {
+    label?: string;
+}
+
+export function Waiting({label}: WaitingProps) {
+    return (
+        <div className="flex flex-col gap-2 animate-zoom-in">
+            <div className="text-xs text-muted-foreground animate-pulse duration-2000">{label ?? 'Traitement en cours...'}</div>
+            <WaitingBar/>
+        </div>
+    )
+}

package/src/presentation/data-grid/data-grid-empty.tsx

@@ -0,0 +1,24 @@
+import {Empty, EmptyContent, EmptyDescription, EmptyMedia, EmptyTitle} from "../ui/empty";
+import {DatabaseSearchIcon} from "lucide-react";
+import {Button} from "../ui/button";
+import {useRouter} from "next/navigation";
+
+export function DataGridEmpty() {
+    const router = useRouter();
+
+    return (
+        <div
+            className="flex-auto flex flex-col items-center justify-center min-h-[40dvh]">
+            <Empty className="opacity-50">
+                <EmptyMedia>
+                    <DatabaseSearchIcon size={48} strokeWidth={1}/>
+                </EmptyMedia>
+                <EmptyTitle>Resultat</EmptyTitle>
+                <EmptyDescription>Aucun resultat trouvé</EmptyDescription>
+                <EmptyContent>
+                    <Button variant="outline" onClick={() => router.refresh()}>Actualiser</Button>
+                </EmptyContent>
+            </Empty>
+        </div>
+    )
+}

package/src/presentation/data-grid/data-grid-search-engine.tsx

@@ -0,0 +1,32 @@
+import {Table} from "@tanstack/react-table";
+import {SearchIcon, XIcon} from "lucide-react";
+import {Button} from "../ui/button";
+
+
+export interface DataGridSearchEngineProps<TData> {
+    table: Table<TData>;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+export function DataGridSearchEngine<TData>({table, value, onChange}: DataGridSearchEngineProps<TData>) {
+    return (
+        <div className="flex-auto flex flex-row items-center gap-2 rounded-lg border bg-foreground/5 text-foreground  focus-within:bg-primary/10 focus-within:text-primary focus-within:border-primary/20 transition-all px-2.5 py-0.5">
+            <SearchIcon className={'size-3'}/>
+            <input
+                className="flex-auto focus:outline-none"
+                type="search"
+                placeholder="Recherche..."
+                value={value}
+                onChange={event => onChange?.(event.target.value)}
+            />
+            <Button
+                variant="ghost"
+                className="p-0! hover:bg-transparent"
+                onClick={() => onChange?.('')}
+            >
+                <XIcon className={'size-4'}/>
+            </Button>
+        </div>
+    )
+}