@chtc/web-components 0.0.0-0 → 0.0.0-10

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.
Files changed (53) hide show
  1. package/README.md +8 -0
  2. package/dist/Article/Article.d.ts +6 -0
  3. package/dist/Article/Article.d.ts.map +1 -0
  4. package/dist/Article/Article.js +20 -0
  5. package/dist/Article/Article.js.map +1 -0
  6. package/dist/Article/index.d.ts +2 -0
  7. package/dist/Article/index.d.ts.map +1 -0
  8. package/dist/Article/index.js +2 -0
  9. package/dist/Article/index.js.map +1 -0
  10. package/dist/ArticleCard/ArticleCard.d.ts +4 -0
  11. package/dist/ArticleCard/ArticleCard.d.ts.map +1 -0
  12. package/dist/ArticleCard/ArticleCard.js +15 -0
  13. package/dist/ArticleCard/ArticleCard.js.map +1 -0
  14. package/dist/ArticleCard/index.d.ts +2 -0
  15. package/dist/ArticleCard/index.d.ts.map +1 -0
  16. package/dist/ArticleCard/index.js +2 -0
  17. package/dist/ArticleCard/index.js.map +1 -0
  18. package/dist/HorizontalArticleCard/HorizontalArticleCard.d.ts +4 -0
  19. package/dist/HorizontalArticleCard/HorizontalArticleCard.d.ts.map +1 -0
  20. package/dist/HorizontalArticleCard/HorizontalArticleCard.js +11 -0
  21. package/dist/HorizontalArticleCard/HorizontalArticleCard.js.map +1 -0
  22. package/dist/HorizontalArticleCard/index.d.ts +2 -0
  23. package/dist/HorizontalArticleCard/index.d.ts.map +1 -0
  24. package/dist/HorizontalArticleCard/index.js +2 -0
  25. package/dist/HorizontalArticleCard/index.js.map +1 -0
  26. package/dist/TopStyledBlock/TopStyledBlock.d.ts +10 -0
  27. package/dist/TopStyledBlock/TopStyledBlock.d.ts.map +1 -0
  28. package/dist/TopStyledBlock/TopStyledBlock.js +10 -0
  29. package/dist/TopStyledBlock/TopStyledBlock.js.map +1 -0
  30. package/dist/TopStyledBlock/index.d.ts +2 -0
  31. package/dist/TopStyledBlock/index.d.ts.map +1 -0
  32. package/dist/TopStyledBlock/index.js +2 -0
  33. package/dist/TopStyledBlock/index.js.map +1 -0
  34. package/dist/index.d.ts +5 -0
  35. package/dist/index.d.ts.map +1 -0
  36. package/dist/index.js +5 -0
  37. package/dist/index.js.map +1 -0
  38. package/dist/types.d.ts +33 -0
  39. package/dist/types.d.ts.map +1 -0
  40. package/dist/types.js +5 -0
  41. package/dist/types.js.map +1 -0
  42. package/package.json +22 -17
  43. package/src/index.d.ts +0 -0
  44. package/src/index.ts +0 -1
  45. package/src/layout/Header/BurgerMenu.tsx +0 -101
  46. package/src/layout/Header/DesktopMenu.tsx +0 -50
  47. package/src/layout/Header/Header.tsx +0 -54
  48. package/src/layout/Header/HeaderDropdown.tsx +0 -71
  49. package/src/layout/Header/HeaderItem.tsx +0 -110
  50. package/src/layout/Header/ImageIcon.tsx +0 -1
  51. package/src/layout/Header/index.d.ts +0 -21
  52. package/src/layout/Header/index.tsx +0 -5
  53. package/src/layout/index.ts +0 -1
package/README.md CHANGED
@@ -4,3 +4,11 @@ PATh Web Components
4
4
  Key Packages
5
5
  - nextjs
6
6
  - material-ui
