From 3b5e036dc43094f7bee688eab3ec30f77adea04a Mon Sep 17 00:00:00 2001
From: Ryan Gossiaux <ryan.gossiaux@gmail.com>
Date: Sat, 18 Dec 2021 18:36:58 -0800
Subject: [PATCH] Add more examples

---
 .../component-examples/nested/_Box.svelte     | 20 ++++++++++
 .../component-examples/nested/hidden.svelte   | 37 +++++++++++++++++++
 .../component-examples/nested/unmount.svelte  | 37 +++++++++++++++++++
 .../component-examples/peek-a-boo.svelte      | 33 +++++++++++++++++
 4 files changed, 127 insertions(+)
 create mode 100644 src/routes/transitions/component-examples/nested/_Box.svelte
 create mode 100644 src/routes/transitions/component-examples/nested/hidden.svelte
 create mode 100644 src/routes/transitions/component-examples/nested/unmount.svelte
 create mode 100644 src/routes/transitions/component-examples/peek-a-boo.svelte

diff --git a/src/routes/transitions/component-examples/nested/_Box.svelte b/src/routes/transitions/component-examples/nested/_Box.svelte
new file mode 100644
index 0000000..1fb9b8b
--- /dev/null
+++ b/src/routes/transitions/component-examples/nested/_Box.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { TransitionChild } from "$lib";
+</script>
+
+<TransitionChild
+  unmount={false}
+  enter="transition translate duration-300"
+  enterFrom="transform -translate-x-full"
+  enterTo="transform translate-x-0"
+  leave="transition translate duration-300"
+  leaveFrom="transform translate-x-0"
+  leaveTo="transform translate-x-full"
+>
+  <div
+    class="p-4 space-y-2 text-sm font-semibold tracking-wide text-gray-700 uppercase bg-white rounded-md shadow"
+  >
+    <span>This is a box</span>
+    <slot />
+  </div>
+</TransitionChild>
diff --git a/src/routes/transitions/component-examples/nested/hidden.svelte b/src/routes/transitions/component-examples/nested/hidden.svelte
new file mode 100644
index 0000000..c312b7d
--- /dev/null
+++ b/src/routes/transitions/component-examples/nested/hidden.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Transition } from "$lib";
+  import Box from "./_Box.svelte";
+
+  let isOpen = false;
+</script>
+
+<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+  <div class="space-y-2 w-96">
+    <span class="inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+        class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
+      >
+        {isOpen ? "Hide" : "Show"}
+      </button>
+    </span>
+
+    <Transition show={isOpen} unmount={false}>
+      <Box>
+        <Box>
+          <Box>
+            <Box />
+          </Box>
+          <Box>
+            <Box>
+              <Box>
+                <Box />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Transition>
+  </div>
+</div>
diff --git a/src/routes/transitions/component-examples/nested/unmount.svelte b/src/routes/transitions/component-examples/nested/unmount.svelte
new file mode 100644
index 0000000..e0adcbf
--- /dev/null
+++ b/src/routes/transitions/component-examples/nested/unmount.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Transition } from "$lib";
+  import Box from "./_Box.svelte";
+
+  let isOpen = false;
+</script>
+
+<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+  <div class="space-y-2 w-96">
+    <span class="inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+        class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
+      >
+        {isOpen ? "Hide" : "Show"}
+      </button>
+    </span>
+
+    <Transition show={isOpen} unmount={true}>
+      <Box>
+        <Box>
+          <Box>
+            <Box />
+          </Box>
+          <Box>
+            <Box>
+              <Box>
+                <Box />
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    </Transition>
+  </div>
+</div>
diff --git a/src/routes/transitions/component-examples/peek-a-boo.svelte b/src/routes/transitions/component-examples/peek-a-boo.svelte
new file mode 100644
index 0000000..e9e5258
--- /dev/null
+++ b/src/routes/transitions/component-examples/peek-a-boo.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Transition } from "$lib";
+
+  let isOpen = false;
+</script>
+
+<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
+  <div class="space-y-2 w-96">
+    <span class="inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+        class="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
+      >
+        {isOpen ? "Hide" : "Show"}
+      </button>
+    </span>
+
+    <Transition
+      show={isOpen}
+      unmount={false}
+      enter="transition ease-out duration-300"
+      enterFrom="transform opacity-0"
+      enterTo="transform opacity-100"
+      leave="transition ease-in duration-300"
+      leaveFrom="transform opacity-100"
+      leaveTo="transform opacity-0"
+      class="p-4 bg-white rounded-md shadow"
+    >
+      Contents to show and hide
+    </Transition>
+  </div>
+</div>