React Slides

* Adds useState
* State
* useEffect
* Side Effects

1 files changed, 48 insertions, 0 deletions

diff --git a/src/lib/components/slide.svelte b/src/lib/components/slide.svelte
new file mode 100644
index 0000000..439d312
--- /dev/null
+++ b/src/lib/components/slide.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	type Bool = boolean | null
+	type String = string | null
+	type Transition =
+		| 'none'
+		| 'fade'
+		| 'slide'
+		| 'convex'
+		| 'concave'
+		| 'zoom'
+		| null
+
+	export let animate: Bool = null
+	export let animateEasing: String = null
+	export let animateUnmatched: Bool = null
+	export let animateId: String = null
+	export let animateRestart: Bool = null
+	export let background: String = null
+	export let gradient: String = null
+	export let image: String = null
+	export let video: String = null
+	export let iframe: String = null
+	export let interactive: Bool = null
+	export let transition: Transition = null
+
+	delete $$restProps.class
+</script>
+
+<section
+	on:in
+	on:out
+	data-auto-animate={animate}
+	data-auto-animate-easing={animateEasing}
+	data-auto-animate-unmatched={animateUnmatched}
+	data-auto-animate-id={animateId}
+	data-auto-animate-restart={animateRestart}
+	data-background-color={background}
+	data-background-gradient={gradient}
+	data-background-image={image}
+	data-background-video={video}
+	data-background-iframe={iframe}
+	data-background-interactive={interactive}
+	data-transition={transition}
+	class={$$props.class || ''}
+	{...$$restProps}
+>
+	<slot />
+</section>