@twreporter/react-typescript-components 0.1.0-beta.22 → 0.1.0-beta.24

package/lib/card/list/index.mjs

@@ -0,0 +1,105 @@
+import "../../constants-CBSEPx91.mjs";
+import { P1, P2, P3 } from "../../paragraph-QihuIWot.mjs";
+import { H4 } from "../../heading-BVKLYfXi.mjs";
+import { SIZE } from "../../constants-BZZgQcEy.mjs";
+import { img_placeholder_default } from "../../img-placeholder-DhOOFcVQ.mjs";
+import { LargeSkeleton, SmallSkeleton } from "../../loading-BeEKq8Mb.mjs";
+import { useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/card/list/index.tsx
+const CardList = (props) => {
+	const { size, isLoading = false } = props;
+	const [failedImageKey, setFailedImageKey] = useState(null);
+	const imageSrc = "image" in props ? props.image?.src : void 0;
+	const imageKey = `${size}:${imageSrc ?? ""}`;
+	const isImageFailed = failedImageKey === imageKey;
+	if (size === SIZE.s) {
+		if (isLoading) return /* @__PURE__ */ jsx(SmallSkeleton, {});
+		const { categoryLabel: categoryLabel$1, publishedDate: publishedDate$1, title: title$1, description: description$1, image: image$1 } = props;
+		return /* @__PURE__ */ jsxs("div", {
+			className: clsx("flex flex-col w-full gap-[8px]", "hover:opacity-70", "hover:cursor-pointer"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-row gap-[8px]",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col w-full gap-[4px]",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-row gap-[8px]",
+						children: [categoryLabel$1 ? /* @__PURE__ */ jsx(P3, {
+							className: "text-gray-600",
+							text: categoryLabel$1
+						}) : null, publishedDate$1 ? /* @__PURE__ */ jsx(P3, {
+							className: "text-gray-600",
+							text: publishedDate$1
+						}) : null]
+					}), /* @__PURE__ */ jsx(H4, {
+						className: "text-gray-800 !text-[18px]",
+						text: title$1,
+						type: H4.Type.article
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex justify-center items-center",
+					children: image$1?.src && !isImageFailed ? /* @__PURE__ */ jsx("img", {
+						src: image$1.src,
+						alt: image$1.alt ?? "",
+						className: "w-[72px] h-[72px] object-cover shrink-0",
+						onError: () => setFailedImageKey(imageKey)
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "w-[72px] h-[72px] shrink-0 flex items-center justify-center bg-gray-100",
+						children: /* @__PURE__ */ jsx(img_placeholder_default, {})
+					})
+				})]
+			}), /* @__PURE__ */ jsx(P2, {
+				className: "text-gray-800 line-clamp-3",
+				text: description$1
+			})]
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ jsx(LargeSkeleton, {});
+	const { categoryLabel, publishedDate, title, description, image } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex flex-row w-full gap-[32px]", "hover:opacity-70", "hover:cursor-pointer"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col w-full gap-[8px]",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-row gap-[8px]",
+					children: [categoryLabel ? /* @__PURE__ */ jsx(P3, {
+						className: "text-gray-600",
+						text: categoryLabel
+					}) : null, publishedDate ? /* @__PURE__ */ jsx(P3, {
+						className: "text-gray-600",
+						text: publishedDate
+					}) : null]
+				}),
+				/* @__PURE__ */ jsx(H4, {
+					className: "text-gray-800 !text-[22px]",
+					text: title,
+					type: H4.Type.article
+				}),
+				/* @__PURE__ */ jsx(P1, {
+					className: "text-gray-800 line-clamp-3",
+					text: description
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center items-center",
+			children: image?.src && !isImageFailed ? /* @__PURE__ */ jsx("img", {
+				src: image.src,
+				alt: image.alt ?? "",
+				className: "w-[216px] h-[144px] object-cover shrink-0",
+				onError: () => setFailedImageKey(imageKey)
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "w-[216px] h-[144px] shrink-0 flex items-center justify-center bg-gray-100",
+				children: /* @__PURE__ */ jsx(img_placeholder_default, {})
+			})
+		})]
+	});
+};
+CardList.Size = SIZE;
+var list_default = CardList;
+
+//#endregion
+export { list_default as default };
+//# sourceMappingURL=index.mjs.map

