diff --git a/src/components/SoMeIcon/SoMeIcon.scss b/src/components/Icon/Icon.scss similarity index 100% rename from src/components/SoMeIcon/SoMeIcon.scss rename to src/components/Icon/Icon.scss diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx new file mode 100644 index 0000000..6bceb93 --- /dev/null +++ b/src/components/Icon/Icon.tsx @@ -0,0 +1,74 @@ +import * as React from "react"; +import "./Icon.scss"; + +export enum IconType { + Facebook, + Instagram, + LinkedIn, + HamburgerMenu +} + +export interface IconProps { + name: IconType; + link: string; +} +export interface IconState {} + +const nameToIcon = (name: IconType): JSX.Element => { + if (name === IconType.Facebook) { + return ( + + Facebook icon + + + ); + } else if (name === IconType.Instagram) { + return ( + + Instagram icon + + + ); + } else if (name === IconType.LinkedIn) { + return ( + + LinkedIn icon + + + ); + } else if (name === IconType.HamburgerMenu) { + return ( + + Menu + + + ); + } +}; + +class Icon extends React.Component { + render() { + const { link, name } = this.props; + const elem = nameToIcon(name); + if (link) { + return ( + + {elem} + + ); + } else { + return elem; + } + } +} + +export default Icon; diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts new file mode 100644 index 0000000..86b8c41 --- /dev/null +++ b/src/components/Icon/index.ts @@ -0,0 +1,2 @@ +import Icon from "./Icon"; +export default Icon; diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx index cef3f7b..72ee975 100644 --- a/src/components/Navigation/Navigation.tsx +++ b/src/components/Navigation/Navigation.tsx @@ -2,8 +2,8 @@ import * as React from "react"; import "./Navigation.scss"; import NavbarDropdownLink from "../NavbarDropdownLink/NavbarDropdownLink"; import NavbarChildLink from "../NavbarChildLink/NavbarChildLink"; -import SoMeIcon from "../SoMeIcon/SoMeIcon"; -import { SoMe } from "../SoMeIcon/SoMeIcon"; +import Icon from "../Icon"; +import { IconType } from "../Icon/Icon"; export interface NavigationProps {} export interface NavigationState {} @@ -24,9 +24,9 @@ class Navigation extends React.Component {
- - - + + +
); diff --git a/src/components/SoMeIcon/SoMeIcon.tsx b/src/components/SoMeIcon/SoMeIcon.tsx deleted file mode 100644 index d00dca3..0000000 --- a/src/components/SoMeIcon/SoMeIcon.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from "react"; -import "./SoMeIcon.scss"; - -export enum SoMe { - Facebook, - Instagram, - LinkedIn -} - -export interface SoMeIconProps { - name: SoMe; - link: string; -} -export interface SoMeIconState {} - -class SoMeIcon extends React.Component { - render() { - const { link, name } = this.props; - if (name === SoMe.Facebook) { - return ( - - - Facebook icon - - - ); - } else if (name === SoMe.Instagram) { - return ( - - - Instagram icon - - - ); - } else if (name === SoMe.LinkedIn) { - return ( - - - LinkedIn icon - - - ); - } - } -} - -export default SoMeIcon; diff --git a/src/components/SoMeIcon/index.ts b/src/components/SoMeIcon/index.ts deleted file mode 100644 index a7e7670..0000000 --- a/src/components/SoMeIcon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import SoMeIcon from "./SoMeIcon"; -export default SoMeIcon;