diff --git a/i18n/en/code.json b/i18n/en/code.json
index be8c72a8..443d01df 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -78,11 +78,11 @@
"message": "List of websites people are building with Docusaurus"
},
"showcase.header.button": {
- "message": "🙏 Please add your site"
+ "message": "Visit my Github 👨💻"
},
"showcase.filters.resultCount": {
- "message": "1 site|{sitesCount} sites",
- "description": "Pluralized label for the number of sites found on the showcase. Use as much plural forms (separated by \"|\") as your language support (see https://www.unicode.org/cldr/cldr-aux/charts/34/supplemental/language_plural_rules.html)"
+ "message": "{sitesCount} sites",
+ "description": "The number of sites displayed in the showcase"
},
"showcase.filters.title": {
"message": "Filters"
diff --git a/src/components/ContactItem/index.tsx b/src/components/ContactItem/index.tsx
new file mode 100644
index 00000000..338212a9
--- /dev/null
+++ b/src/components/ContactItem/index.tsx
@@ -0,0 +1,18 @@
+import Link from "@docusaurus/Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import React from "react";
+import styles from "./styles.module.css";
+
+export default function ContactItem({icon, contact, title} : {icon: any, contact: any, title: string}) {
+ const Svg = contact.icon;
+ return (
+
+
+ {contact.icon && }
+ {!contact.icon && }
+
+
+ );
+ }
\ No newline at end of file
diff --git a/src/components/ContactItem/styles.module.css b/src/components/ContactItem/styles.module.css
new file mode 100644
index 00000000..b997aebe
--- /dev/null
+++ b/src/components/ContactItem/styles.module.css
@@ -0,0 +1,14 @@
+.cardInfoButton {
+ padding: 0.4rem;
+ border-radius: 50%;
+ box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+ background-color: rgba(34, 34, 34, 0.1);
+ width: 3rem;
+ height: 3rem;
+ border: none;
+}
+
+.cardInfoButton:hover {
+ background-color: rgba(34, 34, 34, 0.5);
+ color: white;
+}
\ No newline at end of file
diff --git a/src/data/contacts.tsx b/src/data/contacts.tsx
index e986de9e..8b7eacf5 100644
--- a/src/data/contacts.tsx
+++ b/src/data/contacts.tsx
@@ -1,43 +1,66 @@
import { translate } from "@docusaurus/Translate";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faFacebook, faGithub, faLinkedin, faYoutube, faSkype } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'
-type Contact = {
+export type Contact = {
+ title: string;
link: string;
icon: React.ComponentType>;
+ faIcon: IconDefinition;
};
-export const CONTACTS = {
+export type ContactDict = {
+ [key: string]: Contact;
+};
+
+export const CONTACTS: ContactDict = {
Facebook: {
+ title: translate({ message: 'Facebook' }),
link: 'https://www.facebook.com/tiennhm.it/',
icon: require('@site/static/img/logo/facebook.svg').default,
+ faIcon: faFacebook,
} as Contact,
Github: {
+ title: translate({ message: 'Github' }),
link: 'https://github.com/TienNHM',
icon: require('@site/static/img/logo/github.svg').default,
+ faIcon: faGithub,
} as Contact,
Linkedin: {
+ title: translate({ message: 'Linkedin' }),
link: 'https://www.linkedin.com/in/tien-nhm/',
icon: require('@site/static/img/logo/linkedin.svg').default,
+ faIcon: faLinkedin,
} as Contact,
Email: {
+ title: translate({ message: 'Email' }),
link: 'mailto:tiennhm.it@gmail.com',
icon: require('@site/static/img/logo/email.svg').default,
+ faIcon: faEnvelope,
} as Contact,
Phone: {
+ title: translate({ message: 'Phone' }),
link: 'tel:+84388963345',
icon: require('@site/static/img/logo/phone.svg').default,
+ faIcon: faPhone,
} as Contact,
Skype: {
+ title: translate({ message: 'Skype' }),
link: 'https://join.skype.com/invite/ybhXQOv30y5F',
icon: require('@site/static/img/logo/skype.svg').default,
+ faIcon: faSkype,
} as Contact,
Youtube: {
+ title: translate({ message: 'Youtube' }),
link: 'https://www.youtube.com/TienNguyen09',
icon: require('@site/static/img/logo/youtube.svg').default,
+ faIcon: faYoutube,
} as Contact,
}
export const SHOWCASE = {
- TITLE: translate({message: 'TienNHM Site Showcase'}),
- DESCRIPTION: translate({message: 'List of sites and projects built by TienNHM'}),
+ TITLE: translate({ message: 'TienNHM Site Showcase' }),
+ DESCRIPTION: translate({ message: 'List of sites and projects built by TienNHM' }),
SUBMIT_URL: 'https://github.com/TienNHM?tab=repositories',
}
\ No newline at end of file
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 705ec970..54c3f217 100644
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -61,20 +61,6 @@
color: var(--ifm-color-primary-darker);
}
-.cardInfoButton {
- padding: 0.4rem;
- border-radius: 50%;
- box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
- background-color: rgba(34, 34, 34, 0.1);
- width: 3rem;
- height: 3rem;
- border: none;
-}
-.cardInfoButton:hover {
- background-color: rgba(34, 34, 34, 0.5);
- color: white;
-}
-
.cardInfoImage {
border-radius: 50%;
}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index aa8b9171..f01b9b11 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -9,26 +9,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook, faGithub, faLinkedin,faYoutube, faSkype } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope, faPhone } from '@fortawesome/free-solid-svg-icons'
import styles from './index.module.css';
-import { CONTACTS } from '@site/src/data/contacts';
+import { CONTACTS, Contact } from '@site/src/data/contacts';
+import ContactItem from '../components/ContactItem';
// import avatar from '@site/static/img/tiennhm_picrew.webp';
const avatar = 'https://github.com/TienNHM.png';
-function ContactItem({icon, contact, title}) {
- const Svg = contact.icon;
- return (
-
-
- {contact.icon && }
- {!contact.icon && }
-
-
- );
-}
-
function HomepageHeader() {
const {siteConfig} = useDocusaurusContext();
+ const contacts = CONTACTS;
return (