package/lib/card/list/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["CardList: FC<CardListProps> & { Size: typeof SIZE }","categoryLabel","publishedDate","title","image","ImgPlaceholder","description"],"sources":["../../../src/card/list/index.tsx"],"sourcesContent":["import { type FC, useState } from 'react'\nimport clsx from 'clsx'\n// text\nimport { P1, P2, P3 } from '../../text/paragraph'\nimport { H4 } from '../../text/heading'\n// constants\nimport { SIZE, type Size } from './constants'\n// skeleton\nimport { LargeSkeleton, SmallSkeleton } from './loading'\n// placeholder\nimport ImgPlaceholder from './img-placeholder'\n\ntype CardListBaseProps = {\n  categoryLabel?: string\n  publishedDate?: string\n  title: string\n  description: string\n  image?: {\n    src: string\n    alt?: string\n  }\n  size: Size\n  // TODO: add isBookmark when bookmark feature is ready\n  // isBookmark?: boolean\n  // onBookmarkClick?: () => void\n}\n\ntype CardListLoadingProps = {\n  isLoading: true\n  size: Size\n}\n\ntype CardListDetailProps = CardListBaseProps & {\n  isLoading?: false\n}\n\ntype CardListProps = CardListLoadingProps | CardListDetailProps\n\nconst CardList: FC<CardListProps> & { Size: typeof SIZE } = (props) => {\n  const { size, isLoading = false } = props\n  const [failedImageKey, setFailedImageKey] = useState<string | null>(null)\n  const imageSrc = 'image' in props ? props.image?.src : undefined\n  const imageKey = `${size}:${imageSrc ?? ''}`\n  const isImageFailed = failedImageKey === imageKey\n\n  if (size === SIZE.s) {\n    if (isLoading) {\n      return <SmallSkeleton />\n    }\n    const { categoryLabel, publishedDate, title, description, image } =\n      props as CardListDetailProps\n    return (\n      <div\n        className={clsx(\n          'flex flex-col w-full gap-[8px]',\n          'hover:opacity-70',\n          'hover:cursor-pointer'\n        )}\n      >\n        <div className=\"flex flex-row gap-[8px]\">\n          <div className=\"flex flex-col w-full gap-[4px]\">\n            <div className=\"flex flex-row gap-[8px]\">\n              {categoryLabel ? (\n                <P3 className=\"text-gray-600\" text={categoryLabel} />\n              ) : null}\n              {publishedDate ? (\n                <P3 className=\"text-gray-600\" text={publishedDate} />\n              ) : null}\n            </div>\n            <H4\n              className=\"text-gray-800 !text-[18px]\"\n              text={title}\n              type={H4.Type.article}\n            />\n          </div>\n          <div className=\"flex justify-center items-center\">\n            {image?.src && !isImageFailed ? (\n              // biome-ignore lint/performance/noImgElement: use next image later\n              <img\n                src={image.src}\n                alt={image.alt ?? ''}\n                className=\"w-[72px] h-[72px] object-cover shrink-0\"\n                onError={() => setFailedImageKey(imageKey)}\n              />\n            ) : (\n              <div className=\"w-[72px] h-[72px] shrink-0 flex items-center justify-center bg-gray-100\">\n                <ImgPlaceholder />\n              </div>\n            )}\n          </div>\n        </div>\n        <P2 className=\"text-gray-800 line-clamp-3\" text={description} />\n      </div>\n    )\n  }\n\n  if (isLoading) {\n    return <LargeSkeleton />\n  }\n\n  const { categoryLabel, publishedDate, title, description, image } =\n    props as CardListDetailProps\n  return (\n    <div\n      className={clsx(\n        'flex flex-row w-full gap-[32px]',\n        'hover:opacity-70',\n        'hover:cursor-pointer'\n      )}\n    >\n      <div className=\"flex flex-col w-full gap-[8px]\">\n        <div className=\"flex flex-row gap-[8px]\">\n          {categoryLabel ? (\n            <P3 className=\"text-gray-600\" text={categoryLabel} />\n          ) : null}\n          {publishedDate ? (\n            <P3 className=\"text-gray-600\" text={publishedDate} />\n          ) : null}\n        </div>\n        <H4\n          className=\"text-gray-800 !text-[22px]\"\n          text={title}\n          type={H4.Type.article}\n        />\n        <P1 className=\"text-gray-800 line-clamp-3\" text={description} />\n      </div>\n      <div className=\"flex justify-center items-center\">\n        {image?.src && !isImageFailed ? (\n          // biome-ignore lint/performance/noImgElement: use next image later\n          <img\n            src={image.src}\n            alt={image.alt ?? ''}\n            className=\"w-[216px] h-[144px] object-cover shrink-0\"\n            onError={() => setFailedImageKey(imageKey)}\n          />\n        ) : (\n          <div className=\"w-[216px] h-[144px] shrink-0 flex items-center justify-center bg-gray-100\">\n            <ImgPlaceholder />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nCardList.Size = SIZE\nexport default CardList\n"],"mappings":";;;;;;;;;;;AAsCA,MAAMA,YAAuD,UAAU;CACrE,MAAM,EAAE,MAAM,YAAY,UAAU;CACpC,MAAM,CAAC,gBAAgB,qBAAqB,SAAwB,KAAK;CACzE,MAAM,WAAW,WAAW,QAAQ,MAAM,OAAO,MAAM;CACvD,MAAM,WAAW,GAAG,KAAK,GAAG,YAAY;CACxC,MAAM,gBAAgB,mBAAmB;AAEzC,KAAI,SAAS,KAAK,GAAG;AACnB,MAAI,UACF,QAAO,oBAAC,kBAAgB;EAE1B,MAAM,EAAE,gCAAe,gCAAe,gBAAO,4BAAa,mBACxD;AACF,SACE,qBAAC;GACC,WAAW,KACT,kCACA,oBACA,uBACD;cAED,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;gBACb,qBAAC;MAAI,WAAU;iBACZC,kBACC,oBAAC;OAAG,WAAU;OAAgB,MAAMA;QAAiB,GACnD,MACHC,kBACC,oBAAC;OAAG,WAAU;OAAgB,MAAMA;QAAiB,GACnD;OACA,EACN,oBAAC;MACC,WAAU;MACV,MAAMC;MACN,MAAM,GAAG,KAAK;OACd;MACE,EACN,oBAAC;KAAI,WAAU;eACZC,SAAO,OAAO,CAAC,gBAEd,oBAAC;MACC,KAAKA,QAAM;MACX,KAAKA,QAAM,OAAO;MAClB,WAAU;MACV,eAAe,kBAAkB,SAAS;OAC1C,GAEF,oBAAC;MAAI,WAAU;gBACb,oBAACC,4BAAiB;OACd;MAEJ;KACF,EACN,oBAAC;IAAG,WAAU;IAA6B,MAAMC;KAAe;IAC5D;;AAIV,KAAI,UACF,QAAO,oBAAC,kBAAgB;CAG1B,MAAM,EAAE,eAAe,eAAe,OAAO,aAAa,UACxD;AACF,QACE,qBAAC;EACC,WAAW,KACT,mCACA,oBACA,uBACD;aAED,qBAAC;GAAI,WAAU;;IACb,qBAAC;KAAI,WAAU;gBACZ,gBACC,oBAAC;MAAG,WAAU;MAAgB,MAAM;OAAiB,GACnD,MACH,gBACC,oBAAC;MAAG,WAAU;MAAgB,MAAM;OAAiB,GACnD;MACA;IACN,oBAAC;KACC,WAAU;KACV,MAAM;KACN,MAAM,GAAG,KAAK;MACd;IACF,oBAAC;KAAG,WAAU;KAA6B,MAAM;MAAe;;IAC5D,EACN,oBAAC;GAAI,WAAU;aACZ,OAAO,OAAO,CAAC,gBAEd,oBAAC;IACC,KAAK,MAAM;IACX,KAAK,MAAM,OAAO;IAClB,WAAU;IACV,eAAe,kBAAkB,SAAS;KAC1C,GAEF,oBAAC;IAAI,WAAU;cACb,oBAACD,4BAAiB;KACd;IAEJ;GACF;;AAIV,SAAS,OAAO;AAChB,mBAAe"}

