convert Icon component from enum input to string type
This commit is contained in:
@@ -1,16 +1,15 @@
|
||||
enum IconSet {
|
||||
Menu,
|
||||
Users,
|
||||
Link2,
|
||||
ExternalLink,
|
||||
Twitter,
|
||||
GitHub,
|
||||
YouTube,
|
||||
Discord,
|
||||
}
|
||||
type iconselection =
|
||||
| "Menu"
|
||||
| "Users"
|
||||
| "Link2"
|
||||
| "ExternalLink"
|
||||
| "Twitter"
|
||||
| "GitHub"
|
||||
| "YouTube"
|
||||
| "Discord";
|
||||
|
||||
type iconprops = {
|
||||
icon: IconSet;
|
||||
icon: iconselection;
|
||||
width?: number;
|
||||
height?: number;
|
||||
} & React.SVGProps<SVGSVGElement>;
|
||||
@@ -21,7 +20,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
// - add {width || ogWidth}
|
||||
// - add {height || ogHeight}
|
||||
// - add {...props}
|
||||
case IconSet.Menu:
|
||||
case "Menu":
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -41,7 +40,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.Users:
|
||||
case "Users":
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -62,7 +61,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.Link2:
|
||||
case "Link2":
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -81,7 +80,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<line x1="8" y1="12" x2="16" y2="12" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.ExternalLink:
|
||||
case "ExternalLink":
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
@@ -101,7 +100,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.Twitter:
|
||||
case "Twitter":
|
||||
// twitter icon courtesy of simpleicons.org
|
||||
return (
|
||||
<svg
|
||||
@@ -117,7 +116,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.GitHub:
|
||||
case "GitHub":
|
||||
// github icon courtesy of simpleicons.org
|
||||
return (
|
||||
<svg
|
||||
@@ -133,7 +132,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.YouTube:
|
||||
case "YouTube":
|
||||
// youtube icon courtesy of simpleicons.org
|
||||
return (
|
||||
<svg
|
||||
@@ -149,7 +148,7 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
);
|
||||
case IconSet.Discord:
|
||||
case "Discord":
|
||||
// discord icon courtesy of simpleicons.org
|
||||
return (
|
||||
<svg
|
||||
@@ -168,4 +167,4 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
|
||||
}
|
||||
};
|
||||
|
||||
export { Icon, IconSet };
|
||||
export { Icon };
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import styles from "./Navigation.module.scss";
|
||||
import { GractwoLogo } from "../Logo";
|
||||
import { Icon, IconSet } from "../Icon";
|
||||
import { Icon } from "../Icon";
|
||||
|
||||
import navigation from "../../data/navigation.json";
|
||||
import Link from "next/link";
|
||||
@@ -26,7 +26,7 @@ const Navigation = () => {
|
||||
);
|
||||
})}
|
||||
<div tabIndex={0} className={`${styles.dropdown} ${styles.mobile}`}>
|
||||
<Icon icon={IconSet.Menu} />
|
||||
<Icon icon="Menu" />
|
||||
{/* TUTAJ WSTAWIĆ IKONKĘ PÓŹNIEJ */}
|
||||
<div className={styles.innerdropdown}>
|
||||
{navigation.map((navlink) => {
|
||||
|
||||
Reference in New Issue
Block a user