Skip to content

Commit e464491

Browse files
rasyidcoderasyidcode
committed
add static content
1 parent b7c3b78 commit e464491

File tree

11 files changed

+167
-76
lines changed

11 files changed

+167
-76
lines changed

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
@layer utilities {
3030
.scrollbar {
3131
scrollbar-width: thin;
32-
scrollbar-color: rgba(10, 20, 26, .2) transparent;
32+
scrollbar-color: rgba(10, 20, 26, .3) transparent;
3333
}
3434

3535
/* .scrollbar::-webkit-scrollbar {

‎app/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ChatInput from "@/components/ChatInput";
55
import ChatList from "@/components/ChatList";
66
import ChatPanel from "@/components/ChatPanel";
77
import ChatSearch from "@/components/ChatSearch";
8-
import Menu from "@/components/Menu";
8+
import SideMenu from "@/components/SideMenu";
99

1010

1111
export default function Page() {
@@ -16,7 +16,7 @@ export default function Page() {
1616
</div>
1717
<div className='flex-1 flex overflow-hidden p-5 z-50'>
1818
<div className="flex-1 flex overflow-hidden shadow-xl">
19-
<Menu />
19+
<SideMenu />
2020
<div className="bg-white w-md border flex flex-col">
2121
<AppHeader />
2222
<ChatSearch />
@@ -25,6 +25,8 @@ export default function Page() {
2525
<div>Get WhyApp for Windows</div>
2626
</div>
2727
<div className="flex-1 flex flex-col overflow-hidden relative">
28+
<div className="w-full h-full absolute bg-[url(./wa-bg.png)] bg-fixed bg-contain
29+
bg-[#EFEAE2] bg-repeat z-0"></div>
2830
<ChatHeader />
2931
<ChatPanel />
3032
<ChatInput />

‎assets/me.jpg‎

143 KB
Loading

‎components/ChatHeader.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
import Image from "next/image"
22
import { MagnifyingGlassIcon, VideoCameraIcon, EllipsisVerticalIcon } from "@heroicons/react/24/solid"
33
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react"
4+
import profilePic from "./../assets/me.jpg";
45

56
export default function ChatHeader() {
67
return (
7-
<header className="flex items-center p-4 gap-4 bg-[#F0F2F5] shadow">
8+
<header className="flex z-50 items-center p-4 gap-4 bg-[#F0F2F5] shadow">
89
<button className="cursor-pointer">
910
<Image
10-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1MWm4Uc-yhWB5bkRg8r_Vy6ueABFtDb_qSA&s"
11-
alt="Donald Trump"
11+
src={profilePic}
12+
alt="Ahmad Jamil Al Rasyid"
1213
width={40}
1314
height={40}
1415
className=" rounded-full aspect-square object-cover" />
1516
</button>
16-
<h1 className="flex-1">Donald Trump</h1>
17+
<h1 className="flex-1">Ahmad Jamil Al Rasyid</h1>
1718
<div className="flex items-center gap-8">
1819
<button className="p-2 rounded-full cursor-pointer active:bg-slate-300/60
1920
transition-all duration-150 ease-in-out">

‎components/ChatInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { PlusIcon, PhotoIcon, MicrophoneIcon } from '@heroicons/react/24/solid'
33

44
export default function ChatInput() {
55
return (
6-
<div className="flex items-center px-4 py-2 gap-4 bg-[#F0F2F5]
6+
<div className="flex items-center px-4 py-2 gap-4 bg-[#F0F2F5] z-50
77
shadow-[0_-1px_3px_0_rgba(0,0,0,0.1),0_-1px_2px_0_rgba(0,0,0,0.06)]">
88
<button className="cursor-pointer p-2 rounded-full active:bg-slate-300/60
99
transition-all duration-150 ease-in-out">

‎components/ChatItem.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import Image from "next/image";
2-
import DefaultUserImage from "./DefaultUserImage";
2+
import profilePic from "./../assets/me.jpg";
33

44
export default function ChatItem() {
55
return (
66
<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"
7+
<Image
8+
src={profilePic}
9+
alt="Ahmad Jamil Al Rasyid"
1010
width={50}
1111
height={50}
12-
className="rounded-full aspect-square object-cover border" /> */}
13-
<DefaultUserImage size={50} />
12+
className="rounded-full aspect-square object-cover border" />
13+
{/* <DefaultUserImage size={50} /> */}
1414
<div className="flex-1 border-t py-4 flex items-center justify-between">
1515
<div className="flex-1">
16-
<h4>Donald Trump</h4>
17-
<p className="text-slate-400 font-light text-sm">I know you btw...</p>
16+
<h4>Ahmad Jamil Al Rasyid</h4>
17+
<p className="text-slate-400 font-light text-sm">
18+
Welcome to my WhatsApp Style Portfolio
19+
</p>
1820
</div>
1921
<div className="px-4">
2022
<span className="text-xs font-light text-gray-500">8:30 AM</span>