package/lib/card/list/loading.d.mts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+//#region src/card/list/loading.d.ts
+type RectangleProps = {
+  width: string;
+  height: string;
+  className?: string;
+};
+declare const Rectangle: FC<RectangleProps>;
+declare const LargeSkeleton: FC;
+declare const SmallSkeleton: FC;
+//#endregion
+export { LargeSkeleton, Rectangle, SmallSkeleton };
+//# sourceMappingURL=loading.d.mts.map

package/lib/card/list/loading.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+
+//#region src/card/list/loading.d.ts
+type RectangleProps = {
+  width: string;
+  height: string;
+  className?: string;
+};
+declare const Rectangle: FC<RectangleProps>;
+declare const LargeSkeleton: FC;
+declare const SmallSkeleton: FC;
+//#endregion
+export { LargeSkeleton, Rectangle, SmallSkeleton };
+//# sourceMappingURL=loading.d.ts.map

package/lib/card/list/loading.js

@@ -0,0 +1,5 @@
+const require_loading = require('../../loading-CFCk4kkD.js');
+
+exports.LargeSkeleton = require_loading.LargeSkeleton;
+exports.Rectangle = require_loading.Rectangle;
+exports.SmallSkeleton = require_loading.SmallSkeleton;

package/lib/card/list/loading.mjs

