Init

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