BaseFlag

import { BaseFlag } from '@invopop/popui'

<script>
  import { BaseFlag } from '@invopop/popui'
</script>

<BaseFlag country="US" />
<BaseFlag country="GB" />
<BaseFlag country="ES" />

<BaseFlag country="GLOBAL" />

<script>
  import { DropdownSelect, BaseFlag } from '@invopop/popui'
  
  const countries = [
    { label: 'United States', value: 'US', country: 'US' },
    { label: 'United Kingdom', value: 'GB', country: 'GB' },
    { label: 'Spain', value: 'ES', country: 'ES' },
    { label: 'Global', value: 'global', country: 'GLOBAL' }
  ]
</script>

<DropdownSelect 
  options={countries}
  flagPosition="before"
  onSelect={(value) => console.log(value)}
/>

<script>
  const fields = [
    {
      headerLabel: 'Country',
      slug: 'country',
      isCountry: true
    },
    // ... other fields
  ]
  
  const data = [
    { country: 'US', name: 'United States' },
    { country: 'GB', name: 'United Kingdom' }
  ]
</script>

<script>
  import { BaseFlag } from '@invopop/popui'
</script>

<div class="flex items-center space-x-2">
  <BaseFlag country="FR" />
  <span>France</span>
</div>

<script>
  import { Breadcrumbs } from '@invopop/popui'
  
  const breadcrumbs = [
    { label: 'Companies', url: '/companies' },
    { label: 'Acme Inc', url: '/companies/acme', country: 'US' },
    { label: 'Settings' }
  ]
</script>

<Breadcrumbs {breadcrumbs} />