@@ -0,0 +1,3 @@
+import { LargeSkeleton, Rectangle, SmallSkeleton } from "../../loading-BeEKq8Mb.mjs";
+
+export { LargeSkeleton, Rectangle, SmallSkeleton };

package/lib/channels-BaqRhrZM.mjs

@@ -0,0 +1,63 @@
+import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
+import { text_button_default } from "./text-button-DkD8OA65.mjs";
+import { icon_button_default } from "./icon-button-B-71Zncn.mjs";
+import { external_link_default } from "./external-link-B7TYHbGX.mjs";
+import { divider_default } from "./divider-DoxG-5AA.mjs";
+import { HamburgerContext, HeaderContext } from "./context-rWQ3FoMt.mjs";
+import { Hamburger } from "./icons-CQv9VD7t.mjs";
+import { CHANNELS } from "./constants-CuIg3dyv.mjs";
+import { useContext } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import map from "lodash/map";
+
+//#region src/header/components/channels/index.tsx
+const _ = { map };
+const ChannelItem = ({ link = {
+	href: "",
+	target: "_self"
+}, label = "" }) => {
+	const { theme, isLinkExternal } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center", "[&>a]:no-underline"),
+		children: /* @__PURE__ */ jsx(LinkComponent, {
+			to: link.href,
+			target: link.target,
+			children: /* @__PURE__ */ jsx(text_button_default, {
+				text: label,
+				size: text_button_default.Size.l,
+				theme,
+				style: text_button_default.Style.dark
+			})
+		})
+	});
+};
+const Channel = () => {
+	const { releaseBranch, theme } = useContext(HeaderContext);
+	const { toggleHamburger } = useContext(HamburgerContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between w-full px-[16px] py-[8px]",
+			children: [/* @__PURE__ */ jsx(icon_button_default, {
+				iconComponent: Hamburger(releaseBranch),
+				theme,
+				onClick: toggleHamburger
+			}), _.map(CHANNELS, (channel) => {
+				return /* @__PURE__ */ jsx(ChannelItem, {
+					label: channel.label,
+					link: {
+						href: channel.to,
+						target: channel.target
+					}
+				}, `channel-${channel.label}`);
+			})]
+		}), /* @__PURE__ */ jsx(divider_default, {})]
+	});
+};
+var channels_default = Channel;
+
+//#endregion
+export { channels_default };
+//# sourceMappingURL=channels-BaqRhrZM.mjs.map

