@stackshift-ui/team 6.0.6-beta.1 → 6.0.6

package/dist/chunk-AC3TBU5F.mjs

@@ -0,0 +1,85 @@
+// src/team_b.tsx
+import { Button } from "@stackshift-ui/button";
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Team_B({ team }) {
+  var _a;
+  const [activeTab, setActiveTab] = React.useState((_a = team == null ? void 0 : team[0]) == null ? void 0 : _a.name);
+  const filteredMembers = React.useMemo(
+    () => (team == null ? void 0 : team.filter((member) => (member == null ? void 0 : member.name) === activeTab)) || [],
+    [team, activeTab]
+  );
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsx(Container, { maxWidth: 1280, children: /* @__PURE__ */ jsxs(Flex, { wrap: true, align: "center", children: [
+    /* @__PURE__ */ jsx(TeamTabs, { team, activeTab, setActiveTab }),
+    /* @__PURE__ */ jsx(TeamMembersList, { members: filteredMembers })
+  ] }) }) });
+}
+function TeamTabs({ team, activeTab, setActiveTab }) {
+  return /* @__PURE__ */ jsx("div", { className: "w-full px-3 mb-8 lg:mb-0 lg:w-1/3", children: /* @__PURE__ */ jsx(
+    Flex,
+    {
+      as: "ul",
+      wrap: true,
+      justify: "center",
+      direction: "row",
+      className: "space-x-6 lg:flex-col lg:justify-start lg:space-x-0",
+      children: team == null ? void 0 : team.map((item) => /* @__PURE__ */ jsx(TeamTab, { data: item, activeTab, setActiveTab }, item.name))
+    }
+  ) });
+}
+function TeamTab({ data, activeTab, setActiveTab }) {
+  if (!data || !data.name) return null;
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      as: "button",
+      variant: "unstyled",
+      ariaLabel: data.name,
+      className: `mb-4 text-xl lg:text-2xl ${data.name === activeTab ? "text-gray-900" : "text-gray-500"} font-bold hover:text-gray-500 focus:outline-none`,
+      onClick: () => {
+        var _a;
+        return setActiveTab((_a = data.name) != null ? _a : "");
+      },
+      children: data.name
+    }
+  ) });
+}
+function TeamMembersList({ members }) {
+  if (!members) return null;
+  return /* @__PURE__ */ jsx("div", { className: "w-full px-3 lg:w-2/3", children: members.map((member, index) => /* @__PURE__ */ jsx(TeamMemberCard, { member }, index)) });
+}
+function TeamMemberCard({ member }) {
+  var _a, _b;
+  if (!member) return null;
+  return /* @__PURE__ */ jsxs(Card, { className: "flex p-6 shadow-lg bg-white", borderRadius: "md", children: [
+    ((_a = member.mainImage) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx(
+      Image,
+      {
+        className: "object-cover overflow-hidden rounded-md",
+        src: `${member.mainImage.image}`,
+        sizes: "100vw",
+        width: 329,
+        height: 494,
+        alt: (_b = member.mainImage.alt) != null ? _b : `team-member-${member.name}-profile-image`
+      }
+    ),
+    /* @__PURE__ */ jsx(TeamMmeberText, { member })
+  ] });
+}
+function TeamMmeberText({ member }) {
+  return /* @__PURE__ */ jsxs("div", { className: "order-last w-1/2 pt-6 pl-6 mt-6", children: [
+    /* @__PURE__ */ jsx(Text, { weight: "bold", fontSize: "2xl", children: member.name }),
+    /* @__PURE__ */ jsx(Text, { className: "mb-6", muted: true, children: member.jobTitle }),
+    /* @__PURE__ */ jsx(Text, { className: "mb-6 text-justify", muted: true, children: member.plainText })
+  ] });
+}
+
+export {
+  Team_B
+};

package/dist/chunk-BGXM3WLZ.mjs

@@ -0,0 +1,51 @@
+// src/team_a.tsx
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Team_A({ caption, title, team }) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1e3, children: [
+    /* @__PURE__ */ jsx(Container, { maxWidth: 576, className: "mb-10 text-center", children: /* @__PURE__ */ jsx(CaptionAndTitle, { caption, title }) }),
+    /* @__PURE__ */ jsx(Teams, { team })
+  ] }) });
+}
+function CaptionAndTitle({ caption, title }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    caption ? /* @__PURE__ */ jsx(Text, { weight: "bold", className: "text-secondary", children: caption }) : null,
+    title ? /* @__PURE__ */ jsx(Heading, { type: "h2", fontSize: "2xl", children: title }) : null
+  ] });
+}
+function Teams({ team }) {
+  if (!team) return null;
+  return /* @__PURE__ */ jsx(Flex, { wrap: true, children: team == null ? void 0 : team.map((member) => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ jsx("div", { className: "w-full px-3 mb-6 md:w-1/2 lg:w-1/3", children: /* @__PURE__ */ jsxs(Card, { className: "py-24 text-center shadow-lg bg-white", borderRadius: "md", children: [
+      ((_a = member == null ? void 0 : member.mainImage) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx(
+        Image,
+        {
+          width: 96,
+          height: 96,
+          className: "mx-auto border-0 w-[96px] h-[96px] object-cover rounded-full",
+          src: `${(_b = member == null ? void 0 : member.mainImage) == null ? void 0 : _b.image}`,
+          alt: (_d = (_c = member == null ? void 0 : member.mainImage) == null ? void 0 : _c.alt) != null ? _d : `team-member-${member == null ? void 0 : member.name}-profile-image`
+        }
+      ),
+      /* @__PURE__ */ jsx(TeamMemberText, { member })
+    ] }) }, member == null ? void 0 : member.name);
+  }) });
+}
+function TeamMemberText({ member }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { type: "h3", className: "mb-2 text-xl lg:text-2xl", children: member == null ? void 0 : member.name }),
+    /* @__PURE__ */ jsx(Text, { muted: true, children: member == null ? void 0 : member.jobTitle })
+  ] });
+}
+
+export {
+  Team_A
+};

