Skip to content

Commit fa49d1b

Browse files
rasyidcoderasyidcode
committed
done with chat list
1 parent 7ebec37 commit fa49d1b

File tree

9 files changed

+273
-105
lines changed

9 files changed

+273
-105
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
# rasyidcode.github.io
1+
# My Portfolio Site - WhatsApp Style
2+
3+
- [Demo](https://rasyidcode.github.io)
24

35
## Planning
46

‎app/globals.css‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@
22

33
@theme {
44
--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-
);
5+
--background-image-gradient-conic: conic-gradient(from 180deg at 50% 50%,
6+
var(--tw-gradient-stops));
97
}
108

119
/*
@@ -17,11 +15,37 @@
1715
color utility to any element that depends on these defaults.
1816
*/
1917
@layer base {
18+
2019
*,
2120
::after,
2221
::before,
2322
::backdrop,
2423
::file-selector-button {
2524
border-color: var(--color-gray-200, currentColor);
2625
}
26+
27+
}
28+
29+
@layer utilities {
30+
.scrollbar {
31+
scrollbar-width: thin;
32+
scrollbar-color: rgba(10, 20, 26, .2) transparent;
33+
}
34+
35+
/* .scrollbar::-webkit-scrollbar {
36+
width: 12px;
37+
}
38+
39+
.scrollbar::-webkit-scrollbar-track {
40+
background: #ffffff;
41+
}
42+
43+
.scrollbar::-webkit-scrollbar-thumb {
44+
background: #CED0D1;
45+
border: 3px solid #ffffff;
46+
} */
47+
48+
/* .scrollbar::-webkit-scrollbar-thumb:hover {
49+
background: #c0a0b9;
50+
} */
2751
}

‎app/layout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Inter } from 'next/font/google'
55
const inter = Inter({ subsets: ['latin'] })
66

77
export const metadata: Metadata = {
8-
title: 'rasyidcode',
8+
title: 'WhatsApp Style Portfolio',
99
description: 'My personal github pages',
1010
}
1111

