diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/Breadcrumbs/breadcrumbs.module.scss | 15 | ||||
| -rw-r--r-- | components/Breadcrumbs/index.tsx | 50 | ||||
| -rw-r--r-- | components/Markdown/index.tsx | 27 | ||||
| -rw-r--r-- | components/Markdown/markdown.module.scss | 96 | ||||
| -rw-r--r-- | components/ViewPort/index.module.scss | 18 | ||||
| -rw-r--r-- | components/ViewPort/index.tsx | 23 |
6 files changed, 229 insertions, 0 deletions
diff --git a/components/Breadcrumbs/breadcrumbs.module.scss b/components/Breadcrumbs/breadcrumbs.module.scss new file mode 100644 index 0000000..104eec2 --- /dev/null +++ b/components/Breadcrumbs/breadcrumbs.module.scss @@ -0,0 +1,15 @@ +.crumb { + font-size: 1.10rem; +} + +.divider { + font-size: 1.0rem; +} + +.crumb { + align-content: center; +} + +.divider { + margin: 0 0.3rem; +}
\ No newline at end of file diff --git a/components/Breadcrumbs/index.tsx b/components/Breadcrumbs/index.tsx new file mode 100644 index 0000000..ed650e3 --- /dev/null +++ b/components/Breadcrumbs/index.tsx @@ -0,0 +1,50 @@ +import React, { Children, FC } from "react"; +import Link from "next/link"; +import styles from './breadcrumbs.module.scss'; +import clsx from 'clsx'; + +export type BreadcrumbsProps = { + className?: string; + style?: object; +}; + +const Breadcrumbs : FC<BreadcrumbsProps> = ({children, className, ...props}) => ( + <div className={clsx(styles.breadcrumbs, className)} {...props}> + {Children.map(children, (child, index) => { + return ( + <> + { + index !== 0 ? ( + <span className={styles.divider}>/</span> + ) : undefined + } + {child} + </> + ); + })} + </div> +); + +const Crumb : FC = ({children, ...props}) => ( + <span className={styles.crumb} {...props}> + {children} + </span> +); + +export type LinkCrumbProps = { + href: string; +} + +const LinkCrumb : FC<LinkCrumbProps> = ({children, href, ...props}) => ( + <Crumb> + <Link href={href}> + <a>{children}</a> + </Link> + </Crumb> +); + +export { + Crumb, + Breadcrumbs, + LinkCrumb +};
\ No newline at end of file diff --git a/components/Markdown/index.tsx b/components/Markdown/index.tsx new file mode 100644 index 0000000..4bb6c79 --- /dev/null +++ b/components/Markdown/index.tsx @@ -0,0 +1,27 @@ +import React, { FC } from 'react'; +import styles from './markdown.module.scss'; +import clsx from 'clsx'; + +interface MarkdownProps { + md: string; + className?: string; + props?: object; +} + +const Markdown : FC<MarkdownProps> = ({md, className, ...props}) => ( + <div + className={clsx(styles.markdownContainer, className)} + + dangerouslySetInnerHTML={{ + __html: md + }} + + {...props} + /> +); + +export type { + MarkdownProps +}; + +export default Markdown;
\ No newline at end of file diff --git a/components/Markdown/markdown.module.scss b/components/Markdown/markdown.module.scss new file mode 100644 index 0000000..ebd372c --- /dev/null +++ b/components/Markdown/markdown.module.scss @@ -0,0 +1,96 @@ +.markdownContainer { + strong { + font-weight: 600; + } + + h1 { + font-size: 2.8rem; + font-weight: 300; + line-height: 1.167; + letter-spacing: -0.01562em; + margin-top: 1.0rem; + margin-bottom: 1rem; + + padding-bottom: 0.4rem; + border-bottom: 0.12rem solid rgb(53, 53, 53); + } + + h2 { + font-size: 2.3rem; + font-weight: 300; + line-height: 1.2; + letter-spacing: -0.00833em; + + margin-top: 1.6rem; + margin-bottom: 0.8rem; + } + + h3 { + font-size: 1.3rem; + font-weight: 400; + line-height: 1.167; + letter-spacing: 0em; + + margin-top: 1.3rem; + margin-bottom: 0.5rem; + } + + h4 { + font-size: 1.25rem; + } + + h5 { + font-size: 1.15rem; + } + + h6 { + font-size: 1.10rem; + } + + h4, h5, h6 { + margin-top: 0.8rem; + margin-bottom: 0.6rem; + } + + p, li { + font-size: 1rem; + letter-spacing: 0.00938em; + font-weight: 300; + } + + p { + font-size: 1rem; + line-height: 1.5; + margin-bottom: 1em; + } + + code { + font-size: 1rem; + line-height: 1.5; + padding: 0.05rem 0.2rem; + } + + pre { + padding: 0.5rem 1.0rem; + margin: 0.5rem 0; + } + + code, pre { + background-color: #f2f4f7; + border-radius: 5px; + } + + li { + line-height: 1.15; + margin-left: 1em; + margin-top: 0.3em; + list-style-image: none; + list-style-position: outside; + list-style-type: circle; + } + + img { + max-width: 95%; + margin: 2em 2.5%; + } +} diff --git a/components/ViewPort/index.module.scss b/components/ViewPort/index.module.scss new file mode 100644 index 0000000..c9b6ab0 --- /dev/null +++ b/components/ViewPort/index.module.scss @@ -0,0 +1,18 @@ +.viewport-sm, .viewport-md, .viewport-lg { + margin: 0 auto; +} + +.viewport-sm { + width: 50%; + width: calc(110px + 44vw); +} + +.viewport-md { + width: 60%; + width: calc(80px + 55vw); +} + +.viewport-lg { + width: 85%; + width: calc(25px + 85vw); +}
\ No newline at end of file diff --git a/components/ViewPort/index.tsx b/components/ViewPort/index.tsx new file mode 100644 index 0000000..665ee00 --- /dev/null +++ b/components/ViewPort/index.tsx @@ -0,0 +1,23 @@ +import React, { FC } from "react" +import styles from './index.module.scss'; +import clsx from 'clsx'; + +export type Props = { + size?: "sm" | "md" | "lg"; + className?: string; +}; + +const Viewport : FC<Props> = ({children, className, size}) => { + const _size : string = size || "md"; + const sizeClass : string = styles['viewport-' + _size]; + + return ( + <div + className={clsx(sizeClass, className)} + > + {children} + </div> + ) +}; + +export default Viewport;
\ No newline at end of file |