package/lib/channels-BaqRhrZM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"channels-BaqRhrZM.mjs","names":["ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider"],"sources":["../src/header/components/channels/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,IAAI,EACR,KACD;AAQD,MAAMA,eAAqC,EACzC,OAAO;CAAE,MAAM;CAAI,QAAQ;CAAS,EACpC,QAAQ,SACJ;CACJ,MAAM,EAAE,OAAO,mBAAmB,WAAW,cAAc;CAC3D,MAAM,gBAAgB,iBAAiBC,wBAAeC;AACtD,QACE,oBAAC;EAAI,WAAW,KAAK,qBAAqB,qBAAqB;YAC7D,oBAAC;GAAc,IAAI,KAAK;GAAM,QAAQ,KAAK;aACzC,oBAACC;IACC,MAAM;IACN,MAAMA,oBAAW,KAAK;IACf;IACP,OAAOA,oBAAW,MAAM;KACxB;IACY;GACZ;;AAIV,MAAM,gBAAgB;CACpB,MAAM,EAAE,eAAe,UAAU,WAAW,cAAc;CAC1D,MAAM,EAAE,oBAAoB,WAAW,iBAAiB;AACxD,QACE,qBAAC;EAAI,WAAU;aACb,qBAAC;GAAI,WAAU;cACb,oBAACC;IACC,eAAe,UAAU,cAAc;IAChC;IACP,SAAS;KACT,EACD,EAAE,IAAI,WAAW,YAAY;AAC5B,WACE,oBAAC;KAEC,OAAO,QAAQ;KACf,MAAM;MACJ,MAAM,QAAQ;MACd,QAAQ,QAAQ;MACjB;OALI,WAAW,QAAQ,QAMxB;KAEJ;IACE,EACN,oBAACC,oBAAU;GACP;;AAIV,uBAAe"}

package/lib/channels-C-6MztKV.mjs