package/dist/chunk-JBADLHBZ.mjs

@@ -0,0 +1,58 @@
+// src/team_d.tsx
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Team_D({ caption, title, team }) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1280, children: [
+    /* @__PURE__ */ jsx(CaptionAndTitle, { caption, title }),
+    /* @__PURE__ */ jsx(TeamMemberCard, { team })
+  ] }) });
+}
+function CaptionAndTitle({ caption, title }) {
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: 576, className: "mb-8 text-center lg:mb-16", children: [
+    caption && /* @__PURE__ */ jsx(Text, { weight: "bold", className: "text-secondary", children: caption }),
+    title && /* @__PURE__ */ jsx(Heading, { children: title })
+  ] });
+}
+function TeamMemberCard({ team }) {
+  if (!team) return null;
+  return /* @__PURE__ */ jsx(Flex, { wrap: true, children: team && team.map((member, index) => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ jsx("div", { className: "w-full px-4 mb-6 lg:w-1/2", children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: "items-center p-0 bg-white overflow-hidden shadow-lg sm:flex sm:flex-wrap lg:block xl:flex",
+        borderRadius: "md",
+        children: [
+          ((_a = member.mainImage) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              className: "h-[320px] w-full object-cover rounded-md sm:w-[179px] lg:w-full xl:w-[179px]",
+              sizes: "100vw",
+              src: `${(_b = member == null ? void 0 : member.mainImage) == null ? void 0 : _b.image}`,
+              width: 179,
+              height: 320,
+              alt: (_d = (_c = member == null ? void 0 : member.mainImage) == null ? void 0 : _c.alt) != null ? _d : `team-member-${member == null ? void 0 : member.name}-profile-image`
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TeamMemberText, { member })
+        ]
+      }
+    ) }, index);
+  }) });
+}
+function TeamMemberText({ member }) {
+  return /* @__PURE__ */ jsxs("div", { className: "p-4 sm:w-2/3 lg:w-full lg:pl-6 xl:w-2/3", children: [
+    /* @__PURE__ */ jsx(Text, { weight: "bold", fontSize: "2xl", className: "mb-2", children: member == null ? void 0 : member.name }),
+    /* @__PURE__ */ jsx(Text, { className: "mb-4 leading-loose", muted: true, children: member == null ? void 0 : member.plainText })
+  ] });
+}
+
+export {
+  Team_D
+};

