NordicRepresentation

The NordicRepresentation component displays a clean, interactive navigation section that links to individual Nordic country representation pages. It serves as a regional directory for Filipino nurses to find their local FiNAN representation.

Component Type

Presentation Component - Static display component with interactive navigation links.

Usage

Used on the homepage and representation pages to provide easy navigation to country-specific representation pages.

Used on:

• src/pages/index.astro - Homepage regional navigation

Props

This component does not accept any props. All content is hardcoded within the component.

Code Example

Basic Usage

---
import NordicRepresentation from '@/components/NordicRepresentation.astro';
---

<NordicRepresentation />

That’s it! No configuration needed.

Component Structure

The component consists of two main sections:

1. Header Section

   • Heading: “Nordic Representation”
   • Description: Explains the purpose and invites users to select their country

2. Country Links Grid

   • Displays interactive buttons for each Nordic country/region
   • Each button includes a flag icon and country name
   • Links to country-specific representation pages

Countries Included

The component displays links to the following active representation pages:

Country	URL	Flag Icon
Kingdom of Denmark	/representation/kingdom-denmark	/assets/flags/flag_denmark.svg
Finland	/representation/finland	/assets/flags/flag_finland.svg
Iceland	/representation/iceland	/assets/flags/flag_iceland.svg
Norway	/representation/norway	/assets/flags/flag_norway.svg
Sweden	/representation/sweden	/assets/flags/flag_sweden.svg

Commented Out Countries

The component includes commented-out code for future expansion:

• Faroe Islands - /representation/faroe-islands
• Greenland - /representation/greenland

Tip

To activate Faroe Islands or Greenland representation, uncomment the respective code blocks in NordicRepresentation.astro and create the corresponding representation pages.

Visual Design

Button Styling

Each country button features:

• Flag icon (24px × 24px) on the left
• Country name in medium weight font
• Rounded-full border (pill shape)
• Gray border that changes to blue on hover
• Shadow effect on hover for depth
• Smooth transition (300ms duration)

Layout

• Desktop: Horizontal flex layout with wrapping, centered alignment
• Mobile: Responsive wrapping maintains readability
• Gap: Consistent 1rem spacing between buttons

Styling Details

/* Button base styles */
.country-button {
  min-width: 140px;           /* Prevents buttons from being too narrow */
  gap: 0.75rem;               /* Space between flag and text */
  border: 2px solid #d1d5db;  /* Gray-300 border */
  border-radius: 9999px;      /* Fully rounded (pill shape) */
  padding: 0.75rem 1.5rem;    /* Comfortable padding */
}

/* Hover state */
.country-button:hover {
  border-color: #1e3a8a;      /* Blue-900 border */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);  /* Larger shadow */
}

Responsive Behavior

The component is fully responsive:

• Mobile (< 768px): Buttons wrap to multiple rows, full-width spacing
• Tablet (768px - 1024px): Buttons start to align horizontally with wrapping
• Desktop (> 1024px): All buttons displayed horizontally (if space allows)

Maximum width: Constrained to max-w-screen-xl (1280px)

Accessibility

• Semantic HTML: Uses <a> tags for navigation links
• Descriptive alt text: All flag images have meaningful alt attributes
• Keyboard navigation: All links are keyboard-accessible
• Focus states: Default browser focus indicators (can be enhanced)
• Color contrast: Text meets WCAG AA standards

Asset Dependencies

Flag Icons Required

The component requires SVG flag files in public/assets/flags/:

• flag_denmark.svg
• flag_finland.svg
• flag_iceland.svg
• flag_norway.svg
• flag_sweden.svg
• flag_faroe_islands.svg (for future activation)
• flag_greenland.svg (for future activation)

Caution

Ensure all flag SVG files exist in public/assets/flags/ before deploying. Missing files will result in broken images.

Adding a New Country

To add a new Nordic country/region to the component:

1. Add the flag icon to public/assets/flags/flag_[country].svg
2. Create the representation page at src/pages/representation/[country].astro
3. Add the link to NordicRepresentation.astro:

<!-- Example: Adding Faroe Islands -->
<a
  href="/representation/faroe-islands"
  class="flex min-w-[140px] items-center gap-3 rounded-full border-2 border-gray-300 px-6 py-3 transition-all duration-300 hover:border-blue-900 hover:shadow-lg"
>
  <img
    src="/assets/flags/flag_faroe_islands.svg"
    alt="Faroe Islands flag"
    class="h-6 w-6"
  />
  <span class="font-medium text-gray-900">Faroe Islands</span>
</a>

Common Use Cases

Homepage Regional Navigation

---
import Layout from '@/layouts/Layout.astro';
import NordicRepresentation from '@/components/NordicRepresentation.astro';
---

<Layout title="FiNAN - Filipino Nurses Association Nordic Region">
  <HeroHeader />
  <NordicRepresentation />
  <About />
</Layout>

Standalone Representation Section

---
import NordicRepresentation from '@/components/NordicRepresentation.astro';
---

<main>
  <NordicRepresentation />
</main>

Related Components

• RepresentationContactSection - Displays detailed contact information for each region
• Committee - Shows committee members for specific countries

Implementation Notes

Why No Props?

This component doesn’t accept props because:

1. Country list is stable - Nordic countries don’t change frequently
2. Consistent branding - Maintains design consistency across the site
3. Simplicity - Easier to use without configuration
4. Performance - No runtime processing needed

If you need dynamic country links, consider creating a new component or refactoring this one to accept a countries array prop.

Content Management

To update the component content:

1. Country names: Edit the <span> text in each link
2. URLs: Modify the href attribute
3. Description text: Update the intro paragraph text
4. Header: Change the <h2> and <p> content

Note

Since this component has no props, all updates must be made directly in the component file at src/components/NordicRepresentation.astro.

Design Considerations

Flag Icon Sizing

Flags are displayed at 24px × 24px (h-6 w-6). This size ensures:

• Clear visibility at all screen sizes
• Consistent alignment with text
• Fast loading (small SVG files)

Button Width

The min-w-[140px] ensures buttons maintain a minimum width, preventing awkwardly narrow buttons for short country names like “Sweden” or “Iceland”.

Hover Effects

The hover state provides visual feedback through:

1. Border color change (gray → blue) - Indicates interactivity
2. Shadow elevation - Creates depth and “lift” effect
3. Smooth transition - Polished, professional feel

Source Code

File location: src/components/NordicRepresentation.astro

Dependencies:

• SVG flag files in public/assets/flags/
• Representation pages in src/pages/representation/

Troubleshooting

Missing flag icons

Issue: Broken image icons appear instead of flags

Solutions:

1. Check that all SVG files exist in public/assets/flags/
2. Verify file names match exactly (case-sensitive)
3. Ensure SVG files are valid (open in browser)

Broken links

Issue: Clicking country links results in 404 errors

Solutions:

1. Verify representation pages exist in src/pages/representation/
2. Check URL paths match exactly (including hyphens in “kingdom-denmark”)
3. Run pnpm build to catch broken links

Layout issues on mobile

Issue: Buttons overlap or don’t wrap properly

Solutions:

1. Check that Tailwind CSS is properly loaded
2. Verify responsive classes are not overridden by custom CSS
3. Test on actual mobile devices (not just browser dev tools)

Commented countries not showing

Issue: Faroe Islands or Greenland links not visible

Expected behavior: These countries are intentionally commented out. To activate them, uncomment the code blocks in the component file and create the corresponding representation pages.