@@ -0,0 +1,210 @@
+import { EXTERNAL_LINKS } from "./external-links-TcghBJyz.mjs";
+import { INTERNAL_LINKS } from "./internal-links-DOdRudQQ.mjs";
+
+//#region src/hamburger-menu/constants/channels.ts
+const CHANNEL_TYPE = {
+	link: "link",
+	divider: "divider",
+	dropdown: "dropdown",
+	iconLink: "icon-link",
+	lightLink: "light-link"
+};
+const Channels = [
+	{
+		type: CHANNEL_TYPE.link,
+		label: "最新",
+		to: INTERNAL_LINKS.latest,
+		target: "_self"
+	},
+	{ type: CHANNEL_TYPE.divider },
+	{
+		type: CHANNEL_TYPE.link,
+		label: "深度專題",
+		to: INTERNAL_LINKS.topics,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.dropdown,
+		label: "議題",
+		dropdownItems: [
+			{
+				label: "國際兩岸",
+				to: INTERNAL_LINKS.categories.world,
+				target: "_self"
+			},
+			{
+				label: "人權司法",
+				to: INTERNAL_LINKS.categories.humanRights,
+				target: "_self"
+			},
+			{
+				label: "政治社會",
+				to: INTERNAL_LINKS.categories.politicsAndSociety,
+				target: "_self"
+			},
+			{
+				label: "醫療健康",
+				to: INTERNAL_LINKS.categories.health,
+				target: "_self"
+			},
+			{
+				label: "環境永續",
+				to: INTERNAL_LINKS.categories.environment,
+				target: "_self"
+			},
+			{
+				label: "經濟產業",
+				to: INTERNAL_LINKS.categories.econ,
+				target: "_self"
+			},
+			{
+				label: "文化生活",
+				to: INTERNAL_LINKS.categories.culture,
+				target: "_self"
+			},
+			{
+				label: "教育校園",
+				to: INTERNAL_LINKS.categories.education,
+				target: "_self"
+			}
+		]
+	},
+	{
+		type: CHANNEL_TYPE.dropdown,
+		label: "評論",
+		dropdownItems: [
+			{
+				label: "書摘與書評",
+				to: INTERNAL_LINKS.categories.opinion.bookReview,
+				target: "_self"
+			},
+			{
+				label: "讀者投書",
+				to: INTERNAL_LINKS.categories.opinion.letter,
+				target: "_self"
+			},
+			{
+				label: "全部",
+				to: INTERNAL_LINKS.categories.opinion.index,
+				target: "_self"
+			}
+		]
+	},
+	{
+		type: CHANNEL_TYPE.link,
+		label: "人物故事",
+		to: INTERNAL_LINKS.humanStory,
+		target: "_self"
+	},
+	{ type: CHANNEL_TYPE.divider },
+	{
+		type: CHANNEL_TYPE.link,
+		label: "影像",
+		to: INTERNAL_LINKS.photography,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.dropdown,
+		label: "Podcast",
+		dropdownItems: [
+			{
+				label: "關於報導者 Podcast",
+				to: INTERNAL_LINKS.podcast.aboutPodcast,
+				target: "_self"
+			},
+			{
+				label: "The Real Story",
+				to: INTERNAL_LINKS.categories.podcast.theRealStory,
+				target: "_self"
+			},
+			{
+				label: "On the Ground 路邊攤計劃",
+				to: INTERNAL_LINKS.categories.podcast.onTheGround,
+				target: "_self"
+			}
+		]
+	},
+	{
+		type: CHANNEL_TYPE.link,
+		label: "少年報導者",
+		to: EXTERNAL_LINKS.kidsReporter,
+		target: "_blank"
+	},
+	{
+		type: CHANNEL_TYPE.link,
+		label: "報導者觀測站",
+		to: EXTERNAL_LINKS.lawmaker,
+		target: "_blank"
+	},
+	{
+		type: CHANNEL_TYPE.link,
+		label: "數位敘事",
+		to: INTERNAL_LINKS.infographic,
+		target: "_self"
+	},
+	{ type: CHANNEL_TYPE.divider },
+	{
+		type: CHANNEL_TYPE.iconLink,
+		label: "個人專區",
+		icon: "member",
+		to: INTERNAL_LINKS.account.index,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.iconLink,
+		label: "我的閱讀",
+		icon: "kid_star",
+		to: INTERNAL_LINKS.myReading.index,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.iconLink,
+		label: "已收藏",
+		icon: "bookmark_basic",
+		to: INTERNAL_LINKS.myReading.savedBookmarks,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.iconLink,
+		label: "造訪紀錄",
+		icon: "history",
+		to: INTERNAL_LINKS.myReading.browsingHistory,
+		target: "_self"
+	},
+	{ type: CHANNEL_TYPE.divider },
+	{
+		type: CHANNEL_TYPE.lightLink,
+		label: "基金會消息",
+		to: INTERNAL_LINKS.categories.foundation.index,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.lightLink,
+		label: "關於我們",
+		to: INTERNAL_LINKS.about,
+		target: "_blank"
+	},
+	{
+		type: CHANNEL_TYPE.lightLink,
+		label: "影響力報告",
+		to: INTERNAL_LINKS.influenceReport,
+		target: "_self"
+	},
+	{
+		type: CHANNEL_TYPE.lightLink,
+		label: "報導者開放實驗室",
+		to: EXTERNAL_LINKS.openLab,
+		target: "_blank"
+	},
+	{
+		type: CHANNEL_TYPE.lightLink,
+		label: "出版品與周邊",
+		to: EXTERNAL_LINKS.publicationAndMerchandise,
+		target: "_blank"
+	},
+	{ type: CHANNEL_TYPE.divider }
+];
+
+//#endregion
+export { CHANNEL_TYPE, Channels };
+//# sourceMappingURL=channels-C-6MztKV.mjs.map

