working on vcard destructuring

frontend/src/routes/contact/Address.svelte

@@ -0,0 +1,31 @@
+<script>
+    import { addr } from '../../vcard.js';
+
+    let { vcard } = $props();
+
+    let address = $derived(addr(vcard));
+</script>
+
+<div class="address">
+{#if address.box}
+<span class="post_box">{address.box}</span>
+{/if}
+{#if address.ext}
+<span class="extended">{address.ext}</span>
+{/if}
+{#if address.street}
+<span class="street">{address.street}</span>
+{/if}
+{#if address.code}
+<span class="code">{address.code}</span>
+{/if}
+{#if address.loc}
+<span class="locality">{address.loc}</span>
+{/if}
+{#if address.region}
+<span class="region">{address.region}</span>
+{/if}
+{#if address.country}
+<span class="country">{address.country}</span>
+{/if}
+</div>

frontend/src/routes/contact/Card.svelte

@@ -1,4 +1,5 @@
 <script>
+    import Address from './Address.svelte';
     import FN from './FN.svelte';
     import Name from './Name.svelte';
     import Org from './Org.svelte';
@@ -7,9 +8,10 @@
 </script>
 
 <div>
-    <Org vcard={contact.vcard} /><br/>
-    <FN vcard={contact.vcard} /><br/>
+    <FN vcard={contact.vcard} />
+    <Org vcard={contact.vcard} />
     <Name vcard={contact.vcard} />
+    <Address vcard={contact.vcard} />
     <hr/>
     <pre>{contact.vcard}</pre>
 </div>

frontend/src/routes/contact/Name.svelte

@@ -6,18 +6,20 @@
     let n = $derived(name(vcard));
 </script>
 
+<div class="name">
 {#if n.prefix}
-<span class="name prefix">{n.prefix}</span>
+<span class="prefix">{n.prefix}</span>
 {/if}
 {#if n.given}
-<span class="given name">{n.given}</span>
-{/if}
-{#if n.family}
-<span class="family name">{n.family}</span>
+<span class="given">{n.given}</span>
 {/if}
 {#if n.additional}
-<span class="additional name">{n.additional}</span>
+<span class="additional">{n.additional}</span>
+{/if}
+{#if n.family}
+<span class="family">{n.family}</span>
 {/if}
 {#if n.suffix}
-<span class="name suffix">{n.suffix}</span>
+<span class="suffix">{n.suffix}</span>
 {/if}
+</div>