Skip to content

Commit 251289d

Browse files
henrynoowahhenrynoowah
committed
chore: chatBox update & remove incomplete tabs on main page navigation
1 parent 2092bc8 commit 251289d

File tree

4 files changed

+103
-70
lines changed

4 files changed

+103
-70
lines changed

‎src/app/(routes)/page.tsx

+54-66
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
'use client'
22

3+
import ChatBox from '@/components/common/chats/ChatBox'
34
import { NavItem } from '@/components/main/NavItem'
45
import { NavModal } from '@/components/main/NavModal'
5-
import { CubeIcon, DocumentIcon, FaceSmileIcon } from '@heroicons/react/24/solid'
6-
import Spline from '@splinetool/react-spline'
6+
import { ChatBubbleLeftEllipsisIcon, DocumentIcon } from '@heroicons/react/24/solid'
77
import { Application, SPEObject } from '@splinetool/runtime'
88
import { motion } from 'framer-motion'
9+
import dynamic from 'next/dynamic'
910
import { Inter } from 'next/font/google'
10-
import { useEffect, useRef, useState } from 'react'
11+
import { useRef, useState } from 'react'
1112

13+
const Spline = dynamic(() => import('@splinetool/react-spline'))
1214
const inter = Inter({ variable: '--font-inter', subsets: ['latin'] })
1315

