Initial commit

4 files changed, 106 insertions, 0 deletions

diff --git a/components/Box/Box.module.css b/components/Box/Box.module.css
new file mode 100644
index 0000000..f6234ff
--- /dev/null
+++ b/components/Box/Box.module.css
@@ -0,0 +1,22 @@
+.box {
+    padding: 1rem 1rem;
+    width: 100%;
+    color: #333;
+    background-color: #eee;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.box:hover,
+.box:active,
+.box:focus {
+    font-weight: bold;
+    background-color: #ddd;
+}
+
+.arrow {
+    font-size: 24px;
+    line-height: 20px;
+}
\ No newline at end of file
diff --git a/components/Box/Box.tsx b/components/Box/Box.tsx
new file mode 100644
index 0000000..8e463e5
--- /dev/null
+++ b/components/Box/Box.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+import styles from "./Box.module.css";
+
+export interface Props {
+    href: string;
+    text: string;
+}
+
+const Box = ({ text, href }: Props): JSX.Element => (
+    <Link href={href}>
+        <a className={styles.box}>
+            <span>{text}</span>
+            <span className={styles.arrow}>→</span>
+        </a>
+    </Link>
+);
+
+export default Box;
diff --git a/components/Social/Social.module.css b/components/Social/Social.module.css
new file mode 100644
index 0000000..ad0728a
--- /dev/null
+++ b/components/Social/Social.module.css
@@ -0,0 +1,21 @@
+.social {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: center;
+    margin: 0 1rem;
+    width: 45px;
+    height: 45px;
+}
+
+.social img {
+    width: 40px;
+    height: 40px;
+    transition: transform 0.1s;
+}
+
+.social:hover img,
+.social:active img,
+.social:focus img {
+    transform: scale(1.1);
+}
diff --git a/components/Social/Social.tsx b/components/Social/Social.tsx
new file mode 100644
index 0000000..f663f6e
--- /dev/null
+++ b/components/Social/Social.tsx
@@ -0,0 +1,45 @@
+import styles from "./Social.module.css";
+
+export type SocialType = "telegram" | "linkedin" | "github";
+
+interface Props {
+    type: SocialType;
+}
+
+interface TypeItem {
+    alt: string;
+    src: string;
+    href: string;
+}
+
+const typeMap: Record<SocialType, TypeItem> = {
+    telegram: {
+        alt: "Telegram",
+        src: "/social/telegram.svg",
+        href: "https://t.me/kal_jan",
+    },
+    linkedin: {
+        alt: "LinkedIn",
+        src: "/social/linkedin.svg",
+        href: "https://www.linkedin.com/in/jantuomi/",
+    },
+    github: {
+        alt: "GitHub",
+        src: "/social/github.svg",
+        href: "http://github.com/jantuomi"
+    },
+};
+
+const Social = ({ type }: Props): JSX.Element => {
+    const typeItem = typeMap[type];
+
+    return (
+        <a className={styles.social} target="blank" rel="noopener noreferrer" href={typeItem.href}>
+            <img src={typeItem.src} alt={typeItem.alt} />
+        </a>
+    );
+};
+
+
+
+export default Social;