7
+
8
+ ## Creating new components
9
+
10
+ ### Running the dev environment
11
+
12
+ ```npm
13
+ npm run storybook
14
+ ```
@@ -0,0 +1,6 @@
1
+ import { BackendArticle } from '../types';
2
+ declare const Article: ({ article }: {
3
+ article: BackendArticle;
4
+ }) => import("react/jsx-runtime").JSX.Element;
5
+ export default Article;
6
+ //# sourceMappingURL=Article.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../src/Article/Article.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,cAAc,EAAC,MAAM,UAAU,CAAA;AAEvC,QAAA,MAAM,OAAO,gBAAe;IAAC,OAAO,EAAE,cAAc,CAAA;CAAC,4CAiCpD,CAAA;AAED,eAAe,OAAO,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Typography, Box, Container } from '@mui/material';
3
+ import Balancer from "react-wrap-balancer";
4
+ import Markdown from "react-markdown";
5
+ import rehypeRaw from "rehype-raw";
6
+ const Article = ({ article }) => {
7
+ return (_jsx(Container, { maxWidth: "md", children: _jsxs(Box, { pt: 6, children: [_jsxs(Box, { textAlign: "center", pb: 2, children: [_jsx(Box, { pb: 6, children: _jsx(Typography, { variant: "h3", children: _jsx(Balancer, { children: article.title }) }) }), _jsx(Box, { height: "1rem", borderRadius: "10px", bgcolor: "primary.main" }), _jsxs(Box, { pt: 1, display: "flex", justifyContent: "space-between", children: [_jsx(Typography, { variant: "h5", children: article.author }), _jsx(Typography, { variant: "h5", children: article.date.toLocaleDateString() })] })] }), _jsx(Markdown, { rehypePlugins: [rehypeRaw], components: {
8
+ h1: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
9
+ h2: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
10
+ h3: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
11
+ h4: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
12
+ h5: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
13
+ h6: ({ children }) => _jsx(Typography, { variant: "h1", children: children }),
14
+ p: ({ children }) => _jsx(Typography, { variant: "body1", children: children }),
15
+ a: ({ children, href }) => _jsx("a", { style: { color: "#0885ff" }, href: href, children: children }),
16
+ img: ({ src, alt }) => _jsx("img", { style: { maxWidth: "100%", height: "auto" }, src: src, alt: alt }),
17
+ }, children: article.content })] }) }));
18
+ };
19
+ export default Article;
20
+ //# sourceMappingURL=Article.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Article.js","sourceRoot":"","sources":["../../src/Article/Article.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAE,GAAG,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACzD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAC3C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,MAAM,OAAO,GAAG,CAAC,EAAC,OAAO,EAA4B,EAAE,EAAE;IACxD,OAAO,CACL,KAAC,SAAS,IAAC,QAAQ,EAAE,IAAI,YACxB,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,aACT,MAAC,GAAG,IAAC,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,aAC9B,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACT,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,KAAC,QAAQ,cAAE,OAAO,CAAC,KAAK,GAAY,GAAa,GACxE,EACN,KAAC,GAAG,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,GAAQ,EAC1E,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,eAAe,aAC3D,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,OAAO,CAAC,MAAM,GAAc,EACxD,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAc,IACtE,IACD,EACN,KAAC,QAAQ,IACP,aAAa,EAAE,CAAC,SAAS,CAAC,EAC1B,UAAU,EAAE;wBACX,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,EAAE,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAG,QAAQ,GAAc;wBACtE,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,QAAQ,GAAc;wBACxE,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAC,EAAE,EAAE,CAAC,YAAG,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,EAAE,IAAI,EAAE,IAAI,YAAG,QAAQ,GAAK;wBACjF,GAAG,EAAE,CAAC,EAAC,GAAG,EAAE,GAAG,EAAC,EAAE,EAAE,CAAC,cAAK,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,GAAI;qBAC3F,YAED,OAAO,CAAC,OAAO,GACN,IACN,GACK,CACb,CAAA;AACF,CAAC,CAAA;AAED,eAAe,OAAO,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Article';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './Article';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { ArticleCardProps } from "../types";
2
+ declare const ArticleCard: ({ href, article }: ArticleCardProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default ArticleCard;
4
+ //# sourceMappingURL=ArticleCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ArticleCard.d.ts","sourceRoot":"","sources":["../../src/ArticleCard/ArticleCard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAI1C,QAAA,MAAM,WAAW,sBAAsB,gBAAgB,4CA2BtD,CAAA;AAED,eAAe,WAAW,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Typography, Box } from '@mui/material';
3
+ import Balancer from "react-wrap-balancer";
4
+ import Link from "next/link";
5
+ import TopStyledBlock from "../TopStyledBlock/TopStyledBlock";
6
+ const ArticleCard = ({ href, article }) => {
7
+ const style = {
8
+ transition: "box-shadow .2s",
9
+ boxShadow: "grey 1px 1px 3px",
10
+ "&:hover": { boxShadow: "grey 1px 1px 5px" },
11
+ };
12
+ return (_jsx(Box, { borderRadius: 2, overflow: "hidden", sx: style, children: _jsxs(Link, { href: href, children: [_jsx(Box, { children: _jsx("img", { style: { objectFit: "cover", width: "100%", aspectRatio: 2 }, src: article.image.path, alt: article.image.alt }) }), _jsx(Box, { children: _jsxs(Box, { pl: 2, p: 2, children: [_jsx(Box, { py: 1, pt: 1, children: _jsx(TopStyledBlock, { height: ".25rem", width: "5rem", offset: "-.75rem", children: _jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: _jsx(Balancer, { children: article.title }) }) }) }), _jsx(Typography, { variant: "body1", children: article.excerpt })] }) })] }) }));
13
+ };
14
+ export default ArticleCard;
15
+ //# sourceMappingURL=ArticleCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ArticleCard.js","sourceRoot":"","sources":["../../src/ArticleCard/ArticleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,UAAU,EAAE,GAAG,EAAC,MAAM,eAAe,CAAC;AAC9C,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IAE1D,MAAM,KAAK,GAAG;QACb,UAAU,EAAE,gBAAgB;QAC5B,SAAS,EAAE,kBAAkB;QAC7B,SAAS,EAAE,EAAC,SAAS,EAAE,kBAAkB,EAAC;KAC1C,CAAA;IAED,OAAO,CACL,KAAC,GAAG,IAAC,YAAY,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,YAClD,MAAC,IAAI,IAAC,IAAI,EAAE,IAAI,aACf,KAAC,GAAG,cACH,cAAK,KAAK,EAAE,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAC,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,GAAI,GAC/G,EACN,KAAC,GAAG,cACH,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,aACf,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,cAAc,IAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,YACjE,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,EAAC,UAAU,EAAE,MAAM,EAAC,YAAE,KAAC,QAAQ,cAAE,OAAO,CAAC,KAAK,GAAY,GAAa,GACtF,GACZ,EACN,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,CAAC,OAAO,GAAc,IACvD,GACD,IACA,GACF,CACP,CAAA;AACF,CAAC,CAAA;AAED,eAAe,WAAW,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './ArticleCard';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ArticleCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './ArticleCard';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ArticleCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { ArticleCardProps } from "../types";
2
+ declare const HorizontalArticleCard: ({ href, article }: ArticleCardProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default HorizontalArticleCard;
4
+ //# sourceMappingURL=HorizontalArticleCard.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HorizontalArticleCard.d.ts","sourceRoot":"","sources":["../../src/HorizontalArticleCard/HorizontalArticleCard.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAC,gBAAgB,EAAC,MAAM,UAAU,CAAC;AAE1C,QAAA,MAAM,qBAAqB,sBAAsB,gBAAgB,4CA8BhE,CAAA;AAED,eAAe,qBAAqB,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Grid, Typography, Box } from '@mui/material';
3
+ import Balancer from "react-wrap-balancer";
4
+ import TopStyledBlock from "../TopStyledBlock";
5
+ import Link from "next/link";
6
+ import { ArrowRight } from "@mui/icons-material";
7
+ const HorizontalArticleCard = ({ href, article }) => {
8
+ return (_jsx(Box, { sx: { display: { xs: 'none', md: 'block' } }, children: _jsxs(Grid, { container: true, children: [_jsx(Grid, { item: true, xs: 6, children: _jsx("img", { style: { objectFit: "cover", width: "100%", height: "100%", aspectRatio: 2 }, src: article.image.path, alt: article.image.alt }) }), _jsx(Grid, { xs: 6, display: "flex", children: _jsxs(Box, { width: "100%", pl: 2, p: 3, display: "flex", flexDirection: "column", bgcolor: "#cfe4ff52", children: [_jsx(Box, { py: 1, children: _jsx(TopStyledBlock, { height: ".25rem", width: "5rem", offset: "-.75rem", children: _jsx(Typography, { variant: "h5", children: _jsx(Balancer, { children: article.title }) }) }) }), _jsx(Typography, { variant: "body1", children: article.excerpt }), _jsx(Box, { sx: { marginTop: "auto", paddingTop: "2rem", fontWeight: "300" }, children: _jsx(Box, { sx: { color: "#0885ff" }, children: _jsxs(Link, { href: href, children: [_jsx(Typography, { variant: "body1", sx: { display: "inline", paddingRight: ".2rem" }, children: "Read More" }), _jsx(ArrowRight, { height: 18, width: 24, fill: "currentColor" })] }) }) })] }) })] }) }));
9
+ };
10
+ export default HorizontalArticleCard;
11
+ //# sourceMappingURL=HorizontalArticleCard.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HorizontalArticleCard.js","sourceRoot":"","sources":["../../src/HorizontalArticleCard/HorizontalArticleCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,GAAG,EAAC,MAAM,eAAe,CAAC;AACpD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAG/C,MAAM,qBAAqB,GAAG,CAAC,EAAC,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IACpE,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,YAChD,MAAC,IAAI,IAAC,SAAS,mBACd,KAAC,IAAI,IAAC,IAAI,QAAC,EAAE,EAAE,CAAC,YACf,cAAK,KAAK,EAAE,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAC,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,GAAI,GAC9H,EACP,KAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,YAC3B,MAAC,GAAG,IAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,aAC9F,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACT,KAAC,cAAc,IAAC,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,YACjE,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,YAAE,KAAC,QAAQ,cAAE,OAAO,CAAC,KAAK,GAAY,GAAa,GAC5D,GACZ,EACN,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,OAAO,CAAC,OAAO,GAAc,EAC5D,KAAC,GAAG,IAAC,EAAE,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAC,YAClE,KAAC,GAAG,IAAC,EAAE,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,YAC1B,MAAC,IAAI,IAAC,IAAI,EAAE,IAAI,aACf,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAC,0BAE/D,EACb,KAAC,UAAU,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,cAAc,GAAG,IACpD,GACF,GACD,IACD,GACA,IACD,GACF,CACP,CAAA;AACF,CAAC,CAAA;AAED,eAAe,qBAAqB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './HorizontalArticleCard';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/HorizontalArticleCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './HorizontalArticleCard';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/HorizontalArticleCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from "react";
2
+ export interface TopStyledBlockProps {
3
+ children: ReactNode;
4
+ width?: string;
5
+ offset?: string;
6
+ height?: string;
7
+ }
8
+ declare const TopStyledBlock: React.FC<TopStyledBlockProps>;
9
+ export default TopStyledBlock;
10
+ //# sourceMappingURL=TopStyledBlock.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopStyledBlock.d.ts","sourceRoot":"","sources":["../../src/TopStyledBlock/TopStyledBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhC,MAAM,WAAW,mBAAmB;IACnC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;CACf;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgBjD,CAAA;AAED,eAAe,cAAc,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box } from "@mui/material";
3
+ const TopStyledBlock = ({ children, width, offset, height }) => {
4
+ width = width ? width : "5rem";
5
+ height = height ? height : "1rem";
6
+ offset = offset ? offset : "-2rem";
7
+ return (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Box, { height: 0, children: _jsx(Box, { bgcolor: "primary.main", width: width, height: height, mt: offset, borderRadius: 2 }) }), _jsx(Box, { children: children })] }));
8
+ };
9
+ export default TopStyledBlock;
10
+ //# sourceMappingURL=TopStyledBlock.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TopStyledBlock.js","sourceRoot":"","sources":["../../src/TopStyledBlock/TopStyledBlock.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,GAAG,EAAC,MAAM,eAAe,CAAC;AASlC,MAAM,cAAc,GAAkC,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAC,EAAE,EAAE;IAE3F,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAA;IAC9B,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IACjC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAA;IAElC,OAAO,CACL,MAAC,GAAG,IAAC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,aAC5C,KAAC,GAAG,IAAC,MAAM,EAAE,CAAC,YACb,KAAC,GAAG,IAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,GAAQ,GAC1F,EACN,KAAC,GAAG,cACF,QAAQ,GACJ,IACD,CACP,CAAA;AACF,CAAC,CAAA;AAED,eAAe,cAAc,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './TopStyledBlock';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TopStyledBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { default } from './TopStyledBlock';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TopStyledBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { default as ArticleCard } from './ArticleCard';
2
+ export { default as HorizontalArticleCard } from './HorizontalArticleCard';
3
+ export { default as TopStyledBlock } from './TopStyledBlock';
4
+ export { default as Article } from './Article';
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,5 @@
1
+ export { default as ArticleCard } from './ArticleCard';
2
+ export { default as HorizontalArticleCard } from './HorizontalArticleCard';
3
+ export { default as TopStyledBlock } from './TopStyledBlock';
4
+ export { default as Article } from './Article';
5
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1,33 @@
1
+ /**
2
+ * Article Types
3
+ */
4
+ export interface ArticleCardProps {
5
+ href: string;
6
+ article: BackendArticle;
7
+ }
8
+ type website = "htcondor" | "path" | "osg" | "chtc" | "pelican";
9
+ type tag = "chtc_featured_article";
10
+ type article_type = "news" | "user";
11
+ export interface Image {
12
+ path: string;
13
+ alt: string;
14
+ }
15
+ export interface Article {
16
+ content: string;
17
+ title: string;
18
+ author: string;
19
+ date: Date;
20
+ publish_on: website[];
21
+ type: article_type;
22
+ tag: tag;
23
+ image: Image;
24
+ excerpt: string;
25
+ banner_src: string;
26
+ banner_alt: string;
27
+ }
28
+ export interface BackendArticle extends Article {
29
+ slug: string[];
30
+ path: string;
31
+ }
32
+ export {};
33
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,gBAAgB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,cAAc,CAAC;CACxB;AAED,KAAK,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAC/D,KAAK,GAAG,GAAG,uBAAuB,CAAA;AAClC,KAAK,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,KAAK;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,OAAO,EAAE,CAAC;IACtB,IAAI,EAAE,YAAY,CAAC;IACnB,GAAG,EAAE,GAAG,CAAC;IACT,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,cAAe,SAAQ,OAAO;IAC9C,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACb"}
package/dist/types.js ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Article Types
3
+ */
4
+ export {};
5
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG"}
package/package.json CHANGED
@@ -1,36 +1,38 @@
1
1
  {
2
2
  "name": "@chtc/web-components",
3
- "version": "0.0.0-0",
3
+ "version": "0.0.0-10",
4
4
  "description": "PATh Web Components",
5
- "main": "src/index.ts",
6
- "types": "src/index.d.ts",
5
+ "main": "dist/index.js",
6
+ "types": "dist/index.d.ts",
7
7
  "scripts": {
8
8
  "test": "jest --coverage --json --outputFile=.github/tests/test-summary.json",
9
- "build": "tsc",
9
+ "build": "tsc --build src",
10
10
  "storybook": "storybook dev -p 6006",
11
11
  "build-storybook": "storybook build",
12
- "publish:increment": "npm version prerelease --no-git-tag-version && npm publish --access public"
12
+ "publish": "npm publish --omit=dev --access public",
13
+ "publish:increment": "npm version prerelease --no-git-tag-version && npm run publish"
13
14
  },
14
15
  "files": [
15
- "src"
16
+ "dist"
16
17
  ],
17
18
  "author": "",
18
19
  "license": "Apache-2.0",
19
20
  "devDependencies": {
20
21
  "@babel/preset-typescript": "^7.23.3",
21
- "@chromatic-com/storybook": "^1.6.1",
22
- "@storybook/addon-essentials": "^8.1.11",
23
- "@storybook/addon-interactions": "^8.1.11",
24
- "@storybook/addon-links": "^8.1.11",
25
- "@storybook/addon-onboarding": "^8.1.11",
26
- "@storybook/blocks": "^8.1.11",
27
- "@storybook/nextjs": "^8.1.11",
28
- "@storybook/react": "^8.1.11",
29
- "@storybook/test": "^8.1.11",
22
+ "@chromatic-com/storybook": "^3.2.3",
23
+ "@storybook/addon-essentials": "^8.4.7",
24
+ "@storybook/addon-interactions": "^8.4.7",
25
+ "@storybook/addon-links": "^8.4.7",
26
+ "@storybook/addon-onboarding": "^8.4.7",
27
+ "@storybook/addon-themes": "^8.4.7",
28
+ "@storybook/blocks": "^8.4.7",
29
+ "@storybook/nextjs": "^8.4.7",
30
+ "@storybook/react": "^8.4.7",
31
+ "@storybook/test": "^8.4.7",
30
32
  "@types/jest": "^29.5.8",
31
33
  "jest": "^29.7.0",
32
34
  "jest-environment-jsdom": "^29.7.0",
33
- "storybook": "^8.1.11",
35
+ "storybook": "^8.4.7",
34
36
  "ts-jest": "^29.1.1",
35
37
  "typescript": "^5.2.2"
36
38
  },
@@ -38,6 +40,9 @@
38
40
  "@emotion/react": "^11.11.4",
39
41
  "@emotion/styled": "^11.11.5",
40
42
  "@mui/icons-material": "^5.16.0",
41
- "@mui/material": "^5.16.0"
43
+ "@mui/material": "^5.14.19",
44
+ "react-markdown": "^9.0.1",
45
+ "react-wrap-balancer": "^1.1.1",
46
+ "rehype-raw": "^7.0.0"
42
47
  }