1416
const navList = [
@@ -18,18 +20,18 @@ const navList = [
1820
icon: <DocumentIcon className="text-light" />,
1921
desc: 'Check out my dev blog posts'
2022
},
21-
{
22-
name: 'works',
23-
href: '/works',
24-
icon: <CubeIcon className="text-light" />,
25-
desc: 'Check out my works'
26-
},
27-
{
28-
name: 'about',
29-
href: '/about',
30-
icon: <FaceSmileIcon className="text-light" />,
31-
desc: 'Get to know more about me'
32-
},
23+
// {
24+
// name: 'works',
25+
// href: '/works',
26+
// icon: <CubeIcon className="text-light" />,
27+
// desc: 'Check out my works'
28+
// },
29+
// {
30+
// name: 'about',
31+
// href: '/about',
32+
// icon: <FaceSmileIcon className="text-light" />,
33+
// desc: 'Get to know more about me'
34+
// },
3335
{
3436
name: 'github',
3537
href: 'https://www.github.com/henrynoowah',
@@ -42,36 +44,24 @@ const navList = [
4244
}
4345
]
4446

47+
const chat = {
48+
name: 'chat',
49+
href: 'https://www.github.com/henrynoowah',
50+
icon: <ChatBubbleLeftEllipsisIcon className="text-light" />,
51+
desc: 'Chat bot!'
52+
}
53+
4554
const SPLINE_SCENE = 'https://prod.spline.design/W83XdmrQbaQnPMlJ/scene.splinecode'
4655

4756
const Home = () => {
4857
const [selected, setSelected] = useState<string | null>(null)
49-
50-
const sidebar = {
51-
open: (height = 1000) => ({
52-
clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,
53-
transition: {
54-
type: 'spring',
55-
stiffness: 20,
56-
restDelta: 2
57-
}
58-
}),
59-
closed: {
60-
clipPath: `circle(30px at 40px 40px)`,
61-
transition: {
62-
delay: 0.5,
63-
type: 'spring',
64-
stiffness: 400,
65-
damping: 40
66-
}
67-
}
68-
}
58+
const [chatToggle, setChatToggle] = useState<boolean>(false)
6959

7060
const handleNavSelect = (name: string) => {
7161
if (selected === name) {
7262
setSelected(null)
7363
} else {
74-
const ref = document.getElementById(name)
64+
// const ref = document.getElementById(name)
7565
setSelected(name)
7666
}
7767
}
@@ -82,19 +72,10 @@ const Home = () => {
8272
const onLoad = (spline: Application) => {
8373
splineRef.current = spline
8474
const botObj = spline.findObjectByName('Character')
75+
botObj?.emitEvent('mouseDown')
8576
botRef.current = botObj
8677
}
8778

88-
const [toggle, setToggle] = useState<boolean>(false)
89-
90-
function triggerAnimation() {
91-
splineRef.current?.emitEvent('mouseHover', 'Camera')
92-
}
93-
94-
useEffect(() => {
95-
console.log(toggle)
96-
}, [toggle])
97-
9879
return (
9980
<main className={inter.variable}>
10081
<div className="w-full h-[100vh] flex justify-center relative overflow-hidden">
@@ -109,29 +90,13 @@ const Home = () => {
10990
scene={SPLINE_SCENE}
11091
onLoad={onLoad}
11192
onMouseDown={(e) => {
112-
console.log(e.target)
113-
console.log(toggle)
114-
setToggle(!toggle)
93+
botRef.current?.emitEvent('mouseDown')
94+
setChatToggle(!chatToggle)
11595
}}
11696
/>
11797
</div>
11898

119-
{/* {!!toggle && (
120-
<div
121-
className="absolute w-full h-full
122-
flex justify-end items-center z-50 pointer-events-none] pt-[10%] pb-[22%] px-[16px] md:px-[10%] pointer-events-none"
123-
>
124-
<div
125-
className="w-full h-full max-w-full md:max-w-[400px] bg-light end-0 rounded p-4 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-40"
126-
onClick={() => {}}
127-
>
128-
Test
129-
</div>
130-
</div>
131-
)} */}
132-
{/* <button className="z-40 pointer-events-auto" type="button" onClick={triggerAnimation}>
133-
Trigger Spline Animation
134-
</button> */}
99+
<ChatBox isOpen={chatToggle} />
135100

136101
{navList.map((nav, i) => (
137102
<NavModal selected={selected === nav.name} {...nav} key={`nav-modal-${nav}-${i}`} />
@@ -148,10 +113,33 @@ const Home = () => {
148113
animate={{ y: 0, opacity: 100 }}
149114
transition={{ ease: 'easeInOut', duration: 0.25 * i }}
150115
>
151-
<NavItem {...nav} selected={selected === nav.name} onClick={() => handleNavSelect(nav.name)} />
116+
<NavItem
117+
{...nav}
118+
selected={selected === nav.name}
119+
onClick={() => {
120+
setChatToggle(false)
121+
handleNavSelect(nav.name)
122+
}}
123+
/>
152124
</motion.div>
153125
</div>
154126
))}
127+
<div id={chat.name} className="pointer-events-auto">
128+
<motion.div
129+
initial={{ y: 40, opacity: 0 }}
130+
animate={{ y: 0, opacity: 100 }}
131+
transition={{ ease: 'easeInOut', duration: 0.25 * navList.length }}
132+
>
133+
<NavItem
134+
{...chat}
135+
onClick={() => {
136+
setSelected(null)
137+
botRef.current?.emitEventReverse('mouseDown')
138+
setChatToggle(!chatToggle)
139+
}}
140+
/>
141+
</motion.div>
142+
</div>
155143
</nav>
156144
</div>
157145
</div>

‎src/components/common/chats/ChatBox.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { motion } from 'framer-motion'
2+
3+
interface Params {
4+
isOpen: boolean
5+
onClose?: (close: boolean) => void
6+
}
7+
8+
const ChatBox = ({ isOpen, onClose }: Params) => {
9+
return (
10+
<motion.div
11+
className={`absolute w-full h-full md:max-h-[80vh] bottom-0 end-0 px-[24px] py-[100px] md:pb-[160px]
12+
flex justify-end items-center z-50 pointer-events-none`}
13+
initial={{ opacity: 0 }}
14+
animate={!!isOpen ? 'open' : 'closed'}
15+
variants={{
16+
open: () => ({
17+
y: 0,
18+
opacity: 100,
19+
transition: { ease: 'easeInOut', duration: 0.5 }
20+
}),
21+
closed: () => ({
22+
y: 40,
23+
opacity: 0,
24+
transition: { ease: 'backInOut', duration: 0.2 }
25+
})
26+
}}
27+
>
28+
<div
29+
style={{ pointerEvents: isOpen ? 'auto' : 'none' }}
30+
className={`w-full h-full max-w-full md:max-w-[400px] bg-primary/20 end-0 rounded-[24px] p-4 shadow-xl backdrop-filter backdrop-blur-lg`}
31+
onClick={() => {}}
32+
>
33+
<div className="w-full h-full flex justify-center items-center text-light/60 font-semibold">
34+
Bot Chat Coming Soon...!
35+
</div>
36+
</div>
37+
{/* </div> */}
38+
</motion.div>
39+
)
40+
}
41+
42+
export default ChatBox

‎src/components/main/NavItem.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ export const NavItem = ({ name, href, icon, onClick, selected }: Params) => {
5252
>
5353
<span
5454
className={[
55-
`bg-primary`,
55+
// `bg-primary`,
56+
// 'backdrop-filter backdrop-blur-xl bg-primary/40',
5657
`absolute w-full h-full transition duration-300 rounded-full `,
5758
selected ? ' border border-dotted' : '',
5859
`opacity-100 group-hover:opacity-100`

‎src/components/main/NavModal.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const NavModal = ({ onClick, selected, ...nav }: Params) => {
4242
return isReady && document.getElementById(nav.name) ? (
4343
<motion.div
4444
key={`modal-${nav.name}-${windowWidth}`}
45-
initial={false}
45+
initial={'closed'}
4646
animate={!!selected ? 'open' : 'closed'}
4747
variants={{
4848
open: (height = 1000) => ({
@@ -69,7 +69,7 @@ export const NavModal = ({ onClick, selected, ...nav }: Params) => {
6969
}
7070
})
7171
}}
72-
className="fixed w-full h-full flex flex-col gap-2 justify-center items-center backdrop-filter backdrop-blur-xl bg-primary z-40"
72+
className="fixed w-full h-full flex flex-col gap-2 justify-center items-center backdrop-filter backdrop-blur-xl bg-primary/40 z-40"
7373
>
7474
<motion.div variants={variants} className="flex justify-center items-center gap-2">
7575
<div
@@ -92,5 +92,7 @@ export const NavModal = ({ onClick, selected, ...nav }: Params) => {
9292
<p className="text-light">{nav.desc}</p>
9393
</motion.div>
9494
</motion.div>
95-
) : null
95+
) : (
96+
<></>
97+
)
9698
}

0 commit comments

Comments
 (0)