Components

---
import { getEntry } from 'astro:content';

// Fetch content from a collection
const aboutContent = await getEntry('about', 'about-content');

// Render markdown content
const { Content } = await aboutContent.render();
---

<section>
  <Content />
</section>

---
import { ThemeSwitcher, LanguageSwitcher } from '@/components/shared';
import { Navbar } from '@/components/navs';
---

<Navbar>
  <div class='flex gap-2'>
    <LanguageSwitcher />
    <ThemeSwitcher />
  </div>
</Navbar>

<button class='theme-toggle'>
  Toggle Theme
</button>

<script>
  function initThemeToggle() {
    const toggle = document.querySelector('.theme-toggle');
    toggle.addEventListener('click', () => {
      // Handle theme switching
    });
  }
  
  initThemeToggle();
  
  // Re-initialize after page transitions
  document.addEventListener('astro:after-swap', initThemeToggle);
</script>

<button class='p-2 rounded-md hover:bg-accent transition-colors'>
  Click me
</button>

---
// Import from the components directory
import { About, Projects, WorkExperience } from '@/components/home';
import Navbar from '@/components/navs/Navbar.astro';
---

<Navbar />

<main>
  <About />
  <WorkExperience />
  <Projects />
</main>

// src/components/home/index.ts
export { default as About } from './About.astro';
export { default as Blogs } from './Blogs.astro';
export { default as HeroImage } from './HeroImage.astro';
export { default as HeroText } from './HeroText.astro';
export { default as Projects } from './Projects.astro';
export { default as WorkExperience } from './WorkExperience.astro';

import { About, Projects } from '@/components/home';

---
// src/components/shared/NewComponent.astro
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<div class='my-component'>
  <h3>{title}</h3>
  {description && <p>{description}</p>}
</div>

<style>
  .my-component {
    /* Component-scoped styles */
  }
</style>