ss6-futuristic-component 1.1.2 → 1.2.1
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/CHANGELOG.md +26 -0
- package/dist/index.d.mts +22 -7
- package/dist/index.d.ts +22 -7
- package/dist/index.js +112 -56
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +113 -57
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +107 -19
- package/package.json +1 -1
- package/readme.md +28 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 1.2.1 (2026-10-11)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **Header.Menu:** long page lists now scroll inside the drawer (title and search stay pinned) instead of scrolling the page; the page behind is locked while the drawer is open.
|
|
10
|
+
|
|
11
|
+
### Changes
|
|
12
|
+
|
|
13
|
+
- No component forces uppercase any more (Header title, tabs, menu title, page names, group headings): text renders exactly as passed.
|
|
14
|
+
- **Header.Menu:** page tiles are wider (min 300px) and shorter (min 60px).
|
|
15
|
+
|
|
16
|
+
## 1.2.0 (2026-10-11)
|
|
17
|
+
|
|
18
|
+
### Features
|
|
19
|
+
|
|
20
|
+
- **Header.Menu:** new client component for the header drop-down. Pages are grouped by `description` (used as the group name) and a search box filters by page label or group. Clicking a page or pressing Escape closes the drawer.
|
|
21
|
+
|
|
22
|
+
### ⚠ BREAKING CHANGES
|
|
23
|
+
|
|
24
|
+
- **Header:** the `pages` and `drawerTitle` props are replaced by `menu`. Render `<Header.Menu pages={...} title="..." />` from a `"use client"` file and pass it as `menu`; `Header` itself stays a server component.
|
|
25
|
+
|
|
26
|
+
### Improvements
|
|
27
|
+
|
|
28
|
+
- **Header:** taller bar (52px); wider shortcut tabs that grow with their label; yellow slashes follow the outer end of each tab group so they never overlap the tabs; roomier drop-down tiles (min 250px), less panel padding, no bottom shadow.
|
|
29
|
+
- **Footer:** taller center panel (44px, footer 48px); corner lines sit on the panel border and the slashes match its slant.
|
|
30
|
+
|
|
5
31
|
## 1.1.2 (2026-10-11)
|
|
6
32
|
|
|
7
33
|
### Improvements
|
package/dist/index.d.mts
CHANGED
|
@@ -176,31 +176,46 @@ type ProgressBar = {
|
|
|
176
176
|
};
|
|
177
177
|
declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
|
|
178
178
|
|
|
179
|
-
type
|
|
179
|
+
type HeaderMenuPage = {
|
|
180
180
|
label: string;
|
|
181
181
|
href: string;
|
|
182
|
-
|
|
183
|
-
type HeaderPage = HeaderLink & {
|
|
182
|
+
/** group name: pages sharing a description are listed under one heading */
|
|
184
183
|
description?: string;
|
|
185
184
|
icon?: IconProp;
|
|
186
185
|
};
|
|
186
|
+
type HeaderMenu = {
|
|
187
|
+
pages: HeaderMenuPage[];
|
|
188
|
+
activeUrl?: string;
|
|
189
|
+
title?: string;
|
|
190
|
+
searchPlaceholder?: string;
|
|
191
|
+
/** link component, e.g. Next.js Link; defaults to <a> */
|
|
192
|
+
CustomComponent?: React.ElementType;
|
|
193
|
+
};
|
|
194
|
+
declare function HeaderMenu({ pages, activeUrl, title, searchPlaceholder, CustomComponent, }: Readonly<HeaderMenu>): React.JSX.Element;
|
|
195
|
+
|
|
196
|
+
type HeaderLink = {
|
|
197
|
+
label: string;
|
|
198
|
+
href: string;
|
|
199
|
+
};
|
|
187
200
|
type Header = {
|
|
188
201
|
title: string;
|
|
189
202
|
/** shortcut tabs; first half sits left of the title, the rest on the right */
|
|
190
203
|
tabs?: HeaderLink[];
|
|
191
|
-
/**
|
|
192
|
-
|
|
204
|
+
/** drop-down menu content, usually <Header.Menu /> (the yellow arrow appears only when given) */
|
|
205
|
+
menu?: React.ReactNode;
|
|
193
206
|
activeUrl?: string;
|
|
194
207
|
left?: React.ReactNode;
|
|
195
208
|
right?: React.ReactNode;
|
|
196
|
-
drawerTitle?: string;
|
|
197
209
|
/** link component, e.g. Next.js Link; defaults to <a> */
|
|
198
210
|
CustomComponent?: React.ElementType;
|
|
199
211
|
/** id of the hidden toggle; change it if a page renders more than one Header */
|
|
200
212
|
menuId?: string;
|
|
201
213
|
className?: string;
|
|
202
214
|
};
|
|
203
|
-
declare function Header({ title, tabs,
|
|
215
|
+
declare function Header({ title, tabs, menu, activeUrl, left, right, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
|
|
216
|
+
declare namespace Header {
|
|
217
|
+
var Menu: typeof HeaderMenu;
|
|
218
|
+
}
|
|
204
219
|
|
|
205
220
|
type Footer = {
|
|
206
221
|
text: React.ReactNode;
|
package/dist/index.d.ts
CHANGED
|
@@ -176,31 +176,46 @@ type ProgressBar = {
|
|
|
176
176
|
};
|
|
177
177
|
declare function ProgressBar({ value, max, label, showValue, color, className, }: Readonly<ProgressBar>): React.JSX.Element;
|
|
178
178
|
|
|
179
|
-
type
|
|
179
|
+
type HeaderMenuPage = {
|
|
180
180
|
label: string;
|
|
181
181
|
href: string;
|
|
182
|
-
|
|
183
|
-
type HeaderPage = HeaderLink & {
|
|
182
|
+
/** group name: pages sharing a description are listed under one heading */
|
|
184
183
|
description?: string;
|
|
185
184
|
icon?: IconProp;
|
|
186
185
|
};
|
|
186
|
+
type HeaderMenu = {
|
|
187
|
+
pages: HeaderMenuPage[];
|
|
188
|
+
activeUrl?: string;
|
|
189
|
+
title?: string;
|
|
190
|
+
searchPlaceholder?: string;
|
|
191
|
+
/** link component, e.g. Next.js Link; defaults to <a> */
|
|
192
|
+
CustomComponent?: React.ElementType;
|
|
193
|
+
};
|
|
194
|
+
declare function HeaderMenu({ pages, activeUrl, title, searchPlaceholder, CustomComponent, }: Readonly<HeaderMenu>): React.JSX.Element;
|
|
195
|
+
|
|
196
|
+
type HeaderLink = {
|
|
197
|
+
label: string;
|
|
198
|
+
href: string;
|
|
199
|
+
};
|
|
187
200
|
type Header = {
|
|
188
201
|
title: string;
|
|
189
202
|
/** shortcut tabs; first half sits left of the title, the rest on the right */
|
|
190
203
|
tabs?: HeaderLink[];
|
|
191
|
-
/**
|
|
192
|
-
|
|
204
|
+
/** drop-down menu content, usually <Header.Menu /> (the yellow arrow appears only when given) */
|
|
205
|
+
menu?: React.ReactNode;
|
|
193
206
|
activeUrl?: string;
|
|
194
207
|
left?: React.ReactNode;
|
|
195
208
|
right?: React.ReactNode;
|
|
196
|
-
drawerTitle?: string;
|
|
197
209
|
/** link component, e.g. Next.js Link; defaults to <a> */
|
|
198
210
|
CustomComponent?: React.ElementType;
|
|
199
211
|
/** id of the hidden toggle; change it if a page renders more than one Header */
|
|
200
212
|
menuId?: string;
|
|
201
213
|
className?: string;
|
|
202
214
|
};
|
|
203
|
-
declare function Header({ title, tabs,
|
|
215
|
+
declare function Header({ title, tabs, menu, activeUrl, left, right, CustomComponent, menuId, className, }: Readonly<Header>): React.JSX.Element;
|
|
216
|
+
declare namespace Header {
|
|
217
|
+
var Menu: typeof HeaderMenu;
|
|
218
|
+
}
|
|
204
219
|
|
|
205
220
|
type Footer = {
|
|
206
221
|
text: React.ReactNode;
|
package/dist/index.js
CHANGED
|
@@ -720,16 +720,78 @@ function ProgressBar({
|
|
|
720
720
|
}
|
|
721
721
|
|
|
722
722
|
// src/components/Header.tsx
|
|
723
|
+
var import_react19 = __toESM(require("react"));
|
|
724
|
+
|
|
725
|
+
// src/components/HeaderMenu.tsx
|
|
723
726
|
var import_react18 = __toESM(require("react"));
|
|
724
727
|
var import_react_fontawesome10 = require("@fortawesome/react-fontawesome");
|
|
728
|
+
var import_free_solid_svg_icons8 = require("@fortawesome/free-solid-svg-icons");
|
|
729
|
+
function HeaderMenu({
|
|
730
|
+
pages,
|
|
731
|
+
activeUrl,
|
|
732
|
+
title = "All Pages",
|
|
733
|
+
searchPlaceholder = "Search menu ...",
|
|
734
|
+
CustomComponent
|
|
735
|
+
}) {
|
|
736
|
+
const Link = CustomComponent || "a";
|
|
737
|
+
const [keyword, setKeyword] = (0, import_react18.useState)("");
|
|
738
|
+
const ref = (0, import_react18.useRef)(null);
|
|
739
|
+
function close() {
|
|
740
|
+
var _a, _b;
|
|
741
|
+
const toggle = (_b = (_a = ref.current) == null ? void 0 : _a.closest(".ph")) == null ? void 0 : _b.querySelector(".ph__toggle");
|
|
742
|
+
if (toggle) toggle.checked = false;
|
|
743
|
+
}
|
|
744
|
+
(0, import_react18.useEffect)(() => {
|
|
745
|
+
const onKey = (e) => e.key === "Escape" && close();
|
|
746
|
+
document.addEventListener("keydown", onKey);
|
|
747
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
748
|
+
}, []);
|
|
749
|
+
const groups = (0, import_react18.useMemo)(() => {
|
|
750
|
+
const q = keyword.trim().toLowerCase();
|
|
751
|
+
const map = /* @__PURE__ */ new Map();
|
|
752
|
+
pages.filter(
|
|
753
|
+
({ label, description = "" }) => label.toLowerCase().includes(q) || description.toLowerCase().includes(q)
|
|
754
|
+
).forEach((page) => {
|
|
755
|
+
var _a, _b;
|
|
756
|
+
const key = (_a = page.description) != null ? _a : "";
|
|
757
|
+
map.set(key, [...(_b = map.get(key)) != null ? _b : [], page]);
|
|
758
|
+
});
|
|
759
|
+
return [...map.entries()];
|
|
760
|
+
}, [pages, keyword]);
|
|
761
|
+
const total = groups.reduce((n, [, list2]) => n + list2.length, 0);
|
|
762
|
+
return /* @__PURE__ */ import_react18.default.createElement("div", { ref, className: "ph-menu" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__panel-head" }, /* @__PURE__ */ import_react18.default.createElement("div", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__kicker" }, "// NAVIGATE"), /* @__PURE__ */ import_react18.default.createElement("h2", { className: "ph__panel-title" }, title)), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph-menu__tools" }, /* @__PURE__ */ import_react18.default.createElement(
|
|
763
|
+
TextInput,
|
|
764
|
+
{
|
|
765
|
+
type: "search",
|
|
766
|
+
icon: import_free_solid_svg_icons8.faMagnifyingGlass,
|
|
767
|
+
value: keyword,
|
|
768
|
+
placeholder: searchPlaceholder,
|
|
769
|
+
"aria-label": searchPlaceholder,
|
|
770
|
+
outerclass: "ph-menu__search",
|
|
771
|
+
onChange: (e) => setKeyword(e.target.value)
|
|
772
|
+
}
|
|
773
|
+
), /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph__count" }, String(total).padStart(2, "0"), " PAGES"))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph-menu__list" }, total === 0 && /* @__PURE__ */ import_react18.default.createElement("p", { className: "ph-menu__empty" }, 'No menu matches "', keyword, '"'), groups.map(([group, list2]) => /* @__PURE__ */ import_react18.default.createElement("section", { key: group || "_", className: "ph-menu__group" }, group && /* @__PURE__ */ import_react18.default.createElement("h3", { className: "ph-menu__group-title" }, group), /* @__PURE__ */ import_react18.default.createElement("div", { className: "ph__grid" }, list2.map(({ label, href, icon }) => /* @__PURE__ */ import_react18.default.createElement(
|
|
774
|
+
Link,
|
|
775
|
+
{
|
|
776
|
+
key: href,
|
|
777
|
+
href,
|
|
778
|
+
"aria-current": href === activeUrl ? "page" : void 0,
|
|
779
|
+
className: "ph-page",
|
|
780
|
+
onClick: close
|
|
781
|
+
},
|
|
782
|
+
icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__icon" }, /* @__PURE__ */ import_react18.default.createElement(import_react_fontawesome10.FontAwesomeIcon, { icon })),
|
|
783
|
+
/* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__name" }, label)
|
|
784
|
+
)))))));
|
|
785
|
+
}
|
|
786
|
+
|
|
787
|
+
// src/components/Header.tsx
|
|
725
788
|
function Header({
|
|
726
789
|
title,
|
|
727
790
|
tabs = [],
|
|
728
|
-
|
|
791
|
+
menu,
|
|
729
792
|
activeUrl,
|
|
730
793
|
left: left2,
|
|
731
794
|
right: right2,
|
|
732
|
-
drawerTitle = "All Pages",
|
|
733
795
|
CustomComponent,
|
|
734
796
|
menuId = "ph-menu",
|
|
735
797
|
className = ""
|
|
@@ -737,7 +799,26 @@ function Header({
|
|
|
737
799
|
const Link = CustomComponent || "a";
|
|
738
800
|
const current = (href) => href === activeUrl ? "page" : void 0;
|
|
739
801
|
const half = Math.ceil(tabs.length / 2);
|
|
740
|
-
const
|
|
802
|
+
const slashes = (side) => /* @__PURE__ */ import_react19.default.createElement(
|
|
803
|
+
"svg",
|
|
804
|
+
{
|
|
805
|
+
className: `ph__slash ph__slash--${side}`,
|
|
806
|
+
width: "48",
|
|
807
|
+
height: "14",
|
|
808
|
+
viewBox: "0 0 48 14",
|
|
809
|
+
fill: "none",
|
|
810
|
+
"aria-hidden": "true"
|
|
811
|
+
},
|
|
812
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
813
|
+
"path",
|
|
814
|
+
{
|
|
815
|
+
d: side === "l" ? "M8 14l-8-14 M18 14l-8-14 M28 14l-8-14 M38 14l-8-14 M48 14l-8-14" : "M0 14l8-14 M10 14l8-14 M20 14l8-14 M30 14l8-14 M40 14l8-14",
|
|
816
|
+
stroke: `url(#ph-fade${side === "l" ? "L" : "R"})`,
|
|
817
|
+
strokeWidth: "3"
|
|
818
|
+
}
|
|
819
|
+
)
|
|
820
|
+
);
|
|
821
|
+
const renderTabs = (list2, side) => /* @__PURE__ */ import_react19.default.createElement("nav", { className: `ph__tabs ph__tabs--${side}`, "aria-label": "Shortcuts" }, slashes(side), list2.map(({ label, href }) => /* @__PURE__ */ import_react19.default.createElement(
|
|
741
822
|
Link,
|
|
742
823
|
{
|
|
743
824
|
key: href,
|
|
@@ -747,7 +828,7 @@ function Header({
|
|
|
747
828
|
},
|
|
748
829
|
label
|
|
749
830
|
)));
|
|
750
|
-
return /* @__PURE__ */
|
|
831
|
+
return /* @__PURE__ */ import_react19.default.createElement("header", { className: `ph ${className}` }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "ph__bar", "aria-hidden": "true" }), /* @__PURE__ */ import_react19.default.createElement(
|
|
751
832
|
"svg",
|
|
752
833
|
{
|
|
753
834
|
className: "ph__deco",
|
|
@@ -757,10 +838,10 @@ function Header({
|
|
|
757
838
|
fill: "none",
|
|
758
839
|
"aria-hidden": "true"
|
|
759
840
|
},
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
/* @__PURE__ */
|
|
762
|
-
/* @__PURE__ */
|
|
763
|
-
/* @__PURE__ */
|
|
841
|
+
/* @__PURE__ */ import_react19.default.createElement("defs", null, /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "ph-title", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-panel-top" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-panel-bottom" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "ph-inner", x1: "0", y1: "1", x2: "0", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-accent", stopOpacity: ".32" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: ".6", className: "ph__stop-accent", stopOpacity: "0" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "ph-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" })), /* @__PURE__ */ import_react19.default.createElement("linearGradient", { id: "ph-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react19.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
|
|
842
|
+
/* @__PURE__ */ import_react19.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-title)" }),
|
|
843
|
+
/* @__PURE__ */ import_react19.default.createElement("path", { d: "M540 0H900L866 56H574Z", fill: "url(#ph-inner)" }),
|
|
844
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
764
845
|
"path",
|
|
765
846
|
{
|
|
766
847
|
className: "ph__deco-corners",
|
|
@@ -769,24 +850,8 @@ function Header({
|
|
|
769
850
|
strokeLinejoin: "round",
|
|
770
851
|
strokeLinecap: "round"
|
|
771
852
|
}
|
|
772
|
-
),
|
|
773
|
-
/* @__PURE__ */ import_react18.default.createElement(
|
|
774
|
-
"path",
|
|
775
|
-
{
|
|
776
|
-
d: "M320 40l-8-14 M330 40l-8-14 M340 40l-8-14 M350 40l-8-14 M360 40l-8-14",
|
|
777
|
-
stroke: "url(#ph-fadeL)",
|
|
778
|
-
strokeWidth: "3"
|
|
779
|
-
}
|
|
780
|
-
),
|
|
781
|
-
/* @__PURE__ */ import_react18.default.createElement(
|
|
782
|
-
"path",
|
|
783
|
-
{
|
|
784
|
-
d: "M1080 40l8-14 M1090 40l8-14 M1100 40l8-14 M1110 40l8-14 M1120 40l8-14",
|
|
785
|
-
stroke: "url(#ph-fadeR)",
|
|
786
|
-
strokeWidth: "3"
|
|
787
|
-
}
|
|
788
853
|
)
|
|
789
|
-
), /* @__PURE__ */
|
|
854
|
+
), /* @__PURE__ */ import_react19.default.createElement("h1", { className: "ph__title" }, title), tabs.length > 0 && renderTabs(tabs.slice(0, half), "l"), tabs.length > 1 && renderTabs(tabs.slice(half), "r"), left2 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "ph__slot ph__slot--left" }, left2), right2 && /* @__PURE__ */ import_react19.default.createElement("div", { className: "ph__slot ph__slot--right" }, right2), menu && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
|
|
790
855
|
"input",
|
|
791
856
|
{
|
|
792
857
|
id: menuId,
|
|
@@ -794,14 +859,14 @@ function Header({
|
|
|
794
859
|
className: "ph__toggle",
|
|
795
860
|
"aria-label": "Show all pages"
|
|
796
861
|
}
|
|
797
|
-
), /* @__PURE__ */
|
|
862
|
+
), /* @__PURE__ */ import_react19.default.createElement("span", { className: "ph__arrow-glow" }, /* @__PURE__ */ import_react19.default.createElement(
|
|
798
863
|
"label",
|
|
799
864
|
{
|
|
800
865
|
htmlFor: menuId,
|
|
801
866
|
className: "ph__arrow",
|
|
802
867
|
"aria-hidden": "true"
|
|
803
868
|
}
|
|
804
|
-
), /* @__PURE__ */
|
|
869
|
+
), /* @__PURE__ */ import_react19.default.createElement(
|
|
805
870
|
"svg",
|
|
806
871
|
{
|
|
807
872
|
className: "ph__arrow-ring",
|
|
@@ -811,7 +876,7 @@ function Header({
|
|
|
811
876
|
fill: "none",
|
|
812
877
|
"aria-hidden": "true"
|
|
813
878
|
},
|
|
814
|
-
/* @__PURE__ */
|
|
879
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
815
880
|
"polygon",
|
|
816
881
|
{
|
|
817
882
|
className: "ph__arrow-track",
|
|
@@ -819,7 +884,7 @@ function Header({
|
|
|
819
884
|
pathLength: "100"
|
|
820
885
|
}
|
|
821
886
|
),
|
|
822
|
-
/* @__PURE__ */
|
|
887
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
823
888
|
"polygon",
|
|
824
889
|
{
|
|
825
890
|
className: "ph__arrow-dash",
|
|
@@ -827,30 +892,21 @@ function Header({
|
|
|
827
892
|
pathLength: "100"
|
|
828
893
|
}
|
|
829
894
|
)
|
|
830
|
-
)), /* @__PURE__ */
|
|
895
|
+
)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "ph__drawer" }, /* @__PURE__ */ import_react19.default.createElement(
|
|
831
896
|
"label",
|
|
832
897
|
{
|
|
833
898
|
htmlFor: menuId,
|
|
834
899
|
className: "ph__backdrop",
|
|
835
900
|
"aria-hidden": "true"
|
|
836
901
|
}
|
|
837
|
-
), /* @__PURE__ */
|
|
838
|
-
Link,
|
|
839
|
-
{
|
|
840
|
-
key: href,
|
|
841
|
-
href,
|
|
842
|
-
"aria-current": current(href),
|
|
843
|
-
className: "ph-page"
|
|
844
|
-
},
|
|
845
|
-
icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__icon" }, /* @__PURE__ */ import_react18.default.createElement(import_react_fontawesome10.FontAwesomeIcon, { icon })),
|
|
846
|
-
/* @__PURE__ */ import_react18.default.createElement("span", null, /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__name" }, label), description && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__desc" }, description))
|
|
847
|
-
)))))));
|
|
902
|
+
), /* @__PURE__ */ import_react19.default.createElement("section", { className: "ph__panel", "aria-label": "Menu" }, menu))));
|
|
848
903
|
}
|
|
904
|
+
Header.Menu = HeaderMenu;
|
|
849
905
|
|
|
850
906
|
// src/components/Footer.tsx
|
|
851
|
-
var
|
|
907
|
+
var import_react20 = __toESM(require("react"));
|
|
852
908
|
function Footer2({ text, className = "" }) {
|
|
853
|
-
return /* @__PURE__ */
|
|
909
|
+
return /* @__PURE__ */ import_react20.default.createElement("footer", { className: `pf ${className}` }, /* @__PURE__ */ import_react20.default.createElement("div", { className: "pf__panel" }, /* @__PURE__ */ import_react20.default.createElement("p", { className: "pf__text" }, text), /* @__PURE__ */ import_react20.default.createElement(
|
|
854
910
|
"svg",
|
|
855
911
|
{
|
|
856
912
|
className: "pf__corner pf__corner--l",
|
|
@@ -860,17 +916,17 @@ function Footer2({ text, className = "" }) {
|
|
|
860
916
|
fill: "none",
|
|
861
917
|
"aria-hidden": "true"
|
|
862
918
|
},
|
|
863
|
-
/* @__PURE__ */
|
|
919
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
864
920
|
"path",
|
|
865
921
|
{
|
|
866
922
|
className: "ph__deco-corners",
|
|
867
|
-
d: "
|
|
923
|
+
d: "M13.2 15L19.8 0.5H56",
|
|
868
924
|
strokeWidth: "2.5",
|
|
869
925
|
strokeLinejoin: "round",
|
|
870
926
|
strokeLinecap: "round"
|
|
871
927
|
}
|
|
872
928
|
)
|
|
873
|
-
), /* @__PURE__ */
|
|
929
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
874
930
|
"svg",
|
|
875
931
|
{
|
|
876
932
|
className: "pf__corner pf__corner--r",
|
|
@@ -880,17 +936,17 @@ function Footer2({ text, className = "" }) {
|
|
|
880
936
|
fill: "none",
|
|
881
937
|
"aria-hidden": "true"
|
|
882
938
|
},
|
|
883
|
-
/* @__PURE__ */
|
|
939
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
884
940
|
"path",
|
|
885
941
|
{
|
|
886
942
|
className: "ph__deco-corners",
|
|
887
|
-
d: "M42
|
|
943
|
+
d: "M42.8 15L36.2 0.5H0",
|
|
888
944
|
strokeWidth: "2.5",
|
|
889
945
|
strokeLinejoin: "round",
|
|
890
946
|
strokeLinecap: "round"
|
|
891
947
|
}
|
|
892
948
|
)
|
|
893
|
-
), /* @__PURE__ */
|
|
949
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
894
950
|
"svg",
|
|
895
951
|
{
|
|
896
952
|
className: "pf__slash pf__slash--l",
|
|
@@ -900,16 +956,16 @@ function Footer2({ text, className = "" }) {
|
|
|
900
956
|
fill: "none",
|
|
901
957
|
"aria-hidden": "true"
|
|
902
958
|
},
|
|
903
|
-
/* @__PURE__ */
|
|
904
|
-
/* @__PURE__ */
|
|
959
|
+
/* @__PURE__ */ import_react20.default.createElement("defs", null, /* @__PURE__ */ import_react20.default.createElement("linearGradient", { id: "pf-fadeL", x1: "0", y1: "0", x2: "1", y2: "0" }, /* @__PURE__ */ import_react20.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react20.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
|
|
960
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
905
961
|
"path",
|
|
906
962
|
{
|
|
907
|
-
d: "M0
|
|
963
|
+
d: "M0 12l5.5-12 M10 12l5.5-12 M20 12l5.5-12 M30 12l5.5-12 M40 12l5.5-12",
|
|
908
964
|
stroke: "url(#pf-fadeL)",
|
|
909
965
|
strokeWidth: "3"
|
|
910
966
|
}
|
|
911
967
|
)
|
|
912
|
-
), /* @__PURE__ */
|
|
968
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
913
969
|
"svg",
|
|
914
970
|
{
|
|
915
971
|
className: "pf__slash pf__slash--r",
|
|
@@ -919,11 +975,11 @@ function Footer2({ text, className = "" }) {
|
|
|
919
975
|
fill: "none",
|
|
920
976
|
"aria-hidden": "true"
|
|
921
977
|
},
|
|
922
|
-
/* @__PURE__ */
|
|
923
|
-
/* @__PURE__ */
|
|
978
|
+
/* @__PURE__ */ import_react20.default.createElement("defs", null, /* @__PURE__ */ import_react20.default.createElement("linearGradient", { id: "pf-fadeR", x1: "1", y1: "0", x2: "0", y2: "0" }, /* @__PURE__ */ import_react20.default.createElement("stop", { offset: "0", className: "ph__stop-yellow", stopOpacity: "0" }), /* @__PURE__ */ import_react20.default.createElement("stop", { offset: "1", className: "ph__stop-yellow" }))),
|
|
979
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
924
980
|
"path",
|
|
925
981
|
{
|
|
926
|
-
d: "
|
|
982
|
+
d: "M1.5 0l5.5 12 M11.5 0l5.5 12 M21.5 0l5.5 12 M31.5 0l5.5 12 M41.5 0l5.5 12",
|
|
927
983
|
stroke: "url(#pf-fadeR)",
|
|
928
984
|
strokeWidth: "3"
|
|
929
985
|
}
|