@olwiba/ui 0.2.15 → 0.2.16
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.
- package/dist/index.d.ts +19 -1
- package/dist/index.js +46 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/app/AppPageHero.tsx +74 -0
- package/src/index.ts +2 -0
package/package.json
CHANGED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import type { ReactNode } from 'react';
|
|
4
|
+
import type { LucideIcon } from 'lucide-react';
|
|
5
|
+
import { cn } from '../lib/utils';
|
|
6
|
+
|
|
7
|
+
export interface AppPageHeroProps {
|
|
8
|
+
eyebrow?: ReactNode;
|
|
9
|
+
title: ReactNode;
|
|
10
|
+
description?: ReactNode;
|
|
11
|
+
icon?: LucideIcon;
|
|
12
|
+
action?: ReactNode;
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
compact?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Rich page header for signed-in product/admin pages.
|
|
20
|
+
*
|
|
21
|
+
* Use this when a route needs more visual weight than a simple `PageHeader`,
|
|
22
|
+
* but still keep product-specific stats, actions, and copy in the consumer.
|
|
23
|
+
*/
|
|
24
|
+
export function AppPageHero({
|
|
25
|
+
eyebrow,
|
|
26
|
+
title,
|
|
27
|
+
description,
|
|
28
|
+
icon: Icon,
|
|
29
|
+
action,
|
|
30
|
+
children,
|
|
31
|
+
compact = false,
|
|
32
|
+
className,
|
|
33
|
+
}: AppPageHeroProps) {
|
|
34
|
+
return (
|
|
35
|
+
<section
|
|
36
|
+
className={cn(
|
|
37
|
+
'relative overflow-hidden rounded-3xl border bg-card/80 p-5 shadow-sm sm:p-6',
|
|
38
|
+
'before:absolute before:-right-16 before:-top-16 before:size-44 before:rounded-full before:bg-primary/15 before:blur-3xl',
|
|
39
|
+
'after:absolute after:-bottom-20 after:left-10 after:size-52 after:rounded-full after:bg-primary/10 after:blur-3xl',
|
|
40
|
+
className,
|
|
41
|
+
)}
|
|
42
|
+
>
|
|
43
|
+
<div className="relative flex flex-col gap-5 sm:flex-row sm:items-start sm:justify-between">
|
|
44
|
+
<div className="flex min-w-0 gap-4">
|
|
45
|
+
{Icon && (
|
|
46
|
+
<div className="flex size-12 shrink-0 items-center justify-center rounded-2xl border bg-background/70 text-primary shadow-sm">
|
|
47
|
+
<Icon className="size-5" />
|
|
48
|
+
</div>
|
|
49
|
+
)}
|
|
50
|
+
<div className="min-w-0 space-y-2">
|
|
51
|
+
{eyebrow && (
|
|
52
|
+
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-primary/80">
|
|
53
|
+
{eyebrow}
|
|
54
|
+
</p>
|
|
55
|
+
)}
|
|
56
|
+
<h1
|
|
57
|
+
className={cn(
|
|
58
|
+
'font-semibold tracking-tight',
|
|
59
|
+
compact ? 'text-2xl' : 'text-3xl sm:text-4xl',
|
|
60
|
+
)}
|
|
61
|
+
>
|
|
62
|
+
{title}
|
|
63
|
+
</h1>
|
|
64
|
+
{description && (
|
|
65
|
+
<p className="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>
|
|
66
|
+
)}
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
{action && <div className="relative shrink-0 sm:pt-1">{action}</div>}
|
|
70
|
+
</div>
|
|
71
|
+
{children && <div className="relative mt-5">{children}</div>}
|
|
72
|
+
</section>
|
|
73
|
+
);
|
|
74
|
+
}
|