update slot tutorial content to snippets

Author: trueadm

apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/App.svelte renamed to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/App.svelte

@@ -1,5 +1,9 @@
+<script>
+	const { children } = $props();
+</script>
+
 <div class="card">
-	<slot />
+	{@render children()}
 </div>
 
 <style>

apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/Card.svelte renamed to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/Card.svelte

@@ -1,5 +1,5 @@
 ---
-title: Slots
+title: Snippets
 ---
 
 Just like elements can have children...
@@ -11,12 +11,15 @@ Just like elements can have children...
 </div>
 ```
 
-...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `<slot>` element. Put this inside `Card.svelte`:
+...so can components. Before a component can accept children, though, it needs to know where to put them. We do this with the `children` prop and the render tag `{@render children()}` – which is a bit like a function call. Put this inside `Card.svelte`:
 
 ```svelte
 /// file: Card.svelte
++++<script>+++
++++	const { children } = $props();+++
++++</script>+++
 <div class="card">
-	+++<slot></slot>+++
+	+++{@render children()}+++
 </div>
 ```
 

apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/paper.svg renamed to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/paper.svg

@@ -0,0 +1,34 @@
+<script>
+	import Card from './Card.svelte';
+</script>
+
+<main>
+	<Card>
+		<span>Patrick BATEMAN</span>
+		<span>Vice President</span>
+
+		{#snippet telephone()}
+			<span>212 555 6342</span>
+		{/snippet}
+
+		{#snippet company()}
+			<span>
+				Pierce &amp; Pierce
+				<small>Mergers and Aquisitions</small>
+			</span>
+		{/snippet}
+
+		{#snippet address()}
+			<span>358 Exchange Place, New York, N.Y. 10099 fax 212 555 6390 telex 10 4534</span>
+		{/snippet}
+	</Card>
+</main>
+
+<style>
+	main {
+		display: grid;
+		place-items: center;
+		height: 100%;
+		background: url(./wood.svg);
+	}
+</style>

apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-slots/+assets/app-a/src/lib/wood.svg renamed to apps/svelte.dev/content/tutorial/02-advanced-svelte/07-composition/01-snippets/+assets/app-a/src/lib/wood.svg

@@ -1,5 +1,9 @@
+<script>
+	const { children } = $props();
+</script>
+
 <div class="card">
-	<slot />
+	{@render children()}
 </div>
 
 <style>