package/lib/channels-C-6MztKV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"channels-C-6MztKV.mjs","names":[],"sources":["../src/hamburger-menu/constants/channels.ts"],"sourcesContent":["import { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\nimport type { LinkTarget } from '../../customized-link/type'\n\nexport const CHANNEL_TYPE = {\n  link: 'link',\n  divider: 'divider',\n  dropdown: 'dropdown',\n  iconLink: 'icon-link',\n  lightLink: 'light-link',\n} as const\n\nexport const Channels = [\n  {\n    type: CHANNEL_TYPE.link,\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '議題',\n    dropdownItems: [\n      {\n        label: '國際兩岸',\n        to: INTERNAL_LINKS.categories.world,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '人權司法',\n        to: INTERNAL_LINKS.categories.humanRights,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '政治社會',\n        to: INTERNAL_LINKS.categories.politicsAndSociety,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '醫療健康',\n        to: INTERNAL_LINKS.categories.health,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '環境永續',\n        to: INTERNAL_LINKS.categories.environment,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '經濟產業',\n        to: INTERNAL_LINKS.categories.econ,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '文化生活',\n        to: INTERNAL_LINKS.categories.culture,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '教育校園',\n        to: INTERNAL_LINKS.categories.education,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: '評論',\n    dropdownItems: [\n      {\n        label: '書摘與書評',\n        to: INTERNAL_LINKS.categories.opinion.bookReview,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '讀者投書',\n        to: INTERNAL_LINKS.categories.opinion.letter,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: '全部',\n        to: INTERNAL_LINKS.categories.opinion.index,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '人物故事',\n    to: INTERNAL_LINKS.humanStory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '影像',\n    to: INTERNAL_LINKS.photography,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.dropdown,\n    label: 'Podcast',\n    dropdownItems: [\n      {\n        label: '關於報導者 Podcast',\n        to: INTERNAL_LINKS.podcast.aboutPodcast,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'The Real Story',\n        to: INTERNAL_LINKS.categories.podcast.theRealStory,\n        target: '_self' as LinkTarget,\n      },\n      {\n        label: 'On the Ground 路邊攤計劃',\n        to: INTERNAL_LINKS.categories.podcast.onTheGround,\n        target: '_self' as LinkTarget,\n      },\n    ],\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '少年報導者',\n    to: EXTERNAL_LINKS.kidsReporter,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '報導者觀測站',\n    to: EXTERNAL_LINKS.lawmaker,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.link,\n    label: '數位敘事',\n    to: INTERNAL_LINKS.infographic,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '個人專區',\n    icon: 'member',\n    to: INTERNAL_LINKS.account.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '我的閱讀',\n    icon: 'kid_star',\n    to: INTERNAL_LINKS.myReading.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '已收藏',\n    icon: 'bookmark_basic',\n    to: INTERNAL_LINKS.myReading.savedBookmarks,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.iconLink,\n    label: '造訪紀錄',\n    icon: 'history',\n    to: INTERNAL_LINKS.myReading.browsingHistory,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '基金會消息',\n    to: INTERNAL_LINKS.categories.foundation.index,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '關於我們',\n    to: INTERNAL_LINKS.about,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '影響力報告',\n    to: INTERNAL_LINKS.influenceReport,\n    target: '_self' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '報導者開放實驗室',\n    to: EXTERNAL_LINKS.openLab,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.lightLink,\n    label: '出版品與周邊',\n    to: EXTERNAL_LINKS.publicationAndMerchandise,\n    target: '_blank' as LinkTarget,\n  },\n  {\n    type: CHANNEL_TYPE.divider,\n  },\n]\n"],"mappings":"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"}

package/lib/channels-DIQKIHpB.js

