From 848d2b02064e2454edb85cd016e7b6840ab77e36 Mon Sep 17 00:00:00 2001
From: Silas Bartha <silas@exvacuum.dev>
Date: Sun, 9 Feb 2025 14:18:24 -0500
Subject: react three fiber, drei, sass

---
 src/components/chatbubble.jsx | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/components/chatbubble.jsx

(limited to 'src/components/chatbubble.jsx')

diff --git a/src/components/chatbubble.jsx b/src/components/chatbubble.jsx
new file mode 100644
index 0000000..b3f4ad5
--- /dev/null
+++ b/src/components/chatbubble.jsx
@@ -0,0 +1,25 @@
+import { useRef, useState } from 'react'
+import * as everforest from '../_everforest.module.scss'
+import { useGLTF } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+
+export default function ChatBubble(props) {
+    const meshRef = useRef();
+    const [hovered, setHovered] = useState(false);
+    const [active, setActive] = useState(false);
+    useFrame((_, delta) => (meshRef.current.rotation.y += delta));
+    const {nodes} = useGLTF('../assets/message-bubble.glb');
+
+    return (
+        <mesh
+            {...props}
+            ref={meshRef}
+            scale={active ? 3 : 2}
+            onClick={(_) => setActive(!active)}
+            geometry={nodes.Curve.geometry}
+            onPointerOver={(_) => setHovered(true)}
+            onPointerOut={(_) => setHovered(false)}>
+            <meshStandardMaterial color={active ? everforest.blue : everforest.orange} />
+        </mesh>
+    )
+}
-- 
cgit v1.2.3