refactor: project architecture refactor, container splitting
This commit is contained in:
3252a8
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let variant = "muted";
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<span
|
||||
class={cn(
|
||||
"admin-badge",
|
||||
variant === "success" && "admin-badge-success",
|
||||
variant === "danger" && "admin-badge-danger",
|
||||
variant === "warning" && "admin-badge-warning",
|
||||
variant === "muted" && "admin-badge-muted",
|
||||
className
|
||||
)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script>
|
||||
import { cva } from "class-variance-authority";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let type = "button";
|
||||
export let variant = "default";
|
||||
export let size = "default";
|
||||
export let disabled = false;
|
||||
export let onclick = undefined;
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
const buttonVariants = cva("admin-btn", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "",
|
||||
primary: "admin-btn-primary",
|
||||
ghost: "admin-btn-ghost",
|
||||
danger: "admin-btn-danger",
|
||||
dangerSoft: "admin-btn-danger-soft",
|
||||
icon: "admin-btn-icon",
|
||||
},
|
||||
size: {
|
||||
default: "",
|
||||
sm: "admin-btn-sm",
|
||||
icon: "admin-btn-icon",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{onclick}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
@@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let columns = 1;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn("admin-cn-dashboard-grid", columns === 3 && "admin-cn-dashboard-grid--3", className)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class={cn("admin-cn-dashboard-stack", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let tone = "default";
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class={cn(tone === "card" ? "admin-card-body" : "admin-empty", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import { Label } from "$components/ui/primitives.js";
|
||||
|
||||
export let label = "";
|
||||
export let hint = "";
|
||||
</script>
|
||||
|
||||
<Label.Root class="admin-field-label">
|
||||
{#if label}
|
||||
<span>{label}</span>
|
||||
{/if}
|
||||
{#if hint}
|
||||
<small>{hint}</small>
|
||||
{/if}
|
||||
<slot />
|
||||
</Label.Root>
|
||||
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
import { ChevronLeft, ChevronRight } from "$components/ui/icons.js";
|
||||
import AdminButton from "./AdminButton.svelte";
|
||||
|
||||
export let meta = "";
|
||||
export let prevLabel = "Back";
|
||||
export let nextLabel = "Next";
|
||||
export let prevDisabled = false;
|
||||
export let nextDisabled = false;
|
||||
export let onPrev = () => {};
|
||||
export let onNext = () => {};
|
||||
</script>
|
||||
|
||||
<div class="admin-pagination">
|
||||
<span class="admin-pagination-meta">{meta}</span>
|
||||
<div class="admin-pagination-buttons">
|
||||
<AdminButton size="sm" disabled={prevDisabled} onclick={onPrev}>
|
||||
<ChevronLeft size={14} />
|
||||
{prevLabel}
|
||||
</AdminButton>
|
||||
<AdminButton size="sm" disabled={nextDisabled} onclick={onNext}>
|
||||
{nextLabel}
|
||||
<ChevronRight size={14} />
|
||||
</AdminButton>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,190 @@
|
||||
<script>
|
||||
import { onMount, tick } from "svelte";
|
||||
import uPlot from "uplot";
|
||||
import "uplot/dist/uPlot.min.css";
|
||||
|
||||
/** `{ date: ISO date string, amount: number }[]` */
|
||||
export let series = [];
|
||||
/** Total plot height in CSS px (axes + canvas). */
|
||||
export let plotHeight = 204;
|
||||
export let fmtMoney = (v, _currency) => String(v);
|
||||
/** @type {string} */
|
||||
export let currency = "RUB";
|
||||
/** uPlot live legend: column header for the time (x) series */
|
||||
export let legendTimeLabel = "Time";
|
||||
/** uPlot live legend: column header for the value (y) series */
|
||||
export let legendValueLabel = "Value";
|
||||
|
||||
let hostEl;
|
||||
let plot;
|
||||
let resizeObserver;
|
||||
let syncTimer = 0;
|
||||
/** Rebuild plot when legend copy changes (language), since series labels are init-only */
|
||||
let builtLegendSig = "";
|
||||
|
||||
function readCssColor(name, fallback) {
|
||||
if (typeof document === "undefined") return fallback;
|
||||
const scope = hostEl || document.documentElement;
|
||||
const raw = getComputedStyle(scope).getPropertyValue(name).trim();
|
||||
return raw || fallback;
|
||||
}
|
||||
|
||||
function parseDayUnix(iso) {
|
||||
const s = String(iso || "");
|
||||
const t = Date.parse(s.includes("T") ? s : `${s}T12:00:00Z`);
|
||||
if (!Number.isFinite(t)) return 0;
|
||||
return Math.floor(t / 1000);
|
||||
}
|
||||
|
||||
function toAlignedData(rows) {
|
||||
if (!rows?.length) return null;
|
||||
const xs = rows.map((p) => parseDayUnix(p.date));
|
||||
const ys = rows.map((p) => Number(p.amount) || 0);
|
||||
return [xs, ys];
|
||||
}
|
||||
|
||||
function yAxisTickLabels(values) {
|
||||
return values.map((v) => fmtMoney(Number(v), currency));
|
||||
}
|
||||
|
||||
/** uPlot passes already-formatted tick strings; reserve enough gutter so amounts are not clipped */
|
||||
function yAxisGutterWidth(_u, values) {
|
||||
const pad = 14;
|
||||
const charPx = 6.1;
|
||||
const maxChars = (values || []).reduce((m, v) => Math.max(m, String(v ?? "").length), 0);
|
||||
return Math.min(104, Math.max(58, Math.ceil(pad + maxChars * charPx)));
|
||||
}
|
||||
|
||||
/** Axis `size`: height (x / bottom) or width (y / left) in CSS px — only customize the y gutter */
|
||||
function axisBandSize(_u, values, axisIdx) {
|
||||
if (axisIdx !== 1) return 32;
|
||||
return yAxisGutterWidth(_u, values);
|
||||
}
|
||||
|
||||
function buildOpts(width) {
|
||||
const w = Math.max(80, Math.floor(width));
|
||||
const muted = readCssColor("--admin-muted", "#9aa7a2");
|
||||
const border = readCssColor("--admin-border", "rgba(255,255,255,0.12)");
|
||||
const accent = readCssColor("--accent", "#00fe7a");
|
||||
const lineStroke = readCssColor(
|
||||
"--admin-chart-stroke",
|
||||
readCssColor("--admin-text", "#e8f0ec"),
|
||||
);
|
||||
const lineFill = readCssColor("--admin-chart-fill", "rgba(120, 140, 132, 0.14)");
|
||||
|
||||
return {
|
||||
width: w,
|
||||
height: plotHeight,
|
||||
class: "admin-uplot",
|
||||
pxAlign: true,
|
||||
padding: [10, 12, 12, 10],
|
||||
legend: {
|
||||
show: true,
|
||||
live: true,
|
||||
markers: { show: true, width: 10, stroke: accent, fill: accent },
|
||||
},
|
||||
cursor: {
|
||||
drag: { x: false, y: false },
|
||||
points: { size: 7, width: 1, stroke: accent },
|
||||
},
|
||||
scales: {
|
||||
x: { time: true },
|
||||
y: { range: [0, null] },
|
||||
},
|
||||
series: [
|
||||
{ label: legendTimeLabel },
|
||||
{
|
||||
label: legendValueLabel,
|
||||
paths: uPlot.paths.spline(),
|
||||
stroke: lineStroke,
|
||||
width: 2,
|
||||
cap: "round",
|
||||
fill: lineFill,
|
||||
},
|
||||
],
|
||||
axes: [
|
||||
{
|
||||
stroke: muted,
|
||||
gap: 8,
|
||||
grid: { show: true, stroke: border, width: 1 },
|
||||
ticks: { stroke: border },
|
||||
font: "11px system-ui,Segoe UI,sans-serif",
|
||||
},
|
||||
{
|
||||
stroke: muted,
|
||||
size: axisBandSize,
|
||||
gap: 8,
|
||||
grid: { show: true, stroke: border, width: 1 },
|
||||
ticks: { stroke: border },
|
||||
font: "10px system-ui,Segoe UI,sans-serif",
|
||||
values: (u, ticks) => yAxisTickLabels(ticks),
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
function syncChart() {
|
||||
if (!hostEl) return;
|
||||
const d = toAlignedData(series);
|
||||
const legendSig = `${legendTimeLabel}\0${legendValueLabel}`;
|
||||
if (!d) {
|
||||
plot?.destroy();
|
||||
plot = undefined;
|
||||
builtLegendSig = "";
|
||||
return;
|
||||
}
|
||||
const w = Math.max(80, Math.floor(hostEl.clientWidth));
|
||||
if (plot && builtLegendSig !== legendSig) {
|
||||
plot.destroy();
|
||||
plot = undefined;
|
||||
}
|
||||
if (!plot) {
|
||||
plot = new uPlot(buildOpts(w), d, hostEl);
|
||||
builtLegendSig = legendSig;
|
||||
return;
|
||||
}
|
||||
plot.setData(d, true);
|
||||
plot.setSize({ width: w, height: plotHeight });
|
||||
}
|
||||
|
||||
function scheduleSync() {
|
||||
if (typeof window === "undefined") return;
|
||||
clearTimeout(syncTimer);
|
||||
syncTimer = window.setTimeout(() => {
|
||||
syncTimer = 0;
|
||||
syncChart();
|
||||
}, 0);
|
||||
}
|
||||
|
||||
let rafId = 0;
|
||||
|
||||
onMount(() => {
|
||||
rafId = requestAnimationFrame(() => {
|
||||
void tick().then(() => {
|
||||
scheduleSync();
|
||||
if (!hostEl || typeof ResizeObserver === "undefined") return;
|
||||
resizeObserver = new ResizeObserver(() => scheduleSync());
|
||||
resizeObserver.observe(hostEl);
|
||||
});
|
||||
});
|
||||
return () => {
|
||||
cancelAnimationFrame(rafId);
|
||||
clearTimeout(syncTimer);
|
||||
resizeObserver?.disconnect();
|
||||
resizeObserver = undefined;
|
||||
plot?.destroy();
|
||||
plot = undefined;
|
||||
builtLegendSig = "";
|
||||
};
|
||||
});
|
||||
|
||||
$: if (hostEl) {
|
||||
series;
|
||||
plotHeight;
|
||||
legendTimeLabel;
|
||||
legendValueLabel;
|
||||
scheduleSync();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="admin-revenue-uplot-host" bind:this={hostEl}></div>
|
||||
@@ -0,0 +1,145 @@
|
||||
<script>
|
||||
import { Popover, RangeCalendar } from "bits-ui";
|
||||
import { parseDate } from "@internationalized/date";
|
||||
import Button from "$components/ui/button.svelte";
|
||||
import { ChevronLeft, ChevronRight } from "$components/ui/icons.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
minIso = "",
|
||||
maxIso = "",
|
||||
committedFrom = "",
|
||||
committedTo = "",
|
||||
title = "",
|
||||
applyLabel = "",
|
||||
triggerLabel = "",
|
||||
isActive = false,
|
||||
onApply = () => {},
|
||||
} = $props();
|
||||
|
||||
let value = $state({ start: undefined, end: undefined });
|
||||
let prevOpen = $state(false);
|
||||
|
||||
function seedFromBounds() {
|
||||
if (!minIso || !maxIso) return;
|
||||
const minV = parseDate(minIso);
|
||||
const maxV = parseDate(maxIso);
|
||||
if (
|
||||
committedFrom &&
|
||||
committedTo &&
|
||||
committedFrom >= minIso &&
|
||||
committedTo <= maxIso &&
|
||||
committedFrom <= committedTo
|
||||
) {
|
||||
value = { start: parseDate(committedFrom), end: parseDate(committedTo) };
|
||||
return;
|
||||
}
|
||||
let start = maxV.subtract({ days: 29 });
|
||||
if (start.compare(minV) < 0) start = minV;
|
||||
value = { start, end: maxV };
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (open && !prevOpen) seedFromBounds();
|
||||
prevOpen = open;
|
||||
});
|
||||
|
||||
function calendarDateToIso(d) {
|
||||
if (!d || typeof d !== "object") return "";
|
||||
const y = d.year;
|
||||
const m = String(d.month).padStart(2, "0");
|
||||
const day = String(d.day).padStart(2, "0");
|
||||
return `${y}-${m}-${day}`;
|
||||
}
|
||||
|
||||
function handleApply() {
|
||||
const fromIso = calendarDateToIso(value?.start);
|
||||
const toIso = calendarDateToIso(value?.end);
|
||||
if (!fromIso || !toIso || fromIso > toIso) return;
|
||||
onApply({ fromIso, toIso });
|
||||
open = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger
|
||||
type="button"
|
||||
class={cn("admin-revenue-period-btn", isActive && "is-active")}
|
||||
disabled={!minIso || !maxIso}
|
||||
aria-pressed={isActive}
|
||||
>
|
||||
{triggerLabel}
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
class="admin-revenue-range-popover"
|
||||
side="bottom"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
trapFocus={true}
|
||||
>
|
||||
{#if title}
|
||||
<div class="admin-revenue-range-popover__title">{title}</div>
|
||||
{/if}
|
||||
{#if minIso && maxIso}
|
||||
<RangeCalendar.Root
|
||||
class="admin-revenue-rcal"
|
||||
bind:value
|
||||
minValue={parseDate(minIso)}
|
||||
maxValue={parseDate(maxIso)}
|
||||
weekdayFormat="short"
|
||||
fixedWeeks={true}
|
||||
weekStartsOn={1}
|
||||
>
|
||||
{#snippet children({ months, weekdays })}
|
||||
<RangeCalendar.Header class="admin-revenue-rcal__header">
|
||||
<RangeCalendar.PrevButton class="admin-revenue-rcal__nav">
|
||||
<ChevronLeft />
|
||||
</RangeCalendar.PrevButton>
|
||||
<RangeCalendar.Heading class="admin-revenue-rcal__heading" />
|
||||
<RangeCalendar.NextButton class="admin-revenue-rcal__nav">
|
||||
<ChevronRight />
|
||||
</RangeCalendar.NextButton>
|
||||
</RangeCalendar.Header>
|
||||
<div class="admin-revenue-rcal__grids">
|
||||
{#each months as month (month.value.month)}
|
||||
<RangeCalendar.Grid class="admin-revenue-rcal__grid">
|
||||
<RangeCalendar.GridHead>
|
||||
<RangeCalendar.GridRow class="admin-revenue-rcal__weekrow">
|
||||
{#each weekdays as wd (wd)}
|
||||
<RangeCalendar.HeadCell class="admin-revenue-rcal__headcell">
|
||||
{wd.slice(0, 2)}
|
||||
</RangeCalendar.HeadCell>
|
||||
{/each}
|
||||
</RangeCalendar.GridRow>
|
||||
</RangeCalendar.GridHead>
|
||||
<RangeCalendar.GridBody>
|
||||
{#each month.weeks as weekDates, wi (wi)}
|
||||
<RangeCalendar.GridRow class="admin-revenue-rcal__weekrow">
|
||||
{#each weekDates as cellDate, di (`${wi}-${di}-${cellDate.toString()}`)}
|
||||
<RangeCalendar.Cell
|
||||
date={cellDate}
|
||||
month={month.value}
|
||||
class="admin-revenue-rcal__cell"
|
||||
>
|
||||
<RangeCalendar.Day class="admin-revenue-rcal__day">
|
||||
{cellDate.day}
|
||||
</RangeCalendar.Day>
|
||||
</RangeCalendar.Cell>
|
||||
{/each}
|
||||
</RangeCalendar.GridRow>
|
||||
{/each}
|
||||
</RangeCalendar.GridBody>
|
||||
</RangeCalendar.Grid>
|
||||
{/each}
|
||||
</div>
|
||||
{/snippet}
|
||||
</RangeCalendar.Root>
|
||||
{/if}
|
||||
<div class="admin-revenue-range-popover__actions">
|
||||
<Button variant="default" size="sm" onclick={handleApply}>{applyLabel}</Button>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
export let title = "";
|
||||
export let description = "";
|
||||
</script>
|
||||
|
||||
<div class="admin-dashboard-section-head">
|
||||
<h3>{title}</h3>
|
||||
{#if description}
|
||||
<small>{description}</small>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script>
|
||||
import { Check, ChevronDown } from "$components/ui/icons.js";
|
||||
import { Select } from "$components/ui/primitives.js";
|
||||
|
||||
export let value = "";
|
||||
export let items = [];
|
||||
export let ariaLabel = "";
|
||||
export let placeholder = "";
|
||||
export let disabled = false;
|
||||
export let sideOffset = 6;
|
||||
export let onValueChange = () => {};
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
$: selected = items.find((item) => item.value === value);
|
||||
|
||||
function handleValueChange(next) {
|
||||
value = next;
|
||||
onValueChange(next);
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select.Root type="single" {value} {items} {disabled} onValueChange={handleValueChange}>
|
||||
<Select.Trigger
|
||||
class={`admin-select-trigger ${className}`.trim()}
|
||||
aria-label={ariaLabel || placeholder}
|
||||
>
|
||||
<span>{selected?.label || placeholder}</span>
|
||||
<ChevronDown size={14} class="admin-select-icon" />
|
||||
</Select.Trigger>
|
||||
<Select.Portal>
|
||||
<Select.Content class="admin-select-content" {sideOffset}>
|
||||
{#each items as item (item.value)}
|
||||
<Select.Item value={item.value} label={item.label} class="admin-select-item">
|
||||
<span>{item.label}</span>
|
||||
<Check size={14} class="admin-select-item-check" />
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Portal>
|
||||
</Select.Root>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let skeleton = false;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div class="admin-table-wrap">
|
||||
<table
|
||||
class={cn("admin-table", skeleton && "admin-table-skeleton", className)}
|
||||
aria-hidden={skeleton ? "true" : undefined}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</table>
|
||||
</div>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import Skeleton from "$components/ui/skeleton.svelte";
|
||||
import AdminTable from "./AdminTable.svelte";
|
||||
|
||||
export let headers = [];
|
||||
export let rows = 6;
|
||||
export let actionColumn = false;
|
||||
export let widths = [];
|
||||
|
||||
function widthFor(index) {
|
||||
if (widths[index]) return widths[index];
|
||||
if (actionColumn && index === headers.length - 1) return "92px";
|
||||
if (index === 0) return "48px";
|
||||
if (index === headers.length - 1) return "76px";
|
||||
return index % 3 === 0 ? "56%" : "72%";
|
||||
}
|
||||
</script>
|
||||
|
||||
<AdminTable skeleton>
|
||||
<thead>
|
||||
<tr>
|
||||
{#each headers as header}
|
||||
<th class:admin-cell-actions={actionColumn && header === headers[headers.length - 1]}
|
||||
>{header}</th
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each Array(rows) as _, rowIndex (rowIndex)}
|
||||
<tr>
|
||||
{#each headers as _header, colIndex (`${rowIndex}-${colIndex}`)}
|
||||
<td>
|
||||
<Skeleton variant="line" width={widthFor(colIndex)} />
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</AdminTable>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let title = "";
|
||||
export let value = "";
|
||||
export let left = "";
|
||||
export let percent = 0;
|
||||
export let warning = false;
|
||||
export let premium = false;
|
||||
export let label = "";
|
||||
|
||||
$: clamped = Math.max(0, Math.min(100, Number(percent) || 0));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
"admin-traffic-card",
|
||||
warning && "admin-traffic-card-warning",
|
||||
premium && "admin-traffic-card-premium"
|
||||
)}
|
||||
>
|
||||
<div class="admin-traffic-head">
|
||||
<span>{title}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
<div
|
||||
class={cn("admin-traffic-bar", premium && "admin-traffic-bar-premium")}
|
||||
aria-label={label || title}
|
||||
role="progressbar"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow={Math.round(clamped)}
|
||||
>
|
||||
<span style={`width: ${clamped}%`}></span>
|
||||
</div>
|
||||
<div class="admin-traffic-meta">
|
||||
<span>{left}</span>
|
||||
<span>{clamped}%</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
export { default as AdminBadge } from "./AdminBadge.svelte";
|
||||
export { default as AdminButton } from "./AdminButton.svelte";
|
||||
export { default as AdminDashboardGrid } from "./AdminDashboardGrid.svelte";
|
||||
export { default as AdminDashboardStack } from "./AdminDashboardStack.svelte";
|
||||
export { default as AdminEmptyState } from "./AdminEmptyState.svelte";
|
||||
export { default as AdminField } from "./AdminField.svelte";
|
||||
export { default as AdminPagination } from "./AdminPagination.svelte";
|
||||
export { default as AdminRevenueChart } from "./AdminRevenueChart.svelte";
|
||||
export { default as AdminRevenueCustomRangePopover } from "./AdminRevenueCustomRangePopover.svelte";
|
||||
export { default as AdminSelect } from "./AdminSelect.svelte";
|
||||
export { default as AdminSectionHeader } from "./AdminSectionHeader.svelte";
|
||||
export { default as AdminTable } from "./AdminTable.svelte";
|
||||
export { default as AdminTableSkeleton } from "./AdminTableSkeleton.svelte";
|
||||
export { default as AdminTrafficCard } from "./AdminTrafficCard.svelte";
|
||||
@@ -0,0 +1,67 @@
|
||||
<script>
|
||||
import Skeleton from "$components/ui/skeleton.svelte";
|
||||
|
||||
export let label = "";
|
||||
export let rows = 3;
|
||||
export let actions = 0;
|
||||
export let methods = 2;
|
||||
export let showNote = false;
|
||||
export let showPayButton = true;
|
||||
export let showMeta = true;
|
||||
</script>
|
||||
|
||||
<div class="dialog-skeleton" aria-label={label}>
|
||||
{#if actions}
|
||||
<div class="tariff-action-list">
|
||||
{#each Array(actions) as _, index (index)}
|
||||
<div class="tariff-action-card skeleton-row">
|
||||
<span>
|
||||
<Skeleton variant="title" />
|
||||
<Skeleton variant="short" />
|
||||
</span>
|
||||
<Skeleton class="skeleton-line-price" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="payment-divider" aria-hidden="true"></div>
|
||||
{/if}
|
||||
|
||||
<div class="option-list">
|
||||
{#each Array(rows) as _, index (index)}
|
||||
<div class={`option-row ${showMeta ? "plan-row" : "change-action-row"} skeleton-row`}>
|
||||
<span class="option-row-main">
|
||||
<Skeleton variant="title" />
|
||||
<Skeleton variant="short" />
|
||||
</span>
|
||||
{#if showMeta}
|
||||
<span class="option-row-meta">
|
||||
<Skeleton class="skeleton-line-price" />
|
||||
<Skeleton variant="tiny" />
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if showNote}
|
||||
<div class="topup-carryover-note skeleton-carryover-note">
|
||||
<Skeleton variant="line" />
|
||||
<Skeleton variant="short" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if methods}
|
||||
<div class="method-grid">
|
||||
{#each Array(methods) as _, index (index)}
|
||||
<div class="method-card skeleton-method">
|
||||
<Skeleton variant="dot" />
|
||||
<Skeleton class="skeleton-line-method" />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showPayButton}
|
||||
<Skeleton class="skeleton-pay-button" />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import Card from "$components/ui/card.svelte";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<Card class={cn("empty-card", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</Card>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script>
|
||||
import { Check, ChevronsUpDown, Globe2 } from "$components/ui/icons.js";
|
||||
import { Select } from "$components/ui/primitives.js";
|
||||
|
||||
export let open = false;
|
||||
export let value = "ru";
|
||||
export let currentOption = null;
|
||||
export let userLanguage = "";
|
||||
export let options = [];
|
||||
export let disabled = false;
|
||||
export let clickGuard = false;
|
||||
export let clickGuardArmed = false;
|
||||
export let closeLabel = "Close";
|
||||
export let label = "Language";
|
||||
export let onOpenChange = () => {};
|
||||
export let onValueChange = () => {};
|
||||
|
||||
function closeFromGuard(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (clickGuardArmed) onOpenChange(false);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open || clickGuard}
|
||||
<button
|
||||
class="language-select-guard"
|
||||
class:language-select-guard--armed={clickGuardArmed}
|
||||
type="button"
|
||||
aria-label={closeLabel}
|
||||
onpointerdown={closeFromGuard}
|
||||
onclick={closeFromGuard}
|
||||
></button>
|
||||
{/if}
|
||||
|
||||
<div class="settings-row settings-row-language">
|
||||
<Globe2 size={21} />
|
||||
<Select.Root
|
||||
type="single"
|
||||
bind:open
|
||||
{value}
|
||||
items={options}
|
||||
{disabled}
|
||||
{onOpenChange}
|
||||
{onValueChange}
|
||||
>
|
||||
<Select.Trigger class="language-select-trigger" aria-label={label}>
|
||||
<span class="language-select-copy">
|
||||
<strong>{label}</strong>
|
||||
<small class="language-select-current">
|
||||
<span class="emoji-flag" aria-hidden="true">{currentOption?.flag || "🏳️"}</span>
|
||||
{currentOption?.label || userLanguage}
|
||||
</small>
|
||||
</span>
|
||||
<ChevronsUpDown size={16} />
|
||||
</Select.Trigger>
|
||||
<Select.Content class="language-select-content" side="bottom" align="end" sideOffset={6}>
|
||||
<Select.Viewport class="language-select-viewport">
|
||||
{#each options as option (option.value)}
|
||||
<Select.Item value={option.value} label={option.label} class="language-select-item">
|
||||
<span class="language-select-item-main">
|
||||
<span class="emoji-flag" aria-hidden="true">{option.flag}</span>
|
||||
<span>{option.label}</span>
|
||||
</span>
|
||||
<Check size={15} class="language-select-item-check" />
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Viewport>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let value = 0;
|
||||
export let label = "";
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
$: clamped = Math.max(0, Math.min(100, Number(value) || 0));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn("progress", className)}
|
||||
role={label ? "progressbar" : undefined}
|
||||
aria-label={label || undefined}
|
||||
aria-valuemin={label ? "0" : undefined}
|
||||
aria-valuemax={label ? "100" : undefined}
|
||||
aria-valuenow={label ? Math.round(clamped) : undefined}
|
||||
{...$$restProps}
|
||||
>
|
||||
<span style={`width: ${clamped}%`}></span>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script>
|
||||
import { Bitcoin, CreditCard } from "$components/ui/icons.js";
|
||||
|
||||
export let methods = [];
|
||||
export let selectedMethod = "";
|
||||
export let t = (key) => key;
|
||||
export let onSelect = () => {};
|
||||
|
||||
function methodMeta(method) {
|
||||
const id = String(method?.id || "").toLowerCase();
|
||||
if (id.includes("platega_sbp"))
|
||||
return { title: t("wa_method_platega_sbp_card"), icon: CreditCard };
|
||||
if (id.includes("platega_crypto"))
|
||||
return { title: t("wa_method_platega_crypto"), icon: Bitcoin };
|
||||
if (id.includes("yookassa") || id.includes("card"))
|
||||
return { title: t("pay_with_yookassa_button"), icon: null };
|
||||
if (id.includes("severpay")) return { title: t("pay_with_severpay_button"), icon: null };
|
||||
if (id.includes("freekassa")) return { title: t("pay_with_sbp_button"), icon: null };
|
||||
if (id.includes("cryptopay") || id.includes("crypto"))
|
||||
return { title: t("pay_with_cryptopay_button"), icon: null };
|
||||
if (id.includes("stars")) return { title: t("pay_with_stars_button"), icon: null };
|
||||
if (id.includes("sbp")) return { title: t("pay_with_sbp_button"), icon: null };
|
||||
return { title: t("wa_method_other_title"), icon: null };
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="method-grid">
|
||||
{#each methods as method}
|
||||
{@const meta = methodMeta(method)}
|
||||
<button
|
||||
class:active={selectedMethod === method.id}
|
||||
class="method-card"
|
||||
type="button"
|
||||
onclick={() => onSelect(method.id)}
|
||||
>
|
||||
<span class="method-card-main">
|
||||
{#if meta.icon}
|
||||
<svelte:component this={meta.icon} size={19} />
|
||||
{/if}
|
||||
<strong>{meta.title}</strong>
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let error = false;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<p class={cn("status-line", error && "error", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</p>
|
||||
@@ -0,0 +1,6 @@
|
||||
export { default as DialogOptionsSkeleton } from "./DialogOptionsSkeleton.svelte";
|
||||
export { default as EmptyCard } from "./EmptyCard.svelte";
|
||||
export { default as LinearProgress } from "./LinearProgress.svelte";
|
||||
export { default as LanguageSelect } from "./LanguageSelect.svelte";
|
||||
export { default as PaymentMethodGrid } from "./PaymentMethodGrid.svelte";
|
||||
export { default as StatusMessage } from "./StatusMessage.svelte";
|
||||
@@ -0,0 +1,24 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
/** @type {'default' | 'outline' | 'destructive' | 'success' | 'muted'} */
|
||||
export let variant = "default";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<span
|
||||
data-slot="badge"
|
||||
class={cn(
|
||||
"admin-cn-badge",
|
||||
variant === "outline" && "admin-cn-badge-outline",
|
||||
variant === "destructive" && "admin-cn-badge-destructive",
|
||||
variant === "success" && "admin-cn-badge-success",
|
||||
variant === "muted" && "admin-cn-badge-muted",
|
||||
className
|
||||
)}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
@@ -0,0 +1,52 @@
|
||||
<script>
|
||||
import { cva } from "class-variance-authority";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let type = "button";
|
||||
export let variant = "default";
|
||||
export let size = "default";
|
||||
export let disabled = false;
|
||||
export let href = "";
|
||||
export let onclick = undefined;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
const buttonVariants = cva("btn", {
|
||||
variants: {
|
||||
variant: {
|
||||
default: "btn-primary",
|
||||
secondary: "btn-secondary",
|
||||
outline: "btn-outline",
|
||||
ghost: "btn-ghost",
|
||||
telegram: "btn-telegram",
|
||||
icon: "btn-icon",
|
||||
},
|
||||
size: {
|
||||
default: "",
|
||||
sm: "btn-sm",
|
||||
lg: "btn-lg",
|
||||
icon: "btn-square",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if href}
|
||||
<a class={cn(buttonVariants({ variant, size }), className)} {href} {onclick} {...$$restProps}>
|
||||
<slot />
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class={cn(buttonVariants({ variant, size }), className)}
|
||||
{type}
|
||||
{disabled}
|
||||
{onclick}
|
||||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
{/if}
|
||||
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let active = false;
|
||||
export let compact = false;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<section class={cn("card", active && "card-active", compact && "card-compact", className)}>
|
||||
<slot />
|
||||
</section>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card-action" class={cn("admin-cn-card-action", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card-content" class={cn("admin-cn-card-content", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<p data-slot="card-description" class={cn("admin-cn-card-description", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</p>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card-footer" class={cn("admin-cn-card-footer", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card-header" class={cn("admin-cn-card-header", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card-title" class={cn("admin-cn-card-title", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<div data-slot="card" class={cn("admin-cn-card", className)} {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
import Root from "./card.svelte";
|
||||
import Header from "./card-header.svelte";
|
||||
import Title from "./card-title.svelte";
|
||||
import Description from "./card-description.svelte";
|
||||
import Action from "./card-action.svelte";
|
||||
import Footer from "./card-footer.svelte";
|
||||
import Content from "./card-content.svelte";
|
||||
|
||||
export { Root, Header, Title, Description, Action, Footer, Content };
|
||||
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
import { X } from "$components/ui/icons.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
import { cubicOut } from "svelte/easing";
|
||||
import { onMount } from "svelte";
|
||||
import { fade, fly } from "svelte/transition";
|
||||
import Button from "./button.svelte";
|
||||
|
||||
export let open = false;
|
||||
export let title = "";
|
||||
export let description = "";
|
||||
export let closeLabel = "Close";
|
||||
export let onclose = () => {};
|
||||
let className = "";
|
||||
export { className as class };
|
||||
|
||||
function readReduceMotion() {
|
||||
return (
|
||||
typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
);
|
||||
}
|
||||
|
||||
let reduceMotion = readReduceMotion();
|
||||
|
||||
onMount(() => {
|
||||
reduceMotion = readReduceMotion();
|
||||
if (typeof window === "undefined" || !window.matchMedia) return () => {};
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const handler = () => {
|
||||
reduceMotion = mq.matches;
|
||||
};
|
||||
mq.addEventListener("change", handler);
|
||||
return () => mq.removeEventListener("change", handler);
|
||||
});
|
||||
|
||||
$: backdropTransition = reduceMotion ? { duration: 0 } : { duration: 200 };
|
||||
$: cardIn = reduceMotion ? { duration: 0, y: 0 } : { duration: 260, y: 16, easing: cubicOut };
|
||||
$: cardOut = reduceMotion ? { duration: 0, y: 0 } : { duration: 200, y: 10, easing: cubicOut };
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<div class="dialog" role="dialog" aria-modal="true" aria-label={title}>
|
||||
<button
|
||||
class="dialog-backdrop"
|
||||
type="button"
|
||||
aria-label={closeLabel}
|
||||
onclick={onclose}
|
||||
in:fade={backdropTransition}
|
||||
out:fade={backdropTransition}
|
||||
></button>
|
||||
<section class={cn("dialog-card", className)} in:fly={cardIn} out:fly={cardOut}>
|
||||
<div class="dialog-head">
|
||||
<div>
|
||||
{#if title}<h2>{title}</h2>{/if}
|
||||
{#if description}<p>{description}</p>{/if}
|
||||
</div>
|
||||
<Button variant="icon" size="icon" onclick={onclose} aria-label={closeLabel}>
|
||||
<X size={18} />
|
||||
</Button>
|
||||
</div>
|
||||
<slot />
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,67 @@
|
||||
export {
|
||||
Activity,
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Bitcoin,
|
||||
CalendarDays,
|
||||
Check,
|
||||
CheckCircle2,
|
||||
ChevronDown,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsUpDown,
|
||||
Circle,
|
||||
CircleX,
|
||||
Coins,
|
||||
Copy,
|
||||
CreditCard,
|
||||
Crown,
|
||||
Database,
|
||||
Download,
|
||||
ExternalLink,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FileText,
|
||||
Gift,
|
||||
Globe2,
|
||||
Home,
|
||||
Info,
|
||||
Key,
|
||||
LayoutDashboard,
|
||||
LockKeyhole,
|
||||
Mail,
|
||||
Map,
|
||||
Megaphone,
|
||||
Menu,
|
||||
MessageSquare,
|
||||
MousePointerClick,
|
||||
Paintbrush,
|
||||
Plus,
|
||||
QrCode,
|
||||
Radio,
|
||||
RefreshCw,
|
||||
Repeat2,
|
||||
Save,
|
||||
Send,
|
||||
Server,
|
||||
Settings,
|
||||
Shield,
|
||||
Sliders,
|
||||
Smartphone,
|
||||
Sparkles,
|
||||
Tag,
|
||||
Ticket,
|
||||
Trash2,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
TriangleAlert,
|
||||
User,
|
||||
UserMinus,
|
||||
UserPlus,
|
||||
UserRound,
|
||||
Users,
|
||||
UsersRound,
|
||||
WalletCards,
|
||||
X,
|
||||
Zap,
|
||||
} from "lucide-svelte";
|
||||
@@ -0,0 +1,10 @@
|
||||
export { default as Badge } from "./badge.svelte";
|
||||
export { default as Button } from "./button.svelte";
|
||||
export { default as Dialog } from "./dialog.svelte";
|
||||
export { default as Input } from "./input.svelte";
|
||||
export { default as LegacyCard } from "./card.svelte";
|
||||
export { default as Skeleton } from "./skeleton.svelte";
|
||||
export { default as Spinner } from "./spinner.svelte";
|
||||
export * as Icons from "./icons.js";
|
||||
export * as Card from "./card/index.js";
|
||||
export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "./primitives.js";
|
||||
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let value = "";
|
||||
export let type = "text";
|
||||
export let placeholder = "";
|
||||
export let inputmode = undefined;
|
||||
export let maxlength = undefined;
|
||||
export let autocomplete = undefined;
|
||||
export let disabled = false;
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<input
|
||||
bind:value
|
||||
class={cn("input", className)}
|
||||
on:keydown
|
||||
on:input
|
||||
on:focus
|
||||
on:blur
|
||||
{type}
|
||||
{placeholder}
|
||||
{inputmode}
|
||||
{maxlength}
|
||||
{autocomplete}
|
||||
{disabled}
|
||||
{...$$restProps}
|
||||
/>
|
||||
@@ -0,0 +1 @@
|
||||
export { Accordion, Label, Select, Separator, Switch, Tabs, Tooltip } from "bits-ui";
|
||||
@@ -0,0 +1,25 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let variant = "block";
|
||||
export let width = "";
|
||||
export let height = "";
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<span
|
||||
class={cn(
|
||||
"ui-skeleton",
|
||||
variant === "line" && "ui-skeleton-line",
|
||||
variant === "title" && "ui-skeleton-line ui-skeleton-title",
|
||||
variant === "short" && "ui-skeleton-line ui-skeleton-short",
|
||||
variant === "tiny" && "ui-skeleton-line ui-skeleton-tiny",
|
||||
variant === "badge" && "ui-skeleton-badge",
|
||||
variant === "dot" && "ui-skeleton-dot",
|
||||
className
|
||||
)}
|
||||
style={`${width ? `width:${width};` : ""}${height ? `height:${height};` : ""}`}
|
||||
aria-hidden="true"
|
||||
{...$$restProps}
|
||||
></span>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
export let size = "default";
|
||||
export let label = "";
|
||||
let className = "";
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<span
|
||||
class={cn(
|
||||
"ui-spinner",
|
||||
size === "sm" && "ui-spinner-sm",
|
||||
size === "lg" && "ui-spinner-lg",
|
||||
className
|
||||
)}
|
||||
role={label ? "status" : undefined}
|
||||
aria-label={label || undefined}
|
||||
aria-hidden={label ? undefined : "true"}
|
||||
{...$$restProps}
|
||||
></span>
|
||||
Reference in New Issue
Block a user