package/dist/chunk-QXOIBK2J.mjs

@@ -0,0 +1,59 @@
+// src/team_c.tsx
+import { Card } from "@stackshift-ui/card";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Team_C({ caption, title, team }) {
+  return /* @__PURE__ */ jsx(Section, { className: "py-20 bg-background", children: /* @__PURE__ */ jsxs(Container, { maxWidth: 1280, children: [
+    /* @__PURE__ */ jsx(CaptionAndTitle, { caption, title }),
+    /* @__PURE__ */ jsx(TeamMemberCard, { team })
+  ] }) });
+}
+function CaptionAndTitle({ caption, title }) {
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: 576, className: "mb-12 text-center ", children: [
+    caption && /* @__PURE__ */ jsx(Text, { weight: "bold", className: "text-primary", children: caption }),
+    title && /* @__PURE__ */ jsx(Heading, { children: title })
+  ] });
+}
+function TeamMemberCard({ team }) {
+  if (!team) return null;
+  return /* @__PURE__ */ jsx(Flex, { wrap: true, children: team.map((member) => {
+    var _a, _b, _c, _d;
+    return /* @__PURE__ */ jsx("div", { className: "w-full px-3 mb-6 md:w-1/2 lg:w-1/3", children: /* @__PURE__ */ jsxs(
+      Card,
+      {
+        className: "w-full p-0 pb-8 overflow-hidden bg-white shadow-lg text-center",
+        borderRadius: "md",
+        children: [
+          ((_a = member.mainImage) == null ? void 0 : _a.image) && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              className: "mb-8 h-[345px] w-full object-cover rounded-md",
+              sizes: "100vw",
+              src: `${(_b = member == null ? void 0 : member.mainImage) == null ? void 0 : _b.image}`,
+              width: 345,
+              height: 256,
+              alt: (_d = (_c = member == null ? void 0 : member.mainImage) == null ? void 0 : _c.alt) != null ? _d : `team-member-${member == null ? void 0 : member.name}-profile-image`
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TeamMemberText, { member })
+        ]
+      }
+    ) }, member == null ? void 0 : member.name);
+  }) });
+}
+function TeamMemberText({ member }) {
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: "2xl", weight: "bold", className: "mb-2", children: member == null ? void 0 : member.name }),
+    /* @__PURE__ */ jsx(Text, { muted: true, children: member == null ? void 0 : member.jobTitle })
+  ] });
+}
+
+export {
+  Team_C
+};

package/dist/chunk-ZME26LYJ.mjs

@@ -0,0 +1,26 @@
+// src/team.tsx
+import { lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+var Variants = {
+  variant_a: lazy(() => import("./team_a.mjs")),
+  variant_b: lazy(() => import("./team_b.mjs")),
+  variant_c: lazy(() => import("./team_c.mjs")),
+  variant_d: lazy(() => import("./team_d.mjs"))
+};
+var displayName = "Team";
+var Team = ({ data }) => {
+  var _a, _b, _c, _d, _e, _f;
+  const variant = data == null ? void 0 : data.variant;
+  const Variant = variant && Variants[variant];
+  const props = {
+    caption: (_b = (_a = data == null ? void 0 : data.variants) == null ? void 0 : _a.subtitle) != null ? _b : void 0,
+    title: (_d = (_c = data == null ? void 0 : data.variants) == null ? void 0 : _c.title) != null ? _d : void 0,
+    team: (_f = (_e = data == null ? void 0 : data.variants) == null ? void 0 : _e.teams) != null ? _f : void 0
+  };
+  return Variant ? /* @__PURE__ */ jsx(Variant, { ...props }) : null;
+};
+Team.displayName = displayName;
+
+export {
+  Team
+};