ss6-futuristic-component 1.1.1 → 1.2.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.
- package/CHANGELOG.md +22 -0
- package/dist/index.d.mts +22 -7
- package/dist/index.d.ts +22 -7
- package/dist/index.js +135 -53
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +136 -54
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +129 -15
- package/package.json +1 -1
- package/readme.md +28 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
|
|
5
|
+
## 1.2.0 (2026-10-11)
|
|
6
|
+
|
|
7
|
+
### Features
|
|
8
|
+
|
|
9
|
+
- **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.
|
|
10
|
+
|
|
11
|
+
### ⚠ BREAKING CHANGES
|
|
12
|
+
|
|
13
|
+
- **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.
|
|
14
|
+
|
|
15
|
+
### Improvements
|
|
16
|
+
|
|
17
|
+
- **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.
|
|
18
|
+
- **Footer:** taller center panel (44px, footer 48px); corner lines sit on the panel border and the slashes match its slant.
|
|
19
|
+
|
|
20
|
+
## 1.1.2 (2026-10-11)
|
|
21
|
+
|
|
22
|
+
### Improvements
|
|
23
|
+
|
|
24
|
+
- **Header:** the bar is shorter (44px, `--ph-bar`) so the title panel, tabs and expand arrow hang below it; the header still takes 64px in the layout.
|
|
25
|
+
- **Header:** a glowing dash now orbits the expand arrow (stops when the user prefers reduced motion).
|
|
26
|
+
|
|
5
27
|
## 1.1.1 (2026-10-11)
|
|
6
28
|
|
|
7
29
|
### 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"))), 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,37 +859,54 @@ 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
|
-
)
|
|
869
|
+
), /* @__PURE__ */ import_react19.default.createElement(
|
|
870
|
+
"svg",
|
|
871
|
+
{
|
|
872
|
+
className: "ph__arrow-ring",
|
|
873
|
+
width: "44",
|
|
874
|
+
height: "26",
|
|
875
|
+
viewBox: "0 0 44 26",
|
|
876
|
+
fill: "none",
|
|
877
|
+
"aria-hidden": "true"
|
|
878
|
+
},
|
|
879
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
880
|
+
"polygon",
|
|
881
|
+
{
|
|
882
|
+
className: "ph__arrow-track",
|
|
883
|
+
points: "1,1 43,1 22,25",
|
|
884
|
+
pathLength: "100"
|
|
885
|
+
}
|
|
886
|
+
),
|
|
887
|
+
/* @__PURE__ */ import_react19.default.createElement(
|
|
888
|
+
"polygon",
|
|
889
|
+
{
|
|
890
|
+
className: "ph__arrow-dash",
|
|
891
|
+
points: "1,1 43,1 22,25",
|
|
892
|
+
pathLength: "100"
|
|
893
|
+
}
|
|
894
|
+
)
|
|
895
|
+
)), /* @__PURE__ */ import_react19.default.createElement("div", { className: "ph__drawer" }, /* @__PURE__ */ import_react19.default.createElement(
|
|
805
896
|
"label",
|
|
806
897
|
{
|
|
807
898
|
htmlFor: menuId,
|
|
808
899
|
className: "ph__backdrop",
|
|
809
900
|
"aria-hidden": "true"
|
|
810
901
|
}
|
|
811
|
-
), /* @__PURE__ */
|
|
812
|
-
Link,
|
|
813
|
-
{
|
|
814
|
-
key: href,
|
|
815
|
-
href,
|
|
816
|
-
"aria-current": current(href),
|
|
817
|
-
className: "ph-page"
|
|
818
|
-
},
|
|
819
|
-
icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "ph-page__icon" }, /* @__PURE__ */ import_react18.default.createElement(import_react_fontawesome10.FontAwesomeIcon, { icon })),
|
|
820
|
-
/* @__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))
|
|
821
|
-
)))))));
|
|
902
|
+
), /* @__PURE__ */ import_react19.default.createElement("section", { className: "ph__panel", "aria-label": "Menu" }, menu))));
|
|
822
903
|
}
|
|
904
|
+
Header.Menu = HeaderMenu;
|
|
823
905
|
|
|
824
906
|
// src/components/Footer.tsx
|
|
825
|
-
var
|
|
907
|
+
var import_react20 = __toESM(require("react"));
|
|
826
908
|
function Footer2({ text, className = "" }) {
|
|
827
|
-
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(
|
|
828
910
|
"svg",
|
|
829
911
|
{
|
|
830
912
|
className: "pf__corner pf__corner--l",
|
|
@@ -834,17 +916,17 @@ function Footer2({ text, className = "" }) {
|
|
|
834
916
|
fill: "none",
|
|
835
917
|
"aria-hidden": "true"
|
|
836
918
|
},
|
|
837
|
-
/* @__PURE__ */
|
|
919
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
838
920
|
"path",
|
|
839
921
|
{
|
|
840
922
|
className: "ph__deco-corners",
|
|
841
|
-
d: "
|
|
923
|
+
d: "M13.2 15L19.8 0.5H56",
|
|
842
924
|
strokeWidth: "2.5",
|
|
843
925
|
strokeLinejoin: "round",
|
|
844
926
|
strokeLinecap: "round"
|
|
845
927
|
}
|
|
846
928
|
)
|
|
847
|
-
), /* @__PURE__ */
|
|
929
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
848
930
|
"svg",
|
|
849
931
|
{
|
|
850
932
|
className: "pf__corner pf__corner--r",
|
|
@@ -854,17 +936,17 @@ function Footer2({ text, className = "" }) {
|
|
|
854
936
|
fill: "none",
|
|
855
937
|
"aria-hidden": "true"
|
|
856
938
|
},
|
|
857
|
-
/* @__PURE__ */
|
|
939
|
+
/* @__PURE__ */ import_react20.default.createElement(
|
|
858
940
|
"path",
|
|
859
941
|
{
|
|
860
942
|
className: "ph__deco-corners",
|
|
861
|
-
d: "M42
|
|
943
|
+
d: "M42.8 15L36.2 0.5H0",
|
|
862
944
|
strokeWidth: "2.5",
|
|
863
945
|
strokeLinejoin: "round",
|
|
864
946
|
strokeLinecap: "round"
|
|
865
947
|
}
|
|
866
948
|
)
|
|
867
|
-
), /* @__PURE__ */
|
|
949
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
868
950
|
"svg",
|
|
869
951
|
{
|
|
870
952
|
className: "pf__slash pf__slash--l",
|
|
@@ -874,16 +956,16 @@ function Footer2({ text, className = "" }) {
|
|
|
874
956
|
fill: "none",
|
|
875
957
|
"aria-hidden": "true"
|
|
876
958
|
},
|
|
877
|
-
/* @__PURE__ */
|
|
878
|
-
/* @__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(
|
|
879
961
|
"path",
|
|
880
962
|
{
|
|
881
|
-
d: "M0
|
|
963
|
+
d: "M0 12l5.5-12 M10 12l5.5-12 M20 12l5.5-12 M30 12l5.5-12 M40 12l5.5-12",
|
|
882
964
|
stroke: "url(#pf-fadeL)",
|
|
883
965
|
strokeWidth: "3"
|
|
884
966
|
}
|
|
885
967
|
)
|
|
886
|
-
), /* @__PURE__ */
|
|
968
|
+
), /* @__PURE__ */ import_react20.default.createElement(
|
|
887
969
|
"svg",
|
|
888
970
|
{
|
|
889
971
|
className: "pf__slash pf__slash--r",
|
|
@@ -893,11 +975,11 @@ function Footer2({ text, className = "" }) {
|
|
|
893
975
|
fill: "none",
|
|
894
976
|
"aria-hidden": "true"
|
|
895
977
|
},
|
|
896
|
-
/* @__PURE__ */
|
|
897
|
-
/* @__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(
|
|
898
980
|
"path",
|
|
899
981
|
{
|
|
900
|
-
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",
|
|
901
983
|
stroke: "url(#pf-fadeR)",
|
|
902
984
|
strokeWidth: "3"
|
|
903
985
|
}
|