@refraction-ui/astro 0.10.0 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -37,40 +37,45 @@ const {
|
|
|
37
37
|
aria-label="Cookie consent"
|
|
38
38
|
class={cn('fixed inset-x-0 z-50 p-4', position === 'bottom' ? 'bottom-0' : 'top-0', className)}
|
|
39
39
|
>
|
|
40
|
-
<div class="mx-auto max-w-
|
|
41
|
-
<
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
<div class="mx-auto max-w-2xl overflow-hidden rounded-2xl border border-border bg-background shadow-lg">
|
|
41
|
+
<div data-rfr-cc-prompt class="flex flex-col gap-4 p-5 sm:flex-row sm:items-center">
|
|
42
|
+
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent text-xl" aria-hidden="true">🍪</div>
|
|
43
|
+
<div class="min-w-0 flex-1">
|
|
44
|
+
<p class="text-sm font-semibold">{title}</p>
|
|
45
|
+
<p class="mt-0.5 text-sm leading-relaxed text-muted-foreground">
|
|
46
|
+
{description}
|
|
47
|
+
{policyUrl && (
|
|
48
|
+
<a href={policyUrl} target="_blank" rel="noreferrer" class="font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"> {policyLabel}</a>
|
|
49
|
+
)}
|
|
50
|
+
</p>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="flex flex-wrap items-center gap-2 sm:shrink-0">
|
|
53
|
+
<button type="button" data-rfr-cc-manage class="text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">Customize</button>
|
|
54
|
+
<button type="button" data-rfr-cc-reject class="inline-flex items-center rounded-lg border border-border px-3.5 py-2 text-sm font-medium hover:bg-accent">Reject all</button>
|
|
55
|
+
<button type="button" data-rfr-cc-accept class="inline-flex items-center rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Accept all</button>
|
|
56
|
+
</div>
|
|
51
57
|
</div>
|
|
52
58
|
|
|
53
|
-
<div data-rfr-cc-settings hidden class="
|
|
59
|
+
<div data-rfr-cc-settings hidden class="space-y-2 p-5">
|
|
60
|
+
<p class="text-sm font-semibold">Cookie preferences</p>
|
|
54
61
|
{categories.map((cat) => (
|
|
55
|
-
<label class="flex items-
|
|
62
|
+
<label class="flex items-center justify-between gap-4 rounded-xl border border-border p-3">
|
|
56
63
|
<span class="min-w-0">
|
|
57
|
-
<span class="block text-sm font-medium">{cat.label}
|
|
58
|
-
{cat.description && <span class="block text-xs text-muted-foreground">{cat.description}</span>}
|
|
64
|
+
<span class="block text-sm font-medium">{cat.label}</span>
|
|
65
|
+
{cat.description && <span class="mt-0.5 block text-xs text-muted-foreground">{cat.description}</span>}
|
|
59
66
|
</span>
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
class="mt-0.5 h-4 w-4"
|
|
67
|
-
/>
|
|
67
|
+
{cat.required ? (
|
|
68
|
+
<span class="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">Always on</span>
|
|
69
|
+
) : (
|
|
70
|
+
<input type="checkbox" data-rfr-cc-cat={cat.id} aria-label={cat.label} class="h-5 w-5 accent-[hsl(var(--primary))]" />
|
|
71
|
+
)}
|
|
72
|
+
{cat.required && <input type="checkbox" data-rfr-cc-cat={cat.id} checked disabled hidden />}
|
|
68
73
|
</label>
|
|
69
74
|
))}
|
|
70
75
|
<div class="flex flex-wrap items-center gap-2 pt-1">
|
|
71
|
-
<button type="button" data-rfr-cc-
|
|
72
|
-
<button type="button" data-rfr-cc-accept class="rounded-
|
|
73
|
-
<button type="button" data-rfr-cc-
|
|
76
|
+
<button type="button" data-rfr-cc-back class="text-sm font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline">← Back</button>
|
|
77
|
+
<button type="button" data-rfr-cc-accept class="inline-flex items-center rounded-lg border border-border px-3.5 py-2 text-sm font-medium hover:bg-accent sm:ml-auto">Accept all</button>
|
|
78
|
+
<button type="button" data-rfr-cc-save class="inline-flex items-center rounded-lg bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Save preferences</button>
|
|
74
79
|
</div>
|
|
75
80
|
</div>
|
|
76
81
|
</div>
|