@@ -17,7 +17,10 @@ export default function RootLayout({
1717
return (
1818
<html lang="en">
1919
<body className={`${inter.className} flex flex-col h-screen overflow-hidden`}>
20-
<main className='flex-1 flex overflow-hidden'>
20+
<div className='absolute w-full h-full z-0 bg-[#DAD7D3]'>
21+
<div className='h-30 bg-[#00A783]'></div>
22+
</div>
23+
<main className='flex-1 flex overflow-hidden p-5 z-50'>
2124
{children}
2225
</main>
2326
</body>

‎app/page.tsx‎

Lines changed: 53 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,66 @@
1-
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
2-
import { EllipsisVerticalIcon, MagnifyingGlassIcon, MicrophoneIcon, PhotoIcon, PlusIcon, VideoCameraIcon } from "@heroicons/react/24/solid";
1+
import ChatHeader from "@/components/ChatHeader";
2+
import ChatInput from "@/components/ChatInput";
3+
import ChatItem from "@/components/ChatItem";
4+
import ChatPanel from "@/components/ChatPanel";
5+
import { ChatBubbleLeftIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
6+
import { EllipsisVerticalIcon } from "@heroicons/react/24/solid";
37
import Image from "next/image";
48

59
export default function Page() {
610
return (
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
11+
<div className="flex-1 flex overflow-hidden shadow-xl">
12+
<div className="bg-[#F0F2F5] w-15">
13+
Icons
14+
</div>
15+
<div className="bg-white w-md border flex flex-col">
16+
<header className="flex items-center p-4 justify-between">
17+
<h1 className="font-bold tracking-wide text-xl text-slate-800">Chats</h1>
18+
<div className="flex gap-6">
19+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
2020
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
21+
<ChatBubbleLeftIcon className="size-6 text-gray-700" />
22+
</button>
23+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
2424
transition-all duration-150 ease-in-out">
25-
<MagnifyingGlassIcon className="size-6 text-gray-700" />
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">
3025
<EllipsisVerticalIcon className="size-6 text-gray-700" />
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 z-50">
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>
26+
</button>
6827
</div>
69-
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 px-4 py-2 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 className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
94-
transition-all duration-150 ease-in-out">
95-
<PlusIcon className="size-6 text-gray-700" />
96-
</button>
97-
<div className="flex-1 flex items-center gap-3 bg-white px-4 py-2
98-
rounded-lg">
99-
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
100-
transition-all duration-150 ease-in-out">
101-
<PhotoIcon className="size-6 text-gray-700" />
28+
</header>
29+
<div className="flex bg-[#F0F2F5] px-4 py-2 gap-8 rounded-lg mt-2 mx-4">
30+
<button className="cursor-pointer">
31+
<MagnifyingGlassIcon className="size-4 text-gray-700" />
10232
</button>
103-
<input placeholder="Type a message" className="outline-none flex-1" />
33+
<input placeholder="Search" className="flex-1 text-sm outline-0" />
10434
</div>
105-
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
106-
transition-all duration-150 ease-in-out">
107-
<MicrophoneIcon className="size-6 text-gray-700" />
108-
</button>
35+
<div className="flex items-center gap-4 mt-2 px-4">
36+
<button className="bg-[#E7FCE3] text-[#00808D] px-2 py-1 rounded-2xl cursor-pointer
37+
text-sm font-light">All</button>
38+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
39+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Unread</button>
40+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
41+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Favorites</button>
42+
<button className="bg-[#F0F2F5] px-2 py-1 rounded-2xl cursor-pointer text-sm
43+
font-light hover:brightness-95 transition-all duration-150 ease-linear">Groups</button>
44+
</div>
45+
{/* Chat List */}
46+
<div className="flex-1 mt-2 overflow-y-scroll scrollbar">
47+
<ChatItem />
48+
<ChatItem />
49+
<ChatItem />
50+
<ChatItem />
51+
<ChatItem />
52+
<ChatItem />
53+
<ChatItem />
54+
<ChatItem />
55+
<ChatItem />
56+
<ChatItem />
57+
</div>
58+
<div>Get WhyApp for Windows</div>
59+
</div>
60+
<div className="flex-1 flex flex-col overflow-hidden relative">
61+
<ChatHeader />
62+
<ChatPanel />
63+
<ChatInput />
10964
</div>
11065
</div>
11166
)

‎components/ChatHeader.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import Image from "next/image"
2+
import { MagnifyingGlassIcon, VideoCameraIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid"
3+
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"
4+
5+
export default function ChatHeader() {
6+
return (
7+
<header className="flex items-center p-4 gap-4 bg-[#F0F2F5] shadow">
8+
<button className="cursor-pointer">
9+
<Image
10+
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1MWm4Uc-yhWB5bkRg8r_Vy6ueABFtDb_qSA&s"
11+
alt="Donald Trump"
12+
width={40}
13+
height={40}
14+
className=" rounded-full aspect-square object-cover" />
15+
</button>
16+
<h1 className="flex-1">Donald Trump</h1>
17+
<div className="flex items-center gap-8">
18+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
19+
transition-all duration-150 ease-in-out">
20+
<VideoCameraIcon className="size-6 text-slate-400" />
21+
</button>
22+
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
23+
transition-all duration-150 ease-in-out">
24+
<MagnifyingGlassIcon className="size-6 text-gray-700" />
25+
</button>
26+
<Popover className="relative">
27+
<PopoverButton className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
28+
transition-all duration-150 ease-in-out ring-0 outline-0 focus:bg-slate-300/60">
29+
<EllipsisVerticalIcon className="size-6 text-gray-700" />
30+
</PopoverButton>
31+
<PopoverPanel as="ul" anchor="bottom start" className="bg-white py-4 shadow rounded-sm
32+
w-52 flex flex-col gap-2 mr-2 z-50">
33+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Contact Info</li>
34+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Select messages</li>
35+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Mute notifications</li>
36+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Disappearing messages</li>
37+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Close chat</li>
38+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Report</li>
39+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Block</li>
40+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Clear chat</li>
41+
<li className="hover:bg-gray-100 px-4 py-2 cursor-pointer">Delete chat</li>
42+
</PopoverPanel>
43+
</Popover>
44+
</div>
45+
</header>
46+
)
47+
}

‎components/ChatInput.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import { PlusIcon, PhotoIcon, MicrophoneIcon } from '@heroicons/react/24/solid'
3+
4+
export default function ChatInput() {
5+
return (
6+
<div className="flex items-center px-4 py-2 gap-4 bg-[#F0F2F5]
7+
shadow-[0_-1px_3px_0_rgba(0,0,0,0.1),0_-1px_2px_0_rgba(0,0,0,0.06)]">
8+
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
9+
transition-all duration-150 ease-in-out">
10+
<PlusIcon className="size-6 text-gray-700" />
11+
</button>
12+
<div className="flex-1 flex items-center gap-3 bg-white px-4 py-2
13+
rounded-lg">
14+
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
15+
transition-all duration-150 ease-in-out">
16+
<PhotoIcon className="size-6 text-gray-700" />
17+
</button>
18+
<input placeholder="Type a message" className="outline-none flex-1" />
19+
</div>
20+
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
21+
transition-all duration-150 ease-in-out">
22+
<MicrophoneIcon className="size-6 text-gray-700" />
23+
</button>
24+
</div>
25+
)
26+
}

‎components/ChatItem.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Image from "next/image";
2+
import DefaultUserImage from "./DefaultUserImage";
3+
4+
export default function ChatItem() {
5+
return (
6+
<a href="#" className="flex items-center gap-4 hover:bg-[#F0F2F5] pl-4">
7+
{/* <Image
8+
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1MWm4Uc-yhWB5bkRg8r_Vy6ueABFtDb_qSA&s"
9+
alt="Profile Picture Example"
10+
width={50}
11+
height={50}
12+
className="rounded-full aspect-square object-cover border" /> */}
13+
<DefaultUserImage size={50} />
14+
<div className="flex-1 border-t py-4 flex items-center justify-between">
15+
<div className="flex-1">
16+
<h4>Donald Trump</h4>
17+
<p className="text-slate-400 font-light text-sm">I know you btw...</p>
18+
</div>
19+
<div className="px-4">
20+
<span className="text-xs font-light text-gray-500">8:30 AM</span>
21+
</div>
22+
</div>
23+
</a>
24+
)
25+
}

0 commit comments

Comments
 (0)