diff options
| author | Jeff <jeffkleinaitis@gmail.com> | 2024-03-30 19:12:13 -0400 |
|---|---|---|
| committer | Jeff <jeffkleinaitis@gmail.com> | 2024-03-30 19:12:13 -0400 |
| commit | 4af1a190e4ee2ac1a168af51cd07f3d337ff7ff5 (patch) | |
| tree | 251c0af140079f36e4f1d451ddf842cdc5adf2be | |
| parent | 07c5fab8d6c903d319df3f63884f72ea17b57656 (diff) | |
refactor: Dynamically generate links based on array items
| -rw-r--r-- | components/footer.js | 18 | ||||
| -rw-r--r-- | pages/about.js | 0 |
2 files changed, 11 insertions, 7 deletions
diff --git a/components/footer.js b/components/footer.js index 7c2c036..02bbc00 100644 --- a/components/footer.js +++ b/components/footer.js @@ -4,12 +4,16 @@ import React from "react"; import Container from "./container"; export default function Footer() { - const navigation = [, + const companyItems = [ "About", "Contact Us", - "Careers", + "Careers" + ]; + const resourcesItems = [ + "Help Center", + "Terms of Service", + "Privacy Policy" ]; - const myAccount = ["Help Center", "Terms of Service", "Privacy Policy"]; return ( <div className="relative"> <Container> @@ -42,8 +46,8 @@ export default function Footer() { <div className="w-full px-4 py-2 font-bold uppercase text-indigo-500 dark:text-gray-300 hover:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> Company </div> - {navigation.map((item, index) => ( - <Link key={index} href="/" className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + {companyItems.map((item, index) => ( + <Link key={index} href={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> {item} </Link> ))} @@ -54,8 +58,8 @@ export default function Footer() { <div className="w-full px-4 py-2 font-bold uppercase text-indigo-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> Resources </div> - {myAccount.map((item, index) => ( - <Link key={index} href="/" className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> + {resourcesItems.map((item, index) => ( + <Link key={index} href={`/${item.toLowerCase().replace(/\s+/g, '-')}`} className="w-full px-4 py-0.5 text-gray-500 rounded-md dark:text-gray-300 hover:text-indigo-500 focus:text-indigo-500 focus:bg-indigo-100 focus:outline-none dark:focus:bg-trueGray-700"> {item} </Link> ))} diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/pages/about.js |