@@ -0,0 +1,73 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_text_button = require('./text-button-DlMVqsvV.js');
+const require_icon_button = require('./icon-button-Vqwyow05.js');
+const require_external_link = require('./external-link-N6pHzsZ9.js');
+const require_internal_link = require('./internal-link-CQYfLFmN.js');
+const require_divider = require('./divider-DlnnAUAf.js');
+const require_context = require('./context-CDuykLw5.js');
+const require_icons = require('./icons-UUg8_T_o.js');
+const require_constants = require('./constants-Bx32cjdN.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let lodash_map = require("lodash/map");
+lodash_map = require_chunk.__toESM(lodash_map);
+
+//#region src/header/components/channels/index.tsx
+const _ = { map: lodash_map.default };
+const ChannelItem = ({ link = {
+	href: "",
+	target: "_self"
+}, label = "" }) => {
+	const { theme, isLinkExternal } = (0, react.useContext)(require_context.HeaderContext);
+	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, clsx.default)("flex items-center", "[&>a]:no-underline"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
+			to: link.href,
+			target: link.target,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text_button.text_button_default, {
+				text: label,
+				size: require_text_button.text_button_default.Size.l,
+				theme,
+				style: require_text_button.text_button_default.Style.dark
+			})
+		})
+	});
+};
+const Channel = () => {
+	const { releaseBranch, theme } = (0, react.useContext)(require_context.HeaderContext);
+	const { toggleHamburger } = (0, react.useContext)(require_context.HamburgerContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between w-full px-[16px] py-[8px]",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_button.icon_button_default, {
+				iconComponent: require_icons.Hamburger(releaseBranch),
+				theme,
+				onClick: toggleHamburger
+			}), _.map(require_constants.CHANNELS, (channel) => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChannelItem, {
+					label: channel.label,
+					link: {
+						href: channel.to,
+						target: channel.target
+					}
+				}, `channel-${channel.label}`);
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_divider.divider_default, {})]
+	});
+};
+var channels_default = Channel;
+
+//#endregion
+Object.defineProperty(exports, 'channels_default', {
+  enumerable: true,
+  get: function () {
+    return channels_default;
+  }
+});
+//# sourceMappingURL=channels-DIQKIHpB.js.map

package/lib/channels-DIQKIHpB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"channels-DIQKIHpB.js","names":["ChannelItem: FC<ChannelItemProps>","HeaderContext","ExternalLink","InternalLink","TextButton","HamburgerContext","IconButton","Hamburger","CHANNELS","Divider"],"sources":["../src/header/components/channels/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAeA,MAAM,IAAI,EACR,yBACD;AAQD,MAAMA,eAAqC,EACzC,OAAO;CAAE,MAAM;CAAI,QAAQ;CAAS,EACpC,QAAQ,SACJ;CACJ,MAAM,EAAE,OAAO,yCAA8BC,8BAAc;CAC3D,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,2CAAC;EAAI,6BAAgB,qBAAqB,qBAAqB;YAC7D,2CAAC;GAAc,IAAI,KAAK;GAAM,QAAQ,KAAK;aACzC,2CAACC;IACC,MAAM;IACN,MAAMA,wCAAW,KAAK;IACf;IACP,OAAOA,wCAAW,MAAM;KACxB;IACY;GACZ;;AAIV,MAAM,gBAAgB;CACpB,MAAM,EAAE,eAAe,gCAAqBH,8BAAc;CAC1D,MAAM,EAAE,0CAA+BI,iCAAiB;AACxD,QACE,4CAAC;EAAI,WAAU;aACb,4CAAC;GAAI,WAAU;cACb,2CAACC;IACC,eAAeC,wBAAU,cAAc;IAChC;IACP,SAAS;KACT,EACD,EAAE,IAAIC,6BAAW,YAAY;AAC5B,WACE,2CAAC;KAEC,OAAO,QAAQ;KACf,MAAM;MACJ,MAAM,QAAQ;MACd,QAAQ,QAAQ;MACjB;OALI,WAAW,QAAQ,QAMxB;KAEJ;IACE,EACN,2CAACC,oCAAU;GACP;;AAIV,uBAAe"}