43
48
  }
package/src/index.d.ts DELETED
File without changes
package/src/index.ts DELETED
@@ -1 +0,0 @@
1
- export * from './layout'
@@ -1,101 +0,0 @@
1
- 'use client';
2
- import React, {useState} from "react";
3
- import {Box,Typography, IconButton, Drawer, Divider, List, ListSubheader} from "@mui/material";
4
- import MenuIcon from '@mui/icons-material/Menu';
5
- import {
6
- Home, GitHub, Description, Groups, Email, Help, Group, Info, Grade, Newspaper, Close, Terminal, CalendarMonth, FileDownload
7
- } from "@mui/icons-material";
8
- import { HeaderDropdown, HeaderLink, HeaderMainLink } from "./HeaderDropdown";
9
- import { HeaderLinkItem, HeaderMenuProps } from "./index";
10
-
11
- export const BurgerMenu = ({menuItems} : {menuItems: (Omit<HeaderMenuProps, "setAnchor" | "anchorEl"> | HeaderLinkItem)[]}) => {
12
- const [openDrawer, setOpenDrawer] = useState(false);
13
-
14
- const handleDrawer = () => {
15
- setOpenDrawer(!openDrawer);
16
- };
17
-
18
- return (
19
- <Box ml={"auto"}>
20
- <IconButton
21
- aria-label="menu"
22
- onClick={handleDrawer}
23
- >
24
- <MenuIcon/>
25
- </IconButton>
26
- <Drawer anchor={"right"} open={openDrawer} onClose={handleDrawer}
27
- sx={{
28
- "& .MuiDrawer-paper": {
29
- boxSizing: "border-box",
30
- width: "100%",
31
- "@media (min-width: 576px)": {
32
- width: "30rem",
33
- }
34
- },
35
- boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.25)",
36
- backdropFilter: "blur(2px)",
37
- WebkitBackdropFilter: "blur(2px)",
38
- backgroundColor: "rgba(255, 255, 255, 0.5)",
39
- }}
40
- >
41
- <List
42
- sx={{margin: "1rem" }}
43
- component="nav"
44
- aria-labelledby="nested-list-subheader"
45
- subheader={
46
- <ListSubheader component="div" id="nested-list-subheader">
47
- <Box style={{display: "flex", flexDirection:"row", justifyContent:"start" }}>
48
- <img src={PelicanLogo} alt={"Pelican Logo"} height={48}/>
49
- <Typography variant={"h5"} pl={1} my={"auto"}>Pelican Platform</Typography>
50
- <IconButton
51
- sx={{ml: "auto"}}
52
- edge="start"
53
- color="inherit"
54
- aria-label="menu"
55
- onClick={handleDrawer}
56
- >
57
- <Close sx={{fontSize:"2rem"}}/>
58
- </IconButton>
59
- </Box>
60
- </ListSubheader>
61
- }
62
- >
63
- <Divider sx={{my:2}}/>
64
- {menuItems.map((item) => {
65
- if ('menuItems' in item) {
66
- // This is a dropdown item
67
- return (
68
- <HeaderDropdown key={item.value} value={item.value} icon={item.icon}>
69
- {item.menuItems.map((subItem) => (
70
- <HeaderLink
71
- key={item.value}
72
- value={subItem.value}
73
- href={subItem.href}
74
- icon={subItem.icon}
75
- target={subItem?.target}
76
- onClick={handleDrawer}
77
- />
78
- ))}
79
- </HeaderDropdown>
80
- );
81
- } else {
82
- // This is a main link item
83
- return (
84
- <HeaderMainLink
85
- key={item.value}
86
- value={item.value}
87
- href={item.href}
88
- icon={item.icon}
89
- target={item.target}
90
- onClick={handleDrawer}
91
- />
92
- );
93
- }
94
- })}
95
- </List>
96
- </Drawer>
97
- </Box>
98
- );
99
- }
100
-
101
- export default BurgerMenu;
@@ -1,50 +0,0 @@
1
- 'use client'
2
-
3
- import {useState, ReactNode, useRef, ComponentType} from "react";
4
- import {Box, Button, Grid, IconButton, Menu, MenuItem, Tooltip, IconProps} from "@mui/material"
5
-
6
- import {HeaderItem} from "./HeaderItem";
7
-
8
- import type {HeaderLinkItem, MenuProps} from "./index.d";
9
-
10
- export const DesktopMenu = ({menuItems} : {menuItems: MenuProps[]}) => {
11
-
12
- const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
13
-
14
- return (
15
- <>
16
- <Box display={"flex"} mb={.5}>
17
- {menuItems.filter(x => "type" in x ? x?.type != "icon" : true).map((item) => (
18
- <HeaderItem
19
- key={item.value}
20
- {...item}
21
- anchorEl={anchorEl}
22
- setAnchor={(element) => {
23
- setAnchorEl((anchorEl) => {
24
- if(element == null) {
25
- return element
26
- }
27
- if(anchorEl?.id == element.id) {
28
- return null
29
- }
30
- return element
31
- })
32
- }}
33
- />
34
- ))}
35
- </Box>
36
- <Box marginLeft={"auto"}>
37
- <Grid container spacing={1}>
38
- {menuItems.filter(x => "type" in x ? x?.type == "icon" : false).map((item) => (
39
- <Grid key={item.value} item>
40
- <HeaderIconLink
41
- {...item as HeaderLinkItem}
42
- />
43
- </Grid>
44
- ))}
45
- </Grid>
46
- </Box>
47
- </>
48
- )
49
- }
50
-
@@ -1,54 +0,0 @@
1
- 'use client'
2
-
3
- import {useState, useEffect, ReactNode} from "react";
4
- import {Box, Typography} from "@mui/material"
5
- import styles from "../../../app/page.module.css"
6
- import Link from "next/link";
7
-
8
- import {MenuProps} from "./index.d";
9
- import {BurgerMenu, DesktopMenu, ImageIcon} from "./index";
10
-
11
- export interface HeaderProps {
12
- icon: ReactNode,
13
- title: string,
14
- menuItems: MenuProps[]
15
- }
16
-
17
- export const Header = ({icon, title, menuItems}: HeaderProps) => {
18
-
19
- // Scroll watcher for opacity
20
- let [scrolledTop, setScrolledTop] = useState(true);
21
- useEffect(() => {
22
- setScrolledTop(window.scrollY < 50);
23
- addEventListener("scroll", (event) => {
24
- setScrolledTop(window.scrollY < 50);
25
- });
26
- }, [])
27
-
28
- return (
29
- <Box className={`${styles.header} ${scrolledTop ? styles.headerScrolled : ""}`} style={{
30
- display: "flex",
31
- justifyContent: "space-between",
32
- padding: "1rem",
33
- position: "fixed",
34
- zIndex: "1",
35
- width: "100%",
36
- overflow: "hidden"
37
- }}>
38
- <Box display={"flex"} flexGrow={1}>
39
- <Link href={"/"}>
40
- <Box style={{display: "flex"}}>
41
- {icon}
42
- <Typography variant={"h5"} pl={1} my={"auto"}>{title}</Typography>
43
- </Box>
44
- </Link>
45
- <Box sx={{display: {xs: "flex", "md": "none"}}} flexGrow={1}>
46
- <BurgerMenu menuItems={menuItems}/>
47
- </Box>
48
- <Box sx={{display: {xs: "none", "md": "flex"}}} flexGrow={1}>
49
- <DesktopMenu menuItems={menuItems}/>
50
- </Box>
51
- </Box>
52
- </Box>
53
- )
54
- }
@@ -1,71 +0,0 @@
1
- 'use client'
2
-
3
- import React, { ReactNode, useState } from "react";
4
- import {Typography, ListItemButton, ListItemIcon, Collapse} from "@mui/material";
5
- import Link, {LinkProps} from "next/link";
6
- import { ExpandLess, ExpandMore} from "@mui/icons-material";
7
-
8
- interface HeaderLinkProps extends LinkProps {
9
- value: string
10
- icon: ReactNode
11
- target?: string
12
- onClick: () => void
13
- }
14
-
15
- export const HeaderLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
16
- return (
17
- <ListItemButton
18
- onClick={onClick}>
19
- <ListItemIcon sx={{ marginRight: "-0.8em", fontSize:"1.5em", marginLeft: "1em" }}>
20
- {icon}
21
- </ListItemIcon>
22
- <Typography variant="h6">
23
- <Link href={href} target={target}>
24
- {value}
25
- </Link>
26
- </Typography>
27
- </ListItemButton>
28
- )
29
- }
30
-
31
- export const HeaderMainLink = ({ value, href, icon, target, onClick }: HeaderLinkProps) => {
32
- return (
33
- <ListItemButton
34
- onClick={onClick}
35
- >
36
- <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em" }}>
37
- {icon}
38
- </ListItemIcon>
39
- <Typography variant="h5">
40
- <Link href={href} target={target}>
41
- {value}
42
- </Link>
43
- </Typography>
44
- </ListItemButton>
45
- )
46
- }
47
-
48
- export const HeaderDropdown = ({ value, children, icon }: { value: string, children: ReactNode, icon: ReactNode}) => {
49
- const [openState, setOpenState] = useState(false);
50
- const handleClick = () => {
51
- setOpenState(!openState);
52
- };
53
-
54
- return (
55
- <>
56
- <ListItemButton onClick={handleClick}>
57
- <ListItemIcon sx={{ marginRight: "-0.8em", fontSize: "2em" }}>
58
- {icon}
59
- </ListItemIcon>
60
- <Typography variant="h5">
61
- {value}
62
- </Typography>
63
- {openState ? <ExpandLess sx={{ marginLeft: "1em" }} /> : <ExpandMore sx={{ marginLeft: "0.5em" }} />}
64
- </ListItemButton>
65
- <Collapse in={openState} timeout="auto" unmountOnExit>
66
- {children}
67
- </Collapse>
68
- </>
69
- )
70
- }
71
-
@@ -1,110 +0,0 @@
1
- import React, {useRef, useEffect, useState} from "react";
2
- import Link from "next/link";
3
- import {Box, Menu, MenuItem, Tooltip, Typography} from "@mui/material";
4
- import {ArrowDropDown, ArrowDropUp} from "@mui/icons-material";
5
-
6
- import type {HeaderLinkItem, HeaderMenuProps, MenuProps} from "./index";
7
-
8
- export const HeaderItem = ({...props}: HeaderMenuProps | HeaderLinkItem) => {
9
- if("menuItems" in props) {
10
- return <HeaderMenu {...props} />
11
- } else if(props.type == "text") {
12
- return <HeaderLink {...props} />
13
- } else {
14
- return <HeaderIconLink {...props} />
15
- }
16
- }
17
-
18
- const HeaderMenu = ({icon, value, open, setAnchor, menuItems}: HeaderMenuProps) => {
19
-
20
- const anchorRef = useRef<HTMLElement>(null)
21
-
22
- // Effect to perform actions when ref changes
23
- const [refChange, setRefChange] = useState<number>(0); // State to track ref changes
24
- useEffect(() => {
25
- setRefChange(refChange + 1);
26
- }, [anchorRef.current]); // Dependency on refChange state to trigger effect
27
-
28
- return (
29
- <>
30
- <Box style={{display: "flex"}}
31
- ref={anchorRef}
32
- aria-controls={open ? `${value}-menu` : undefined}
33
- aria-haspopup="true"
34
- aria-expanded={open ? 'true' : undefined}
35
- onClick={e => setAnchor(anchorRef.current)}
36
- >
37
- <Typography id={`${value}-header`} display={"flex"} my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
38
- <Box display={"inline"} my={"auto"}>
39
- {value}
40
- </Box>
41
- {open ?
42
- <ArrowDropUp /> :
43
- <ArrowDropDown />
44
- }
45
- </Typography>
46
- </Box>
47
- <Menu
48
- anchorEl={anchorRef.current}
49
- open={open}
50
- onClose={() => setAnchor(null)}
51
- sx={{mt: 2}}
52
- anchorOrigin={{
53
- vertical: 'bottom',
54
- horizontal: 'left',
55
- }}
56
- transformOrigin={{
57
- vertical: 'top',
58
- horizontal: 'left',
59
- }}
60
- >
61
- {menuItems.map((item) => (
62
- <Link key={item.value} {...item} style={{textDecoration: "none", ...item.style}}>
63
- <MenuItem onClick={e => setAnchor(anchorRef.current)}>{item.value}</MenuItem>
64
- </Link>
65
- ))}
66
- </Menu>
67
- </>
68
- )
69
- }
70
-
71
- const HeaderLink = ({...props} : HeaderLinkItem) => {
72
- return (
73
- <Link {...props} style={{display: "flex", textDecoration: "none", ...props.style}} >
74
- <Typography my={"auto"} pl={2} lineHeight={1} variant={"h6"}>
75
- {props.value}
76
- </Typography>
77
- </Link>
78
- )
79
- }
80
-
81
- const HeaderIconLink = ({...props} : HeaderLinkItem) => {
82
- return (
83
- <Link href={props.href} target={props.target}>
84
- <Tooltip title={props.value}>
85
- <Box
86
- sx={{
87
- ":hover": {
88
- transform: "scale(1.15)",
89
- transition: "transform 0.3s",
90
- },
91
- marginTop: "2px"
92
- }}
93
- >
94
- {
95
- React.cloneElement(props.icon, {
96
- fontSize: "large",
97
- sx:{
98
- ":hover": {
99
- transform: "scale(1.15)",
100
- transition: "transform 0.3s",
101
- },
102
- marginTop: "2px"
103
- }
104
- })
105
- }
106
- </Box>
107
- </Tooltip>
108
- </Link>
109
- )
110
- }
@@ -1 +0,0 @@
1
- export const ImageIcon = ({ src, alt }: { src: string, alt: string }) => <img src={src} alt={alt} style={{ width: '24px', height: '24px' }} />;
@@ -1,21 +0,0 @@
1
- import {ReactNode} from "react";
2
- import {LinkProps} from "next/link";
3
-
4
- export type * from "./Header"
5
-
6
- export type MenuProps = Omit<HeaderMenuProps, "setAnchor" | "anchorEl"> | HeaderLinkItem
7
-
8
- interface HeaderMenuProps {
9
- icon: ReactNode
10
- value: string
11
- anchorEl: HTMLElement | null
12
- setAnchor: (x: HTMLElement | null) => void
13
- menuItems: HeaderLinkItem[]
14
- }
15
-
16
- interface HeaderLinkItem extends LinkProps {
17
- icon: ReactNode
18
- value: string
19
- target?: "_self" | "_blank"
20
- type?: "icon" | "text"
21
- }
@@ -1,5 +0,0 @@
1
- export * from './Header';
2
- export * from './HeaderItem';
3
- export * from "./BurgerMenu"
4
- export * from "./ImageIcon"
5
- export * from "./DesktopMenu"
@@ -1 +0,0 @@
1
- export * from './Header/index';