Skip to content

Commit 8338b2e

Browse files
rasyidcoderasyidcode
committed
add wa chat ui
1 parent 0e71914 commit 8338b2e

File tree

9 files changed

+915
-2392
lines changed

9 files changed

+915
-2392
lines changed

‎app/globals.css‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@theme {
4+
--background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
5+
--background-image-gradient-conic: conic-gradient(
6+
from 180deg at 50% 50%,
7+
var(--tw-gradient-stops)
8+
);
9+
}
10+
11+
/*
12+
The default border color has changed to `currentColor` in Tailwind CSS v4,
13+
so we've added these compatibility styles to make sure everything still
14+
looks the same as it did with Tailwind CSS v3.
15+
16+
If we ever want to remove these styles, we need to add an explicit border
17+
color utility to any element that depends on these defaults.
18+
*/
19+
@layer base {
20+
*,
21+
::after,
22+
::before,
23+
::backdrop,
24+
::file-selector-button {
25+
border-color: var(--color-gray-200, currentColor);
26+
}
27+
}

‎app/layout.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ export default function RootLayout({
1616
}) {
1717
return (
1818
<html lang="en">
19-
<body className={`${inter.className}`}>
20-
<main>
19+
<body className={`${inter.className} flex flex-col h-screen overflow-hidden`}>
20+
<main className='flex-1 flex overflow-hidden'>
2121
{children}
2222
</main>
2323
</body>

‎app/page.tsx‎

Lines changed: 104 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,109 @@
1+
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
2+
import { EllipsisVerticalIcon, MagnifyingGlassIcon, MicrophoneIcon, PhotoIcon, PlusIcon, VideoCameraIcon } from "@heroicons/react/24/solid";
3+
import Image from "next/image";
4+
15
export default function Page() {
26
return (
3-
<section>
7+
<div className="flex-1 flex flex-col overflow-hidden relative">
8+
<header className="flex items-center p-4 gap-4 bg-[#F0F2F5] shadow">
9+
<button className="cursor-pointer">
10+
<Image
11+
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1MWm4Uc-yhWB5bkRg8r_Vy6ueABFtDb_qSA&s"
12+
alt="Donald Trump"
13+
width={40}
14+
height={40}
15+
className=" rounded-full aspect-square object-cover" />
16+
</button>
17+
<h1 className="flex-1">Donald Trump</h1>
18+
<div className="flex items-center gap-8">
19+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
20+
transition-all duration-150 ease-in-out">
21+
<VideoCameraIcon className="size-6 text-slate-400" />
22+
</button>
23+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
24+
transition-all duration-150 ease-in-out">
25+
<MagnifyingGlassIcon className="size-6 text-slate-800" />
26+
</button>
27+
<Popover className="relative">
28+
<PopoverButton className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
29+
transition-all duration-150 ease-in-out ring-0 outline-0 focus:bg-slate-300/60">
30+
<EllipsisVerticalIcon className="size-6 text-slate-800" />
31+
</PopoverButton>
32+
<PopoverPanel as="ul" anchor="bottom start" className="bg-white py-4 shadow rounded-sm
33+
w-52 flex flex-col gap-2 mr-2 ">
34+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Contact Info</li>
35+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Select messages</li>
36+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Mute notifications</li>
37+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Disappearing messages</li>
38+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Close chat</li>
39+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Report</li>
40+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Block</li>
41+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Clear chat</li>
42+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Delete chat</li>
43+
</PopoverPanel>
44+
</Popover>
45+
</div>
46+
</header>
47+
<div className="flex-1 overflow-y-scroll bg-[#EFEAE2] relative flex">
48+
<div className="w-full h-full absolute bg-[url(./wa-bg.png)]"></div>
49+
<div className="flex flex-col z-50 py-5 px-10 w-full gap-4">
50+
<div className="relative rounded-lg bg-[#DCF8C6] px-3 py-2 shadow-xs
51+
self-end max-w-[65%]">
52+
<p className="text-[15px] text-gray-700">
53+
Halo Admin Joy Dental, saya mau konsultasi gigi
54+
</p>
55+
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
56+
<span>8:16 AM</span>
57+
<span className="ml-1">✓✓</span>
58+
</div>
59+
{/* Triangle shape for chat bubble */}
60+
<div
61+
className="absolute top-0 -right-2.5 h-4 w-4"
62+
style={{
63+
clipPath: "polygon(0 0, 100% 0, 0 100%, 0 50%)",
64+
}}
65+
>
66+
<div className="absolute h-5 w-5 transform bg-[#DCF8C6]" />
67+
</div>
68+
</div>
469

5-
</section>
70+
<div className="relative rounded-lg bg-white px-3 py-2 shadow-xs
71+
self-start max-w-[65%]">
72+
<p className="text-[15px] text-gray-700">
73+
Terima kasih telah menghubungi Hotline Klinik Gigi Joy Dental. Mohon maaf saat ini di luar jam operasional kami. Kami akan segera menghubungi kembali di jam operasional:
74+
</p>
75+
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
76+
<span>8:16 AM</span>
77+
<span className="ml-1">✓✓</span>
78+
</div>
79+
{/* Triangle shape for chat bubble */}
80+
<div
81+
className="absolute top-0 -left-2.5 h-4 w-4"
82+
style={{
83+
clipPath: "polygon(0 0, 0 0, 100% 0, 100% 100%)",
84+
}}
85+
>
86+
<div className="absolute h-5 w-5 transform bg-white" />
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div className="flex items-center p-4 gap-4 bg-[#F0F2F5]
92+
shadow-[0_-1px_3px_0_rgba(0,0,0,0.1),0_-1px_2px_0_rgba(0,0,0,0.06)]">
93+
<button>
94+
<PlusIcon className="size-6 text-gray-700" />
95+
</button>
96+
<div className="flex-1 flex items-center gap-3 bg-white p-3
97+
rounded-lg">
98+
<button>
99+
<PhotoIcon className="size-6 text-gray-700" />
100+
</button>
101+
<input placeholder="Type a message" className="outline-none flex-1" />
102+
</div>
103+
<button>
104+
<MicrophoneIcon className="size-6 text-gray-700" />
105+
</button>
106+
</div>
107+
</div>
6108
)
7109
}

‎app/wa-bg.png‎

86.5 KB
Loading

‎next.config.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3-
output: 'export'
3+
output: 'export',
4+
images: {
5+
unoptimized: true
6+
}
47
}
58

69
module.exports = nextConfig

0 commit comments

Comments
 (0)