‎components/ChatList.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,6 @@ export default function ChatList() {
44
return (
55
<div className="flex-1 mt-2 overflow-y-scroll scrollbar">
66
<ChatItem />
7-
<ChatItem />
8-
<ChatItem />
9-
<ChatItem />
10-
<ChatItem />
11-
<ChatItem />
12-
<ChatItem />
13-
<ChatItem />
14-
<ChatItem />
15-
<ChatItem />
167
</div>
178
)
189
}

‎components/ChatPanel.tsx‎

Lines changed: 76 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,87 @@
11
import React from 'react'
2+
import ChatPanelYou from './ChatPanelYou'
3+
import ChatPanelSender from './ChatPanelSender'
24

35
export default function ChatPanel() {
46
return (
5-
<div className="flex-1 overflow-y-scroll bg-[#EFEAE2] relative flex">
6-
<div className="w-full h-full absolute bg-[url(./wa-bg.png)]"></div>
7-
<div className="flex flex-col z-50 py-5 px-10 w-full gap-4">
8-
<div className="relative rounded-lg bg-[#DCF8C6] px-3 py-2 shadow-xs
9-
self-end max-w-[65%]">
7+
<div className="flex-1 relative flex flex-col overflow-y-scroll scrollbar">
8+
<div className="flex-1 flex flex-col z-50 py-5 px-10 w-full gap-4">
9+
<ChatPanelYou message='Hi, What is your name?' sentAt='8:16 AM' />
10+
<ChatPanelSender>
1011
<p className="text-sm text-gray-700">
11-
Halo Admin Joy Dental, saya mau konsultasi gigi
12+
Hi, there! My name is Jamil, nice to meet you!
1213
</p>
13-
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
14-
<span>8:16 AM</span>
15-
<svg
16-
viewBox="0 0 16 11"
17-
height="11"
18-
width="16"
19-
preserveAspectRatio="xMidYMid meet"
20-
className="text-[#53bdeb]"
21-
fill="none">
22-
<title>msg-dblcheck</title>
23-
<path d="M11.0714 0.652832C10.991 0.585124 10.8894 0.55127 10.7667 0.55127C10.6186 0.55127 10.4916 0.610514 10.3858 0.729004L4.19688 8.36523L1.79112 6.09277C1.7488 6.04622 1.69802 6.01025 1.63877 5.98486C1.57953 5.95947 1.51817 5.94678 1.45469 5.94678C1.32351 5.94678 1.20925 5.99544 1.11192 6.09277L0.800883 6.40381C0.707784 6.49268 0.661235 6.60482 0.661235 6.74023C0.661235 6.87565 0.707784 6.98991 0.800883 7.08301L3.79698 10.0791C3.94509 10.2145 4.11224 10.2822 4.29844 10.2822C4.40424 10.2822 4.5058 10.259 4.60313 10.2124C4.70046 10.1659 4.78086 10.1003 4.84434 10.0156L11.4903 1.59863C11.5623 1.5013 11.5982 1.40186 11.5982 1.30029C11.5982 1.14372 11.5348 1.01888 11.4078 0.925781L11.0714 0.652832ZM8.6212 8.32715C8.43077 8.20866 8.2488 8.09017 8.0753 7.97168C7.99489 7.89128 7.8891 7.85107 7.75791 7.85107C7.6098 7.85107 7.4892 7.90397 7.3961 8.00977L7.10411 8.33984C7.01947 8.43717 6.97715 8.54508 6.97715 8.66357C6.97715 8.79476 7.0237 8.90902 7.1168 9.00635L8.1959 10.0791C8.33132 10.2145 8.49636 10.2822 8.69102 10.2822C8.79681 10.2822 8.89838 10.259 8.99571 10.2124C9.09304 10.1659 9.17556 10.1003 9.24327 10.0156L15.8639 1.62402C15.9358 1.53939 15.9718 1.43994 15.9718 1.32568C15.9718 1.1818 15.9125 1.05697 15.794 0.951172L15.4386 0.678223C15.3582 0.610514 15.2587 0.57666 15.1402 0.57666C14.9964 0.57666 14.8715 0.635905 14.7657 0.754395L8.6212 8.32715Z"
24-
fill="currentColor">
25-
</path>
26-
</svg>
27-
</div>
28-
{/* Triangle shape for chat bubble */}
29-
<div
30-
className="absolute top-0 -right-2.5 h-4 w-4"
31-
style={{
32-
clipPath: "polygon(0 0, 100% 0, 0 100%, 0 50%)",
33-
}}
34-
>
35-
<div className="absolute h-5 w-5 transform bg-[#DCF8C6]" />
36-
</div>
37-
</div>
38-
39-
<div className="relative rounded-lg bg-white px-3 py-2 shadow-xs
40-
self-start max-w-[65%]">
41-
<p className="text-sm text-gray-700">
42-
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:
14+
</ChatPanelSender>
15+
<ChatPanelYou message='Tell me about yourself' sentAt='8:20 AM' />
16+
<ChatPanelSender>
17+
<p className="text-sm text-gray-700 text-justify">
18+
Passionate and skilled Software Engineer with 8 years of extensive experience
19+
in designing, developing, and maintaining robust web and mobile applications.
20+
Proficient in full-stack development, with a deep understanding of front-end and
21+
back-end technologies. Demonstrated expertise in delivering high-quality,
22+
scalable solutions tailored to meet user needs and business objectives.
4323
</p>
44-
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
45-
<span>8:16 AM</span>
46-
</div>
47-
{/* Triangle shape for chat bubble */}
48-
<div
49-
className="absolute top-0 -left-2.5 h-4 w-4"
50-
style={{
51-
clipPath: "polygon(0 0, 0 0, 100% 0, 100% 100%)",
52-
}}
53-
>
54-
<div className="absolute h-5 w-5 transform bg-white" />
24+
<p className="text-sm text-gray-700 text-justify mt-2">
25+
Experienced in agile development methodologies, collaborating
26+
effectively with cross-functional teams to drive projects from
27+
concept to deployment. Committed to continuous learning and staying
28+
up-to-date with industry trends to implement innovative solutions.
29+
</p>
30+
<p className="text-sm text-gray-700 text-justify mt-2">
31+
Seeking to leverage comprehensive technical
32+
knowledge and problem-solving abilities to contribute to
33+
dynamic and forward-thinking development teams.
34+
</p>
35+
</ChatPanelSender>
36+
<ChatPanelYou message='Skills' sentAt='8:25 AM' />
37+
<ChatPanelSender>
38+
<div className="text-sm text-gray-700 text-justify flex
39+
flex-col gap-5 w-sm">
40+
<div>
41+
<strong>Programming Language</strong>
42+
<ul className="list-disc ml-5">
43+
<li>PHP</li>
44+
<li>JavaScript</li>
45+
<li>TypeScript</li>
46+
<li>Dart</li>
47+
<li>Kotlin</li>
48+
<li>Java</li>
49+
</ul>
50+
</div>
51+
<div>
52+
<strong>Frameworks</strong>
53+
<ul className="list-disc ml-5">
54+
<li>Symfony</li>
55+
<li>Slim</li>
56+
<li>Laravel</li>
57+
<li>Flutter</li>
58+
<li>React.js</li>
59+
<li>Vue.js</li>
60+
<li>Vite.js</li>
61+
<li>Next.js</li>
62+
</ul>
63+
</div>
64+
<div>
65+
<strong>Database</strong>
66+
<ul className="list-disc ml-5">
67+
<li>MySQL</li>
68+
<li>Postgres</li>
69+
<li>MongoDB</li>
70+
<li>Firebase</li>
71+
<li>Vercel Storage</li>
72+
</ul>
73+
</div>
74+
<div>
75+
<strong>DevOps & CI/CD</strong>
76+
<ul className="list-disc ml-5">
77+
<li>Github Actions</li>
78+
<li>Bitbucket Pipelines</li>
79+
<li>AWS</li>
80+
<li>Docker</li>
81+
</ul>
82+
</div>
5583
</div>
56-
</div>
84+
</ChatPanelSender>
5785
</div>
5886
</div>
5987
)

‎components/ChatPanelSender.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ReactNode } from "react"
2+
3+
export default function ChatPanelSender({ children }: {
4+
children: ReactNode
5+
}) {
6+
return (
7+
<div className="relative rounded-lg bg-white px-3 py-2 shadow-xs
8+
self-start max-w-[65%]">
9+
{children}
10+
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
11+
<span>8:16 AM</span>
12+
</div>
13+
{/* Triangle shape for chat bubble */}
14+
<div
15+
className="absolute top-0 -left-2.5 h-4 w-4"
16+
style={{
17+
clipPath: "polygon(0 0, 0 0, 100% 0, 100% 100%)",
18+
}}
19+
>
20+
<div className="absolute h-5 w-5 transform bg-white" />
21+
</div>
22+
</div>
23+
)
24+
}

