224 lines
9.2 KiB
JavaScript
224 lines
9.2 KiB
JavaScript
import { o as __toESM } from "../_runtime.mjs";
|
|
import { h as require_react, m as require_jsx_runtime } from "../_libs/react+tanstack__react-query.mjs";
|
|
import { t as clsx } from "../_libs/clsx.mjs";
|
|
import { t as twMerge } from "../_libs/tailwind-merge.mjs";
|
|
import { d as Search, f as Plus, m as Minus, n as X, r as User } from "../_libs/lucide-react.mjs";
|
|
//#region node_modules/.nitro/vite/services/ssr/assets/src-u_N1opJl.js
|
|
var import_react = /* @__PURE__ */ __toESM(require_react());
|
|
var import_jsx_runtime = require_jsx_runtime();
|
|
function cn(...inputs) {
|
|
return twMerge(clsx(inputs));
|
|
}
|
|
var weightClasses = {
|
|
normal: "font-normal",
|
|
medium: "font-medium",
|
|
semibold: "font-semibold",
|
|
bold: "font-bold"
|
|
};
|
|
function MyText({ children, weight = "normal", numberOfLines, className, style, ...props }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
|
className: cn(weightClasses[weight], className),
|
|
style: {
|
|
...numberOfLines ? {
|
|
display: "-webkit-box",
|
|
WebkitLineClamp: numberOfLines,
|
|
WebkitBoxOrient: "vertical",
|
|
overflow: "hidden"
|
|
} : {},
|
|
...style
|
|
},
|
|
...props,
|
|
children
|
|
});
|
|
}
|
|
var variantStyles = {
|
|
blue: "bg-brand-500 text-white hover:bg-brand-600",
|
|
red: "bg-red-500 text-white hover:bg-red-600",
|
|
green: "bg-green-500 text-white hover:bg-green-600"
|
|
};
|
|
function MyButton({ variant = "blue", fullWidth, textContent, children, className, disabled, style, ...props }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
className: cn("inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", variantStyles[variant] || variantStyles.blue, fullWidth && "w-full", className),
|
|
disabled,
|
|
style,
|
|
...props,
|
|
children: textContent || children
|
|
});
|
|
}
|
|
function MyTextInput({ topLabel, fullWidth = true, shrunkPadding = false, error, multiline, className, style, ...props }) {
|
|
const inputClasses = cn("flex w-full rounded-md border border-input bg-background px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", shrunkPadding ? "py-1.5" : "py-2", error && "border-destructive", className);
|
|
multilime;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
style: {
|
|
...fullWidth ? { width: "100%" } : {},
|
|
...style
|
|
},
|
|
children: [topLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "medium",
|
|
className: "mb-1 text-sm text-gray-500",
|
|
children: topLabel
|
|
}), multiline ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
|
|
className: inputClasses,
|
|
rows: numberOfLines || 3,
|
|
...props
|
|
}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
|
className: inputClasses,
|
|
...props
|
|
})]
|
|
});
|
|
}
|
|
function MyTouchableOpacity({ activeOpacity = .7, className, children, style, ...props }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
className: cn("inline-flex items-center justify-center transition-opacity hover:opacity-70 active:opacity-50 disabled:pointer-events-none disabled:opacity-50", className),
|
|
style: {
|
|
...style,
|
|
background: "none",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
padding: 0,
|
|
font: "inherit",
|
|
color: "inherit"
|
|
},
|
|
...props,
|
|
children
|
|
});
|
|
}
|
|
function LoadingDialog({ open, message = "Loading..." }) {
|
|
if (!open) return null;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "flex flex-col items-center gap-3 rounded-lg bg-white p-6 shadow-lg",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-4 border-brand-500 border-t-transparent" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
|
|
className: "text-sm text-gray-600",
|
|
children: message
|
|
})]
|
|
})
|
|
});
|
|
}
|
|
function BottomDialog({ open, onClose, children, enableDismiss = true }) {
|
|
const [visible, setVisible] = (0, import_react.useState)(false);
|
|
(0, import_react.useEffect)(() => {
|
|
if (open) setVisible(true);
|
|
else {
|
|
const timer = setTimeout(() => setVisible(false), 200);
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [open]);
|
|
if (!visible && !open) return null;
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "fixed inset-0 z-50 flex items-end justify-center",
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: `absolute inset-0 bg-black/30 transition-opacity duration-200 ${open ? "opacity-100" : "opacity-0"}`,
|
|
onClick: enableDismiss ? onClose : void 0
|
|
}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: `relative w-full max-w-lg rounded-t-2xl bg-white p-6 shadow-lg transition-transform duration-200 ${open ? "translate-y-0" : "translate-y-full"}`,
|
|
style: { maxHeight: "85vh" },
|
|
children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto mb-4 h-1.5 w-10 rounded-full bg-gray-300" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "overflow-y-auto",
|
|
style: { maxHeight: "calc(85vh - 40px)" },
|
|
children
|
|
})]
|
|
})]
|
|
});
|
|
}
|
|
function SearchBar({ placeholder = "Search...", onSearch, debounceMs = 300, className, value: controlledValue, onChange }) {
|
|
const [internalValue, setInternalValue] = (0, import_react.useState)("");
|
|
const timerRef = (0, import_react.useRef)(null);
|
|
const value = controlledValue !== void 0 ? controlledValue : internalValue;
|
|
const setValue = onChange || setInternalValue;
|
|
const handleChange = (0, import_react.useCallback)((e) => {
|
|
const newValue = e.target.value;
|
|
setValue(newValue);
|
|
if (timerRef.current) clearTimeout(timerRef.current);
|
|
timerRef.current = setTimeout(() => {
|
|
onSearch?.(newValue);
|
|
}, debounceMs);
|
|
}, [
|
|
onSearch,
|
|
debounceMs,
|
|
setValue
|
|
]);
|
|
const handleClear = (0, import_react.useCallback)(() => {
|
|
setValue("");
|
|
onSearch?.("");
|
|
}, [onSearch, setValue]);
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: cn("flex w-full flex-row items-center rounded-xl border border-gray-200 bg-white px-4 py-3 shadow-sm", className),
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
|
type: "text",
|
|
value,
|
|
onChange: handleChange,
|
|
placeholder,
|
|
className: "min-w-0 flex-1 bg-transparent text-sm text-gray-800 placeholder:text-gray-400 !outline-none focus:!outline-none focus-visible:!outline-none"
|
|
}),
|
|
value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: handleClear,
|
|
className: "mr-2 shrink-0 text-gray-400 hover:text-gray-600",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(X, { className: "h-5 w-5" })
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Search, { className: "h-5 w-5 shrink-0 text-brand-500" })
|
|
]
|
|
});
|
|
}
|
|
function Quantifier({ value, setValue, step = 1, min = 0, max = 99 }) {
|
|
const decrease = () => {
|
|
if (value > min) setValue(value - step);
|
|
};
|
|
const increase = () => {
|
|
if (value < max) setValue(value + step);
|
|
};
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
|
className: "inline-flex items-center rounded-lg border border-gray-200",
|
|
children: [
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: decrease,
|
|
disabled: value <= min,
|
|
className: "flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: "h-3.5 w-3.5" })
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MyText, {
|
|
weight: "semibold",
|
|
className: "min-w-[32px] text-center text-sm",
|
|
children: value
|
|
}),
|
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
|
|
onClick: increase,
|
|
disabled: value >= max,
|
|
className: "flex h-8 w-8 items-center justify-center text-gray-500 hover:text-gray-700 disabled:opacity-30",
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-3.5 w-3.5" })
|
|
})
|
|
]
|
|
});
|
|
}
|
|
function ProfileImage({ uri, size = 80, className }) {
|
|
if (uri) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
|
|
src: uri,
|
|
alt: "Profile",
|
|
className: cn("rounded-full object-cover", className),
|
|
style: {
|
|
width: size,
|
|
height: size
|
|
}
|
|
});
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: cn("flex items-center justify-center rounded-full bg-gray-200", className),
|
|
style: {
|
|
width: size,
|
|
height: size
|
|
},
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(User, { className: "h-1/2 w-1/2 text-gray-400" })
|
|
});
|
|
}
|
|
function AppContainer({ children, className }) {
|
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", {
|
|
className: cn("mx-auto min-h-screen w-full max-w-4xl bg-white", className),
|
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
className: "p-4",
|
|
children
|
|
})
|
|
});
|
|
}
|
|
//#endregion
|
|
export { MyText as a, ProfileImage as c, MyButton as i, Quantifier as l, BottomDialog as n, MyTextInput as o, LoadingDialog as r, MyTouchableOpacity as s, AppContainer as t, SearchBar as u };
|