From 113a6db1715f2ab81f5728a8cfa89d5b2ec82526 Mon Sep 17 00:00:00 2001
From: David <david@deopea.dev>
Date: Sat, 4 Feb 2023 01:40:46 +0000
Subject: [PATCH] feat(apps/earth): adds animated blobs component

---
 .../src/components/blob/AnimatedBlobs.tsx     | 23 +++++++++++++++++++
 apps/earth/src/components/blob/index.ts       |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 apps/earth/src/components/blob/AnimatedBlobs.tsx

diff --git a/apps/earth/src/components/blob/AnimatedBlobs.tsx b/apps/earth/src/components/blob/AnimatedBlobs.tsx
new file mode 100644
index 0000000..a52cf19
--- /dev/null
+++ b/apps/earth/src/components/blob/AnimatedBlobs.tsx
@@ -0,0 +1,23 @@
+import { ClassSlot, component$, HTMLAttributes } from "@builder.io/qwik/core";
+import { Blob } from "./Blob";
+
+export interface AnimatedBlobs extends HTMLAttributes<HTMLDivElement> {
+  class?: ClassSlot;
+}
+
+export const AnimatedBlobs = component$<AnimatedBlobs>((props) => {
+  return (
+    <div {...props} class={["overflow-hidden", props.class]}>
+      <div class="relative h-full w-full">
+        <Blob
+          color="primary"
+          class="animate-blob absolute -z-10 w-[500px] opacity-50"
+        />
+        <Blob
+          color="secondary"
+          class="animate-blob2 absolute -z-10 w-[500px] opacity-50"
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/apps/earth/src/components/blob/index.ts b/apps/earth/src/components/blob/index.ts
index 4d4b5d1..ec47892 100644
--- a/apps/earth/src/components/blob/index.ts
+++ b/apps/earth/src/components/blob/index.ts
@@ -1 +1,2 @@
+export * from "./AnimatedBlobs";
 export * from "./Blob";