‎components/ChatPanelYou.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
export default function ChatYou({ message, sentAt }: {
2+
message: string;
3+
sentAt: string;
4+
}) {
5+
return (
6+
<div className="relative rounded-lg bg-[#DCF8C6] px-3 py-2 shadow-xs
7+
self-end max-w-[65%]">
8+
<p className="text-sm text-gray-700">
9+
{message}
10+
</p>
11+
<div className="flex items-center justify-end gap-1 text-[11px] text-gray-500">
12+
<span>{sentAt}</span>
13+
<svg
14+
viewBox="0 0 16 11"
15+
height="11"
16+
width="16"
17+
preserveAspectRatio="xMidYMid meet"
18+
className="text-[#53bdeb]"
19+
fill="none">
20+
<title>msg-dblcheck</title>
21+
<path d="M11.0714 0.652832C10.991 0.585124 10.8894 0.55127 10.7667 0.55127C10.6186 0.55127 10.4916 0.610514 10.3858 0.729004L4.19688 8.36523L1.79112 6.09277C1.7488 6.04622 1.69802 6.01025 1.63877 5.98486C1.57953 5.95947 1.51817 5.94678 1.45469 5.94678C1.32351 5.94678 1.20925 5.99544 1.11192 6.09277L0.800883 6.40381C0.707784 6.49268 0.661235 6.60482 0.661235 6.74023C0.661235 6.87565 0.707784 6.98991 0.800883 7.08301L3.79698 10.0791C3.94509 10.2145 4.11224 10.2822 4.29844 10.2822C4.40424 10.2822 4.5058 10.259 4.60313 10.2124C4.70046 10.1659 4.78086 10.1003 4.84434 10.0156L11.4903 1.59863C11.5623 1.5013 11.5982 1.40186 11.5982 1.30029C11.5982 1.14372 11.5348 1.01888 11.4078 0.925781L11.0714 0.652832ZM8.6212 8.32715C8.43077 8.20866 8.2488 8.09017 8.0753 7.97168C7.99489 7.89128 7.8891 7.85107 7.75791 7.85107C7.6098 7.85107 7.4892 7.90397 7.3961 8.00977L7.10411 8.33984C7.01947 8.43717 6.97715 8.54508 6.97715 8.66357C6.97715 8.79476 7.0237 8.90902 7.1168 9.00635L8.1959 10.0791C8.33132 10.2145 8.49636 10.2822 8.69102 10.2822C8.79681 10.2822 8.89838 10.259 8.99571 10.2124C9.09304 10.1659 9.17556 10.1003 9.24327 10.0156L15.8639 1.62402C15.9358 1.53939 15.9718 1.43994 15.9718 1.32568C15.9718 1.1818 15.9125 1.05697 15.794 0.951172L15.4386 0.678223C15.3582 0.610514 15.2587 0.57666 15.1402 0.57666C14.9964 0.57666 14.8715 0.635905 14.7657 0.754395L8.6212 8.32715Z"
22+
fill="currentColor">
23+
</path>
24+
</svg>
25+
</div>
26+
{/* Triangle shape for chat bubble */}
27+
<div
28+
className="absolute top-0 -right-2.5 h-4 w-4"
29+
style={{
30+
clipPath: "polygon(0 0, 100% 0, 0 100%, 0 50%)",
31+
}}
32+
>
33+
<div className="absolute h-5 w-5 transform bg-[#DCF8C6]" />
34+
</div>
35+
</div>
36+
)
37+
}

0 commit comments

Comments
 (0)