brittle hinge
So I am trying to create reusable component for footer links I want to create 1 component that look like this ```<div class="flex flex-col gap-2">
<h6 class="text-primary">{title}</h6>
<div class="flex flex-col gap-y-2 text-sm text-primary-40">
<!-- About Us -->
<a
href={pathHref}
class="hover:text-primary
transition-colors w-max">
{path}
</a>
</div>
</div>
winged oasisBOT
Hi @brittle hinge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
You can create a reusable component in Astro by creating a new .astro file in your src/components/ directory. This component can accept properties (props) which you can use to customize the component's behavior each time it's used.
Here's how you can create a reusable component for your footer links:
Create a new file at the location src/components/FooterLinks.astro.
Copy the following code into your new file, FooterLinks.astro.
---
const { title, links } = Astro.props;
---
<div class="flex flex-col gap-2">
<h6 class="text-primary">{title}</h6>
<div class="flex flex-col gap-y-2 text-sm text-primary-40">
{links.map(link => (
<a href={link.href} class="hover:text-primary transition-colors w-max">
{link.text}
</a>
))}
</div>
</div>
In this component, title is the title of the footer section, and links is an array of objects, where each object has href and text properties for the link URL and link text, respectively.
You can then use this component in your pages like so:
---
import FooterLinks from '../components/FooterLinks.astro';
const links = [
{ href: '/about', text: 'About Us' },
{ href: '/contact', text: 'Contact Us' },
// add more links as needed
];
---
<FooterLinks title="About" :links={links} />
This will create a footer section with the title "About" and two links "About Us" and "Contact Us". You can reuse the FooterLinks component multiple times with different titles and links.
As for performance, hardcoding values can be faster, but it reduces the reusability of your components. By using props, you can reuse the same component with different data, which can make your code more maintainable and easier to read.
Sources:
brittle hinge
@winged oasis so i did this <div class="xs:grid md:grid-cols-4 xs:grid-cols-2 flex flex-col mx-auto gap-8 flex-wrap py-12"> <FooterLinks title="Quick Links" links={quickLinks} /> <FooterLinks title="Help" links={help} /> <FooterLinks title="Company" links={company} /> <FooterLinks title="Legal" links={legal} /> </div> but all this data will be fetched from cms currently is like that ```const quickLinks = [
{ href: '/about', text: 'About Us' },
{ href: '/contact', text: 'Contact Us' },
];
const help = [
{ href: '/about', text: 'About Us' },
{ href: '/contact', text: 'Contact Us' },
];
const company = [
{ href: '/about', text: 'About Us' },
{ href: '/contact', text: 'Contact Us' },
];
const legal = [
{ href: '/about', text: 'About Us' },
{ href: '/contact', text: 'Contact Us' },
];``` i want to create just one component and where it looks through values from cms
winged oasisBOT
Let me check the knowledge base for you. One moment! :books:
You can fetch data from your CMS and pass it to your FooterLinks component. The data fetching can be done in the frontmatter script of your Astro page. Here's an example of how you can do it:
---
import FooterLinks from '../components/FooterLinks.astro';
import fetch from 'node-fetch';
// Fetch data from your CMS
const fetchData = async () => {
const res = await fetch('YOUR_CMS_API_URL');
const data = await res.json();
return data;
}
const data = await fetchData();
// Assuming your CMS returns data in this format
const quickLinks = data.quickLinks;
const help = data.help;
const company = data.company;
const legal = data.legal;
---
<div class="xs:grid md:grid-cols-4 xs:grid-cols-2 flex flex-col mx-auto gap-8 flex-wrap py-12">
<FooterLinks title="Quick Links" :links={{quickLinks}} />
<FooterLinks title="Help" :links={{help}} />
<FooterLinks title="Company" :links={{company}} />
<FooterLinks title="Legal" :links={{legal}} />
</div>
In this example, replace 'YOUR_CMS_API_URL' with the actual API URL of your CMS. The fetchData function fetches data from your CMS and returns it. This data is then passed to your FooterLinks components.
Please note that the structure of the data returned by your CMS might be different. You might need to adjust the code to match the actual structure of your CMS data.
Sources:
brittle hinge
@winged oasis but titles will be also changed in cms. In this example i hardcoded them myself
winged oasisBOT
Let me check the knowledge base for you. One moment! :books:
If the titles are also dynamic and fetched from your CMS, you can adjust the data structure to include them. For example, your CMS could return data in the following format:
[
{
"title": "Quick Links",
"links": [
{ "href": "/about", "text": "About Us" },
{ "href": "/contact", "text": "Contact Us" }
]
},
{
"title": "Help",
"links": [
{ "href": "/faq", "text": "FAQ" },
{ "href": "/support", "text": "Support" }
]
},
// more sections...
]
Then, you can map over this data to create multiple FooterLinks components:
---
import FooterLinks from '../components/FooterLinks.astro';
import fetch from 'node-fetch';
// Fetch data from your CMS
const fetchData = async () => {
const res = await fetch('YOUR_CMS_API_URL');
const data = await res.json();
return data;
}
const footerSections = await fetchData();
---
<div class="xs:grid md:grid-cols-4 xs:grid-cols-2 flex flex-col mx-auto gap-8 flex-wrap py-12">
{footerSections.map(section => (
<FooterLinks title={section.title} :links={section.links} />
))}
</div>
In this example, footerSections is an array of objects, where each object represents a section in the footer. Each section has a title and an array of links. The map function is used to create a FooterLinks component for each section.
Please note that you need to replace 'YOUR_CMS_API_URL' with the actual API URL of your CMS, and adjust the code to match the actual structure of your CMS data.
Sources: