refacto and create Article component

src/lib/components/Article.svelte

+<script lang="ts">
+	import type { LegiArticle } from "@tricoteuses/legifrance"
+
+	interface Props {
+		articleJson: LegiArticle
+	}
+	let { articleJson }: Props = $props()
+	let articleNum: String | undefined = $derived(
+		articleJson ? articleJson.META?.META_SPEC?.META_ARTICLE?.NUM : undefined,
+	)
+	let articleTextcontent: String | undefined = $derived(
+		articleJson ? articleJson.BLOC_TEXTUEL?.CONTENU : undefined,
+	)
+</script>
+
+{#if articleJson}
+	{#if articleNum !== undefined}
+		<span class="font-bold">Article {articleNum}</span>
+	{/if}
+	{#if articleTextcontent !== undefined}
+		<span>{@html articleTextcontent}</span>
+	{/if}
+{/if}

src/routes/bill/[bill]/+page.svelte

 <script lang="ts">
 	import { page } from "$app/state"
+	import Article from "$lib/components/Article.svelte"
 	import Bill from "$lib/components/Bill.svelte"
 	import type { LegiArticle } from "@tricoteuses/legifrance"
 	import type { PageProps } from "./$types"
@@ -13,13 +14,6 @@
 	let articleJson: LegiArticle | undefined = $state(undefined)
 	let lawArticle = $derived(page.url.searchParams.get("lawArticle") || "")
 	let billHTML = $state(data.billHTML)
-	let articleNum: String | undefined = $derived(
-		articleJson ? articleJson.META?.META_SPEC?.META_ARTICLE?.NUM : undefined,
-	)
-	let articleTextcontent: String | undefined = $derived(
-		articleJson ? articleJson.BLOC_TEXTUEL?.CONTENU : undefined,
-	)
-	let isLoadingArticle = $state(false)
 
 	$effect(() => {
 		if (lawArticle) {
@@ -34,21 +28,13 @@
 <svelte:window bind:innerWidth={screenWidth} />
 <div class="fixed flex min-h-full w-full flex-row overflow-hidden">
 	<div class="h-screen w-1/2 overflow-y-auto"><Bill {billHTML}></Bill></div>
-	<div class="h-screen w-1/2 overflow-y-auto bg-amber-200">
+	<div class="h-screen w-1/2 overflow-y-auto bg-blue-100">
 		{#if articleJson !== undefined}
-			{#if articleJson}
-				{#if articleNum !== undefined}
-					<span class="font-bold">Article {articleNum}</span>
-				{/if}
-				{#if articleTextcontent !== undefined}
-					<span>{@html articleTextcontent}</span>
-				{/if}
-			{/if}
+			<Article {articleJson}></Article>
 		{:else}
-			<div class="h-screen w-1/2 overflow-y-auto bg-amber-200">
-				<p>Ici la loi</p>
-				<p>lorem ipsum</p>
-			</div>
+			<p>Cliquez sur une loi</p>
+			<p>dans le PLF</p>
+			<p>pour l'afficher</p>
 		{/if}
 	</div>
 </div>