@theguild/components 8.2.1-alpha-20250109070509-76b0d1f8d904bbe0f927edd87c2c4fcf797efbe2 → 8.2.1-alpha-20250110015759-00f319d1d3da793843e7d71cb9fcd6cb3e28b88b
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/components/index.js
CHANGED
|
@@ -28,6 +28,7 @@ export * from "./explore-main-product-cards";
|
|
|
28
28
|
export * from "./text-link";
|
|
29
29
|
export * from "./contact-us";
|
|
30
30
|
import { Giscus } from "./giscus";
|
|
31
|
+
export * from "./product-card";
|
|
31
32
|
export * from "./version-dropdown";
|
|
32
33
|
export * from "./dropdown";
|
|
33
34
|
export {
|
|
@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useId } from "react";
|
|
3
3
|
import { cn } from "../../cn";
|
|
4
4
|
import { FOUR_MAIN_PRODUCTS, PRODUCTS } from "../../products";
|
|
5
|
-
import { HighlightDecoration } from "../decorations";
|
|
5
|
+
import { DecorationIsolation, HighlightDecoration } from "../decorations";
|
|
6
6
|
import { ArrowIcon } from "../icons";
|
|
7
7
|
import { ReactComponent as HiveDecoration } from "./hive-decoration";
|
|
8
8
|
import { ReactComponent as HiveGatewayDecoration } from "./hive-gateway-decoration";
|
|
@@ -19,54 +19,65 @@ function MainProductCard({ as: Root, product, className, ...rest }) {
|
|
|
19
19
|
const Icon = product.logo;
|
|
20
20
|
const isHive = product.name === PRODUCTS.HIVE.name;
|
|
21
21
|
const id = useId();
|
|
22
|
-
return /* @__PURE__ */
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
23
|
Root,
|
|
24
24
|
{
|
|
25
25
|
className: cn(
|
|
26
|
-
"hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:w-[283.5px]",
|
|
26
|
+
"hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl max-md:min-w-[283.5px]",
|
|
27
27
|
isHive ? "bg-green-1000 text-white" : "bg-blue-400 text-green-1000",
|
|
28
28
|
className
|
|
29
29
|
),
|
|
30
30
|
...rest,
|
|
31
|
-
children:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
children:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
31
|
+
children: /* @__PURE__ */ jsxs(
|
|
32
|
+
"a",
|
|
33
|
+
{
|
|
34
|
+
className: "relative z-10 flex h-full flex-1 flex-col justify-between p-8 outline-none focus-visible:outline-none",
|
|
35
|
+
href: product.href,
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsx("p", { className: "font-medium", children: product.name }),
|
|
38
|
+
/* @__PURE__ */ jsx(Icon, { className: "mt-8" }),
|
|
39
|
+
/* @__PURE__ */ jsx(ArrowIcon, { className: "absolute bottom-8 right-8" }),
|
|
40
|
+
/* @__PURE__ */ jsxs(DecorationIsolation, { children: [
|
|
41
|
+
/* @__PURE__ */ jsx(
|
|
42
|
+
Decoration,
|
|
43
|
+
{
|
|
44
|
+
strokeWidth: "0.5px",
|
|
45
|
+
className: cn(
|
|
46
|
+
"stroke-white/70",
|
|
47
|
+
"pointer-events-none absolute bottom-0 right-0 h-full opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100"
|
|
48
|
+
),
|
|
49
|
+
fill: `url(#${id})`
|
|
50
|
+
}
|
|
51
|
+
),
|
|
52
|
+
/* @__PURE__ */ jsx(
|
|
53
|
+
"svg",
|
|
54
|
+
{
|
|
55
|
+
className: "size-0",
|
|
56
|
+
children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
|
|
57
|
+
"linearGradient",
|
|
58
|
+
{
|
|
59
|
+
id,
|
|
60
|
+
x1: "1",
|
|
61
|
+
y1: "2",
|
|
62
|
+
x2: "161",
|
|
63
|
+
y2: "171",
|
|
64
|
+
gradientUnits: "userSpaceOnUse",
|
|
65
|
+
children: isHive ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
66
|
+
/* @__PURE__ */ jsx("stop", { stopColor: "#3b736a" }),
|
|
67
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#245850" })
|
|
68
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
69
|
+
/* @__PURE__ */ jsx("stop", { stopColor: "white", stopOpacity: "0.1" }),
|
|
70
|
+
/* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0.4" })
|
|
71
|
+
] })
|
|
72
|
+
}
|
|
73
|
+
) })
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ jsx(HighlightDecoration, { className: "pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" })
|
|
77
|
+
] })
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
)
|
|
70
81
|
}
|
|
71
82
|
);
|
|
72
83
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@theguild/components",
|
|
3
|
-
"version": "8.2.1-alpha-
|
|
3
|
+
"version": "8.2.1-alpha-20250110015759-00f319d1d3da793843e7d71cb9fcd6cb3e28b88b",
|
|
4
4
|
"repository": {
|
|
5
5
|
"url": "https://github.com/the-guild-org/docs",
|
|
6
6
|
"directory": "packages/components"
|