tabler/shared/components/cards/CardTabs.astro

---
// Tabs/content blocks are HTML strings (different order when `bottom`).
interface Props {
	/** tabs-count — present but unused */
	count?: number;
	id?: string;
	bottom?: boolean;
	borderless?: boolean;
}

const { id = 'top', bottom, borderless } = Astro.props;

const tabs = ['Activity', 'Profile', 'Settings'];

const tabsHtml = `
<!-- Cards navigation -->
<ul class="nav nav-tabs${bottom ? ' nav-tabs-bottom' : ''}">
${tabs
	.map(
		(tab, i) =>
			`   <li class="nav-item"><a href="#tab-${id}-${i + 1}" class="nav-link${i === 0 ? ' active' : ''}" data-bs-toggle="tab">${tab}</a></li>`,
	)
	.join('\n')}
</ul>`;

const tabsContentHtml = `
<div class="tab-content">
${tabs
	.map(
		(tab, i) => `   <!-- Content of card #${tab} -->
   <div id="tab-${id}-${i + 1}" class="card tab-pane${i === 0 ? ' active show' : ''}">
      <div class="card-body">
         <div class="card-title">${tab}</div>
         <p class="text-secondary">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
         </p>
      </div>
   </div>`,
	)
	.join('\n')}
</div>`;
---

<!-- Cards with tabs component -->
<div class={`card-tabs${borderless ? ' border-0' : ''}`}>
	{
		bottom ? (
			<Fragment>
				<Fragment set:html={tabsContentHtml} />
				<Fragment set:html={tabsHtml} />
			</Fragment>
		) : (
			<Fragment>
				<Fragment set:html={tabsHtml} />
				<Fragment set:html={tabsContentHtml} />
			</Fragment>
		)
	}
</div>