feat: refactor DataTableProps type declaration and remove unused Facehash component files
This commit is contained in:
parent
a87b9f57a7
commit
b274a729ee
6 changed files with 11 additions and 564 deletions
|
|
@ -34,7 +34,7 @@ import { cn } from "~/lib/utils";
|
||||||
import { DataTableProvider } from "~/providers/DataTableProvider";
|
import { DataTableProvider } from "~/providers/DataTableProvider";
|
||||||
import { ContextMenu, ContextMenuTrigger } from "../ui/context-menu";
|
import { ContextMenu, ContextMenuTrigger } from "../ui/context-menu";
|
||||||
|
|
||||||
export type DataTableProps<TData, TValue> = {
|
type DataTableProps<TData, TValue> = {
|
||||||
columns: ColumnDef<TData, TValue>[];
|
columns: ColumnDef<TData, TValue>[];
|
||||||
data: TData[];
|
data: TData[];
|
||||||
pinnedFiltri?: PinnedFiltro[];
|
pinnedFiltri?: PinnedFiltro[];
|
||||||
|
|
|
||||||
|
|
@ -1,352 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
import { isColorDark } from "~/lib/color";
|
|
||||||
import { FACES } from "./faces";
|
|
||||||
|
|
||||||
// from https://github.com/cossistantcom/cossistant/tree/main/packages/facehash
|
|
||||||
|
|
||||||
type Intensity3D = "none" | "subtle" | "medium" | "dramatic";
|
|
||||||
type Variant = "gradient" | "solid";
|
|
||||||
|
|
||||||
export interface FacehashProps
|
|
||||||
extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
||||||
/**
|
|
||||||
* String to generate a deterministic face from.
|
|
||||||
* Same string always produces the same face.
|
|
||||||
*/
|
|
||||||
name: string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Size in pixels or CSS units.
|
|
||||||
* @default 40
|
|
||||||
*/
|
|
||||||
size?: number | string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Background style.
|
|
||||||
* - "gradient": Adds gradient overlay (default)
|
|
||||||
* - "solid": Plain background color
|
|
||||||
* @default "gradient"
|
|
||||||
*/
|
|
||||||
variant?: Variant;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 3D effect intensity.
|
|
||||||
* @default "dramatic"
|
|
||||||
*/
|
|
||||||
intensity3d?: Intensity3D;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Enable hover interaction.
|
|
||||||
* When true, face "looks straight" on hover.
|
|
||||||
* @default true
|
|
||||||
*/
|
|
||||||
interactive?: boolean;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show first letter of name below the face.
|
|
||||||
* @default true
|
|
||||||
*/
|
|
||||||
showInitial?: boolean;
|
|
||||||
|
|
||||||
initialsCount?: number;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Hex color array for inline styles.
|
|
||||||
* Use this OR colorClasses, not both.
|
|
||||||
*/
|
|
||||||
colors?: string[];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Tailwind class array for background colors.
|
|
||||||
* Example: ["bg-pink-500 dark:bg-pink-600", "bg-blue-500 dark:bg-blue-600"]
|
|
||||||
* Use this OR colors, not both.
|
|
||||||
*/
|
|
||||||
colorClasses?: string[];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Custom gradient overlay class (Tailwind).
|
|
||||||
* When provided, replaces the default pure CSS gradient.
|
|
||||||
* Only used when variant="gradient".
|
|
||||||
*/
|
|
||||||
gradientOverlayClass?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================================================
|
|
||||||
// Constants
|
|
||||||
// ============================================================================
|
|
||||||
|
|
||||||
const INTENSITY_PRESETS = {
|
|
||||||
none: {
|
|
||||||
rotateRange: 0,
|
|
||||||
translateZ: 0,
|
|
||||||
perspective: "none",
|
|
||||||
},
|
|
||||||
subtle: {
|
|
||||||
rotateRange: 5,
|
|
||||||
translateZ: 4,
|
|
||||||
perspective: "800px",
|
|
||||||
},
|
|
||||||
medium: {
|
|
||||||
rotateRange: 10,
|
|
||||||
translateZ: 8,
|
|
||||||
perspective: "500px",
|
|
||||||
},
|
|
||||||
dramatic: {
|
|
||||||
rotateRange: 15,
|
|
||||||
translateZ: 12,
|
|
||||||
perspective: "300px",
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
const SPHERE_POSITIONS = [
|
|
||||||
{ x: -1, y: 1 }, // down-right
|
|
||||||
{ x: 1, y: 1 }, // up-right
|
|
||||||
{ x: 1, y: 0 }, // up
|
|
||||||
{ x: 0, y: 1 }, // right
|
|
||||||
{ x: -1, y: 0 }, // down
|
|
||||||
{ x: 0, y: 0 }, // center
|
|
||||||
{ x: 0, y: -1 }, // left
|
|
||||||
{ x: -1, y: -1 }, // down-left
|
|
||||||
{ x: 1, y: -1 }, // up-left
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
// Default gradient as pure CSS (works without Tailwind)
|
|
||||||
// Matches: bg-[radial-gradient(ellipse_100%_100%_at_50%_50%,_COLOR_0%,_transparent_60%)]
|
|
||||||
// Light mode: white glow in center, Dark mode: dark overlay in center
|
|
||||||
const DEFAULT_GRADIENT_STYLE: React.CSSProperties = {
|
|
||||||
background:
|
|
||||||
"radial-gradient(ellipse 100% 100% at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 60%)",
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Facehash - Deterministic avatar faces from any string.
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* ```tsx
|
|
||||||
* // With Tailwind classes
|
|
||||||
* <Facehash
|
|
||||||
* name="John"
|
|
||||||
* colorClasses={["bg-pink-500", "bg-blue-500"]}
|
|
||||||
* />
|
|
||||||
*
|
|
||||||
* // With hex colors
|
|
||||||
* <Facehash
|
|
||||||
* name="John"
|
|
||||||
* colors={["#ec4899", "#3b82f6"]}
|
|
||||||
* />
|
|
||||||
*
|
|
||||||
* // Plain color (no gradient)
|
|
||||||
* <Facehash name="John" variant="solid" />
|
|
||||||
* ```
|
|
||||||
*/
|
|
||||||
export const Facehash = React.forwardRef<HTMLDivElement, FacehashProps>(
|
|
||||||
(
|
|
||||||
{
|
|
||||||
name,
|
|
||||||
size = 40,
|
|
||||||
variant = "gradient",
|
|
||||||
intensity3d = "dramatic",
|
|
||||||
interactive = true,
|
|
||||||
showInitial = true,
|
|
||||||
initialsCount = 1,
|
|
||||||
colors,
|
|
||||||
colorClasses,
|
|
||||||
gradientOverlayClass,
|
|
||||||
className,
|
|
||||||
style,
|
|
||||||
onMouseEnter,
|
|
||||||
onMouseLeave,
|
|
||||||
...props
|
|
||||||
},
|
|
||||||
ref,
|
|
||||||
) => {
|
|
||||||
const [isHovered, setIsHovered] = React.useState(false);
|
|
||||||
|
|
||||||
// Generate deterministic values from name
|
|
||||||
const { FaceComponent, colorIndex, rotation } = React.useMemo(() => {
|
|
||||||
const hash = stringHash(name);
|
|
||||||
const faceIndex = hash % FACES.length;
|
|
||||||
const colorsLength = colorClasses?.length ?? colors?.length ?? 1;
|
|
||||||
const _colorIndex = hash % colorsLength;
|
|
||||||
const positionIndex = hash % SPHERE_POSITIONS.length;
|
|
||||||
const position = SPHERE_POSITIONS[positionIndex] ?? { x: 0, y: 0 };
|
|
||||||
|
|
||||||
return {
|
|
||||||
FaceComponent: FACES[faceIndex] ?? FACES[0],
|
|
||||||
colorIndex: _colorIndex,
|
|
||||||
rotation: position,
|
|
||||||
};
|
|
||||||
}, [name, colors?.length, colorClasses?.length]);
|
|
||||||
|
|
||||||
// Get intensity preset
|
|
||||||
const preset = INTENSITY_PRESETS[intensity3d];
|
|
||||||
|
|
||||||
// Calculate 3D transform
|
|
||||||
const transform = React.useMemo(() => {
|
|
||||||
if (intensity3d === "none") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rotateX =
|
|
||||||
isHovered && interactive ? 0 : rotation.x * preset.rotateRange;
|
|
||||||
const rotateY =
|
|
||||||
isHovered && interactive ? 0 : rotation.y * preset.rotateRange;
|
|
||||||
|
|
||||||
return `rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(${preset.translateZ}px)`;
|
|
||||||
}, [intensity3d, isHovered, interactive, rotation, preset]);
|
|
||||||
|
|
||||||
// Size style
|
|
||||||
const sizeValue = typeof size === "number" ? `${size}px` : size;
|
|
||||||
|
|
||||||
// Initial letter
|
|
||||||
const initial = name.trim().substring(0, initialsCount).toUpperCase();
|
|
||||||
|
|
||||||
// Background: either hex color (inline) or class
|
|
||||||
const bgColorClass = colorClasses?.[colorIndex];
|
|
||||||
const bgColorHex = colors?.[colorIndex];
|
|
||||||
|
|
||||||
// Event handlers
|
|
||||||
const handleMouseEnter = React.useCallback(
|
|
||||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
if (interactive) {
|
|
||||||
setIsHovered(true);
|
|
||||||
}
|
|
||||||
onMouseEnter?.(e);
|
|
||||||
},
|
|
||||||
[interactive, onMouseEnter],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleMouseLeave = React.useCallback(
|
|
||||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
||||||
if (interactive) {
|
|
||||||
setIsHovered(false);
|
|
||||||
}
|
|
||||||
onMouseLeave?.(e);
|
|
||||||
},
|
|
||||||
[interactive, onMouseLeave],
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
// biome-ignore lint/a11y/noNoninteractiveElementInteractions: Hover effect is purely cosmetic
|
|
||||||
// biome-ignore lint/a11y/noStaticElementInteractions: This is a decorative avatar component
|
|
||||||
<div
|
|
||||||
className={[bgColorClass, className].filter(Boolean).join(" ")}
|
|
||||||
data-facehash=""
|
|
||||||
data-interactive={interactive || undefined}
|
|
||||||
onMouseEnter={handleMouseEnter}
|
|
||||||
onMouseLeave={handleMouseLeave}
|
|
||||||
ref={ref}
|
|
||||||
style={{
|
|
||||||
// Size
|
|
||||||
width: sizeValue,
|
|
||||||
height: sizeValue,
|
|
||||||
// Layout
|
|
||||||
position: "relative",
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
overflow: "hidden",
|
|
||||||
// Container for cqw units
|
|
||||||
containerType: "size",
|
|
||||||
// 3D setup
|
|
||||||
...(intensity3d !== "none" && {
|
|
||||||
perspective: preset.perspective,
|
|
||||||
transformStyle: "preserve-3d",
|
|
||||||
}),
|
|
||||||
// Background color (hex) - only if no colorClasses
|
|
||||||
...(bgColorHex && !bgColorClass && { backgroundColor: bgColorHex }),
|
|
||||||
// User styles (last to allow overrides)
|
|
||||||
...style,
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{/* Gradient overlay */}
|
|
||||||
{variant === "gradient" && (
|
|
||||||
<div
|
|
||||||
className={gradientOverlayClass}
|
|
||||||
data-facehash-gradient=""
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
inset: 0,
|
|
||||||
pointerEvents: "none",
|
|
||||||
zIndex: 1,
|
|
||||||
// Use default pure CSS gradient if no class provided
|
|
||||||
...(gradientOverlayClass ? {} : DEFAULT_GRADIENT_STYLE),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Face container with 3D transform */}
|
|
||||||
<div
|
|
||||||
data-facehash-face=""
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
inset: 0,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
zIndex: 2,
|
|
||||||
transform,
|
|
||||||
transformStyle: intensity3d !== "none" ? "preserve-3d" : undefined,
|
|
||||||
transition: interactive
|
|
||||||
? "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
|
||||||
: undefined,
|
|
||||||
// Default to black text/icons for contrast on colored backgrounds
|
|
||||||
//color: "#000000",
|
|
||||||
color: bgColorHex
|
|
||||||
? isColorDark(bgColorHex, 100)
|
|
||||||
? "#FFFFFF"
|
|
||||||
: "#000000"
|
|
||||||
: "#000000",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{/* Face SVG */}
|
|
||||||
<FaceComponent
|
|
||||||
style={{
|
|
||||||
width: "60%",
|
|
||||||
height: "auto",
|
|
||||||
maxWidth: "90%",
|
|
||||||
maxHeight: "40%",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Initial letter */}
|
|
||||||
{showInitial && (
|
|
||||||
<span
|
|
||||||
data-facehash-initial=""
|
|
||||||
style={{
|
|
||||||
marginTop: "8%",
|
|
||||||
fontSize: "26cqw",
|
|
||||||
lineHeight: 1,
|
|
||||||
fontFamily: "monospace",
|
|
||||||
fontWeight: "bold",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{initial}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
Facehash.displayName = "Facehash";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Generates a consistent numeric hash from a string.
|
|
||||||
* Used to deterministically select faces and colors for avatars.
|
|
||||||
*
|
|
||||||
* @param str - The input string to hash
|
|
||||||
* @returns A positive 32-bit integer hash
|
|
||||||
*/
|
|
||||||
function stringHash(str: string): number {
|
|
||||||
let hash = 0;
|
|
||||||
for (let i = 0; i < str.length; i++) {
|
|
||||||
const char = str.charCodeAt(i);
|
|
||||||
hash = (hash << 5) - hash + char;
|
|
||||||
hash &= hash; // Convert to 32bit integer
|
|
||||||
}
|
|
||||||
return Math.abs(hash);
|
|
||||||
}
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
import type * as React from "react";
|
|
||||||
|
|
||||||
type FaceProps = {
|
|
||||||
className?: string;
|
|
||||||
style?: React.CSSProperties;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Round eyes face - simple circular eyes
|
|
||||||
*/
|
|
||||||
const RoundFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 63 15"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Round Eyes</title>
|
|
||||||
<path
|
|
||||||
d="M62.4 7.2C62.4 11.1765 59.1765 14.4 55.2 14.4C51.2236 14.4 48 11.1765 48 7.2C48 3.22355 51.2236 0 55.2 0C59.1765 0 62.4 3.22355 62.4 7.2Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M14.4 7.2C14.4 11.1765 11.1765 14.4 7.2 14.4C3.22355 14.4 0 11.1765 0 7.2C0 3.22355 3.22355 0 7.2 0C11.1765 0 14.4 3.22355 14.4 7.2Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Cross eyes face - X-shaped eyes
|
|
||||||
*/
|
|
||||||
const CrossFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 71 23"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Cross Eyes</title>
|
|
||||||
<path
|
|
||||||
d="M11.5 0C12.9411 0 13.6619 0.000460386 14.1748 0.354492C14.3742 0.49213 14.547 0.664882 14.6846 0.864258C15.0384 1.37711 15.0391 2.09739 15.0391 3.53809V7.96094H19.4619C20.9027 7.96094 21.6229 7.9615 22.1357 8.31543C22.3352 8.45308 22.5079 8.62578 22.6455 8.8252C22.9995 9.3381 23 10.0589 23 11.5C23 12.9408 22.9995 13.661 22.6455 14.1738C22.5079 14.3733 22.3352 14.5459 22.1357 14.6836C21.6229 15.0375 20.9027 15.0381 19.4619 15.0381H15.0391V19.4619C15.0391 20.9026 15.0384 21.6229 14.6846 22.1357C14.547 22.3351 14.3742 22.5079 14.1748 22.6455C13.6619 22.9995 12.9411 23 11.5 23C10.0592 23 9.33903 22.9994 8.82617 22.6455C8.62674 22.5079 8.45309 22.3352 8.31543 22.1357C7.96175 21.6229 7.96191 20.9024 7.96191 19.4619V15.0381H3.53809C2.0973 15.0381 1.37711 15.0375 0.864258 14.6836C0.664834 14.5459 0.492147 14.3733 0.354492 14.1738C0.000498831 13.661 -5.88036e-08 12.9408 0 11.5C6.2999e-08 10.0589 0.000460356 9.3381 0.354492 8.8252C0.492144 8.62578 0.664842 8.45308 0.864258 8.31543C1.37711 7.9615 2.09731 7.96094 3.53809 7.96094H7.96191V3.53809C7.96191 2.09765 7.96175 1.37709 8.31543 0.864258C8.45309 0.664828 8.62674 0.492149 8.82617 0.354492C9.33903 0.000555366 10.0592 1.62347e-09 11.5 0Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M58.7695 0C60.2107 0 60.9314 0.000460386 61.4443 0.354492C61.6437 0.49213 61.8165 0.664882 61.9541 0.864258C62.308 1.37711 62.3086 2.09739 62.3086 3.53809V7.96094H66.7314C68.1722 7.96094 68.8924 7.9615 69.4053 8.31543C69.6047 8.45308 69.7774 8.62578 69.915 8.8252C70.2691 9.3381 70.2695 10.0589 70.2695 11.5C70.2695 12.9408 70.269 13.661 69.915 14.1738C69.7774 14.3733 69.6047 14.5459 69.4053 14.6836C68.8924 15.0375 68.1722 15.0381 66.7314 15.0381H62.3086V19.4619C62.3086 20.9026 62.308 21.6229 61.9541 22.1357C61.8165 22.3351 61.6437 22.5079 61.4443 22.6455C60.9314 22.9995 60.2107 23 58.7695 23C57.3287 23 56.6086 22.9994 56.0957 22.6455C55.8963 22.5079 55.7226 22.3352 55.585 22.1357C55.2313 21.6229 55.2314 20.9024 55.2314 19.4619V15.0381H50.8076C49.3668 15.0381 48.6466 15.0375 48.1338 14.6836C47.9344 14.5459 47.7617 14.3733 47.624 14.1738C47.27 13.661 47.2695 12.9408 47.2695 11.5C47.2695 10.0589 47.27 9.3381 47.624 8.8252C47.7617 8.62578 47.9344 8.45308 48.1338 8.31543C48.6466 7.9615 49.3668 7.96094 50.8076 7.96094H55.2314V3.53809C55.2314 2.09765 55.2313 1.37709 55.585 0.864258C55.7226 0.664828 55.8963 0.492149 56.0957 0.354492C56.6086 0.000555366 57.3287 1.62347e-09 58.7695 0Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Line eyes face - horizontal line eyes
|
|
||||||
*/
|
|
||||||
const LineFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 82 8"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Line Eyes</title>
|
|
||||||
<path
|
|
||||||
d="M3.53125 0.164063C4.90133 0.164063 5.58673 0.163893 6.08301 0.485352C6.31917 0.638428 6.52075 0.840012 6.67383 1.07617C6.99555 1.57252 6.99512 2.25826 6.99512 3.62891C6.99512 4.99911 6.99536 5.68438 6.67383 6.18066C6.52075 6.41682 6.31917 6.61841 6.08301 6.77148C5.58672 7.09305 4.90147 7.09277 3.53125 7.09277C2.16062 7.09277 1.47486 7.09319 0.978516 6.77148C0.742356 6.61841 0.540772 6.41682 0.387695 6.18066C0.0662401 5.68439 0.0664063 4.999 0.0664063 3.62891C0.0664063 2.25838 0.0660571 1.57251 0.387695 1.07617C0.540772 0.840012 0.742356 0.638428 0.978516 0.485352C1.47485 0.163744 2.16076 0.164063 3.53125 0.164063Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M25.1836 0.164063C26.5542 0.164063 27.24 0.163638 27.7363 0.485352C27.9724 0.638384 28.1731 0.8401 28.3262 1.07617C28.6479 1.57252 28.6484 2.25825 28.6484 3.62891C28.6484 4.99931 28.6478 5.68436 28.3262 6.18066C28.1731 6.41678 27.9724 6.61842 27.7363 6.77148C27.24 7.09321 26.5542 7.09277 25.1836 7.09277H11.3262C9.95557 7.09277 9.26978 7.09317 8.77344 6.77148C8.53728 6.61841 8.33569 6.41682 8.18262 6.18066C7.86115 5.68438 7.86133 4.99902 7.86133 3.62891C7.86133 2.25835 7.86096 1.57251 8.18262 1.07617C8.33569 0.840012 8.53728 0.638428 8.77344 0.485352C9.26977 0.163768 9.95572 0.164063 11.3262 0.164063H25.1836Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M78.2034 7.09325C76.8333 7.09325 76.1479 7.09342 75.6516 6.77197C75.4155 6.61889 75.2139 6.4173 75.0608 6.18114C74.7391 5.6848 74.7395 4.99905 74.7395 3.62841C74.7395 2.2582 74.7393 1.57294 75.0608 1.07665C75.2139 0.840493 75.4155 0.638909 75.6516 0.485832C76.1479 0.164271 76.8332 0.164543 78.2034 0.164543C79.574 0.164543 80.2598 0.164122 80.7561 0.485832C80.9923 0.638909 81.1939 0.840493 81.347 1.07665C81.6684 1.57293 81.6682 2.25831 81.6682 3.62841C81.6682 4.99894 81.6686 5.68481 81.347 6.18114C81.1939 6.4173 80.9923 6.61889 80.7561 6.77197C80.2598 7.09357 79.5739 7.09325 78.2034 7.09325Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M56.5511 7.09325C55.1804 7.09325 54.4947 7.09368 53.9983 6.77197C53.7622 6.61893 53.5615 6.41722 53.4085 6.18114C53.0868 5.6848 53.0862 4.99907 53.0862 3.62841C53.0862 2.258 53.0868 1.57296 53.4085 1.07665C53.5615 0.840539 53.7622 0.638898 53.9983 0.485832C54.4947 0.164105 55.1804 0.164543 56.5511 0.164543H70.4085C71.7791 0.164543 72.4649 0.164146 72.9612 0.485832C73.1974 0.638909 73.399 0.840493 73.552 1.07665C73.8735 1.57293 73.8733 2.25829 73.8733 3.62841C73.8733 4.99896 73.8737 5.68481 73.552 6.18114C73.399 6.4173 73.1974 6.61889 72.9612 6.77197C72.4649 7.09355 71.7789 7.09325 70.4085 7.09325H56.5511Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Curved eyes face - sleepy/happy curved eyes
|
|
||||||
*/
|
|
||||||
const CurvedFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 63 9"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Curved Eyes</title>
|
|
||||||
<path
|
|
||||||
d="M0 5.06511C0 4.94513 0 4.88513 0.00771184 4.79757C0.0483059 4.33665 0.341025 3.76395 0.690821 3.46107C0.757274 3.40353 0.783996 3.38422 0.837439 3.34559C2.40699 2.21129 6.03888 0 10.5 0C14.9611 0 18.593 2.21129 20.1626 3.34559C20.216 3.38422 20.2427 3.40353 20.3092 3.46107C20.659 3.76395 20.9517 4.33665 20.9923 4.79757C21 4.88513 21 4.94513 21 5.06511C21 6.01683 21 6.4927 20.9657 6.6754C20.7241 7.96423 19.8033 8.55941 18.5289 8.25054C18.3483 8.20676 17.8198 7.96876 16.7627 7.49275C14.975 6.68767 12.7805 6 10.5 6C8.21954 6 6.02504 6.68767 4.23727 7.49275C3.18025 7.96876 2.65174 8.20676 2.47108 8.25054C1.19668 8.55941 0.275917 7.96423 0.0342566 6.6754C0 6.4927 0 6.01683 0 5.06511Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M42 5.06511C42 4.94513 42 4.88513 42.0077 4.79757C42.0483 4.33665 42.341 3.76395 42.6908 3.46107C42.7573 3.40353 42.784 3.38422 42.8374 3.34559C44.407 2.21129 48.0389 0 52.5 0C56.9611 0 60.593 2.21129 62.1626 3.34559C62.216 3.38422 62.2427 3.40353 62.3092 3.46107C62.659 3.76395 62.9517 4.33665 62.9923 4.79757C63 4.88513 63 4.94513 63 5.06511C63 6.01683 63 6.4927 62.9657 6.6754C62.7241 7.96423 61.8033 8.55941 60.5289 8.25054C60.3483 8.20676 59.8198 7.96876 58.7627 7.49275C56.975 6.68767 54.7805 6 52.5 6C50.2195 6 48.025 6.68767 46.2373 7.49275C45.1802 7.96876 44.6517 8.20676 44.4711 8.25054C43.1967 8.55941 42.2759 7.96423 42.0343 6.6754C42 6.4927 42 6.01683 42 5.06511Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Square eyes face - robot/neutral style
|
|
||||||
*/
|
|
||||||
const SquareFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 63 15"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Square Eyes</title>
|
|
||||||
<rect fill="currentColor" height="14.4" rx="3" width="14.4" x="0" y="0" />
|
|
||||||
<rect fill="currentColor" height="14.4" rx="3" width="14.4" x="48" y="0" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Star eyes face - excited/dazzled
|
|
||||||
*/
|
|
||||||
const StarFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="-3 -3 69 21"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Star Eyes</title>
|
|
||||||
<path
|
|
||||||
d="M7.2 0L9.1 5.3H14.4L10.2 8.6L11.8 14.4L7.2 11.2L2.6 14.4L4.2 8.6L0 5.3H5.3L7.2 0Z"
|
|
||||||
fill="currentColor"
|
|
||||||
transform="translate(7.2 7.2) scale(1.3) translate(-7.2 -7.2)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M55.2 0L57.1 5.3H62.4L58.2 8.6L59.8 14.4L55.2 11.2L50.6 14.4L52.2 8.6L48 5.3H53.3L55.2 0Z"
|
|
||||||
fill="currentColor"
|
|
||||||
transform="translate(55.2 7.2) scale(1.3) translate(-55.2 -7.2)"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Wink face - one round eye, one closed
|
|
||||||
*/
|
|
||||||
const WinkFace: React.FC<FaceProps> = ({ className, style }) => (
|
|
||||||
<svg
|
|
||||||
aria-hidden="true"
|
|
||||||
className={className}
|
|
||||||
fill="none"
|
|
||||||
style={style}
|
|
||||||
viewBox="0 0 63 15"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Wink Eyes</title>
|
|
||||||
{/* Left Eye: Round */}
|
|
||||||
<path
|
|
||||||
d="M14.4 7.2C14.4 11.1765 11.1765 14.4 7.2 14.4C3.22355 14.4 0 11.1765 0 7.2C0 3.22355 3.22355 0 7.2 0C11.1765 0 14.4 3.22355 14.4 7.2Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
{/* Right Eye: Curved Line (Wink) */}
|
|
||||||
<path
|
|
||||||
d="M48 6.5C48 5.4 48.2 4.8 55.2 4.8C62.2 4.8 62.4 5.4 62.4 6.5C62.4 8.5 61 9.5 55.2 9.5C49.4 9.5 48 8.5 48 6.5Z"
|
|
||||||
fill="currentColor"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* All available face components
|
|
||||||
*/
|
|
||||||
export const FACES = [
|
|
||||||
RoundFace,
|
|
||||||
CrossFace,
|
|
||||||
LineFace,
|
|
||||||
CurvedFace,
|
|
||||||
SquareFace,
|
|
||||||
StarFace,
|
|
||||||
WinkFace,
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
//export type FaceComponent = (typeof FACES)[number];
|
|
||||||
|
|
@ -188,7 +188,8 @@ const ServizioLinkCard = ({
|
||||||
<Card
|
<Card
|
||||||
className={cn(
|
className={cn(
|
||||||
status === "attivo" && "border-green-500",
|
status === "attivo" && "border-green-500",
|
||||||
status === "in_attesa" && "border-yellow-500",
|
status === "in_attesa" &&
|
||||||
|
"border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-500/90 dark:bg-yellow-900 dark:text-white dark:hover:bg-yellow-900/90",
|
||||||
status === "interrotto" && "border-red-500",
|
status === "interrotto" && "border-red-500",
|
||||||
status === "scaduto" && "border-gray-500",
|
status === "scaduto" && "border-gray-500",
|
||||||
status === "completato" && "border-blue-500",
|
status === "completato" && "border-blue-500",
|
||||||
|
|
@ -209,7 +210,7 @@ const ServizioLinkCard = ({
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center gap-2",
|
"flex items-center gap-2",
|
||||||
status === "attivo" && "text-green-500",
|
status === "attivo" && "text-green-500",
|
||||||
status === "in_attesa" && "text-yellow-500",
|
status === "in_attesa" && "",
|
||||||
status === "interrotto" && "text-red-500",
|
status === "interrotto" && "text-red-500",
|
||||||
status === "scaduto" && "text-gray-500",
|
status === "scaduto" && "text-gray-500",
|
||||||
status === "completato" && "text-blue-500",
|
status === "completato" && "text-blue-500",
|
||||||
|
|
@ -222,7 +223,7 @@ const ServizioLinkCard = ({
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground",
|
"flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground",
|
||||||
status === "in_attesa" && "animate-bounce",
|
status === "in_attesa" && "animate-bounce text-white",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span>{t.servizio.vai_al_servizio}</span>
|
<span>{t.servizio.vai_al_servizio}</span>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ export type PreparedPaymentData = {
|
||||||
packDesc: string;
|
packDesc: string;
|
||||||
condizioni: string;
|
condizioni: string;
|
||||||
};
|
};
|
||||||
export type preparePaymentInput =
|
type preparePaymentInput =
|
||||||
| {
|
| {
|
||||||
servizioId: ServizioServizioId;
|
servizioId: ServizioServizioId;
|
||||||
type: Exclude<OrderTypeEnum, OrderTypeEnum.Rinnovo>;
|
type: Exclude<OrderTypeEnum, OrderTypeEnum.Rinnovo>;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { TRPCError } from "@trpc/server";
|
import { TRPCError } from "@trpc/server";
|
||||||
import type { Insertable, Selectable, Updateable } from "kysely";
|
import type { Insertable } from "kysely";
|
||||||
import type OrdiniTable from "~/schemas/public/Ordini";
|
import type OrdiniTable from "~/schemas/public/Ordini";
|
||||||
import type {
|
import type {
|
||||||
Ordini,
|
Ordini,
|
||||||
|
|
@ -10,20 +10,13 @@ import type { Users, UsersId } from "~/schemas/public/Users";
|
||||||
import { db } from "~/server/db";
|
import { db } from "~/server/db";
|
||||||
|
|
||||||
export type ServizioOrdiniTable = Omit<OrdiniTable, "rinnovo_id">;
|
export type ServizioOrdiniTable = Omit<OrdiniTable, "rinnovo_id">;
|
||||||
|
//export type ServizioOrdini = Selectable<ServizioOrdiniTable>;
|
||||||
export type ServizioOrdini = Selectable<ServizioOrdiniTable>;
|
|
||||||
|
|
||||||
export type NewServizioOrdini = Insertable<ServizioOrdiniTable>;
|
export type NewServizioOrdini = Insertable<ServizioOrdiniTable>;
|
||||||
|
//export type ServizioOrdiniUpdate = Updateable<ServizioOrdiniTable>;
|
||||||
export type ServizioOrdiniUpdate = Updateable<ServizioOrdiniTable>;
|
|
||||||
|
|
||||||
export type RinnovoOrdiniTable = Omit<OrdiniTable, "servizio_id">;
|
export type RinnovoOrdiniTable = Omit<OrdiniTable, "servizio_id">;
|
||||||
|
//export type RinnovoOrdini = Selectable<RinnovoOrdiniTable>;
|
||||||
export type RinnovoOrdini = Selectable<RinnovoOrdiniTable>;
|
|
||||||
|
|
||||||
export type NewRinnovoOrdini = Insertable<RinnovoOrdiniTable>;
|
export type NewRinnovoOrdini = Insertable<RinnovoOrdiniTable>;
|
||||||
|
//export type RinnovoOrdiniUpdate = Updateable<RinnovoOrdiniTable>;
|
||||||
export type RinnovoOrdiniUpdate = Updateable<RinnovoOrdiniTable>;
|
|
||||||
|
|
||||||
export type Ordini_w_Utente = Ordini & Pick<Users, "username">;
|
export type Ordini_w_Utente = Ordini & Pick<Users, "username">;
|
||||||
export const getOrdini = async (
|
export const getOrdini = async (
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue