aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
Diffstat (limited to 'components')
-rw-r--r--components/Breadcrumbs/breadcrumbs.module.scss15
-rw-r--r--components/Breadcrumbs/index.tsx50
-rw-r--r--components/Markdown/index.tsx27
-rw-r--r--components/Markdown/markdown.module.scss96
-rw-r--r--components/ViewPort/index.module.scss18
-rw-r--r--components/ViewPort/index.tsx23
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