Skip to content

Commit 896474b

Browse files
thesobercoderthesobercoder
committed
Added right pane first half
1 parent 27ff56a commit 896474b

File tree

6 files changed

+96
-11
lines changed

6 files changed

+96
-11
lines changed

‎components/bubble.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
export default function Bubble(props) {
22
return (
33
<div
4-
className={`font-semibold text-sm text-white rounded-full flex items-center justify-center h-8 w-8
5-
${props.bg ? props.bg : "bg-blue-400"}`}
4+
className={`font-semibold text-white rounded-full flex items-center justify-center
5+
${props.bg ? props.bg : "bg-blue-400"}
6+
${props.size ? props.size : "h-8 w-8"}
7+
${props.text ? props.text : "text-sm"}`}
68
>
79
{props.children}
810
</div>

‎components/sidebar.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ const TopMenu = () => {
159159

160160
export default function Sidebar() {
161161
return (
162-
<div className="w-16 flex-none flex flex-col bg-gray-100 justify-between border-r-2 border-gray-200 text-gray-600">
162+
<div className="w-16 flex-none flex flex-col bg-gray-100 justify-between border-r-2 border-gray-200 text-gray-500">
163163
<TopMenu />
164164
</div>
165165
);

‎components/submenu.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default function Submenu(props) {
22
return (
3-
<div className="w-64 flex-none bg-gray-100 p-4 text-gray-600">
3+
<div className="w-64 flex-none bg-gray-100 p-4 text-gray-500">
44
<div className="flex flex-row justify-between items-center">
55
<h1 className="text-2xl font-semibold">{props.name}</h1>
66
<svg

‎components/svg.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const LocationMarker = (props) => (
2+
<svg
3+
className={props.className}
4+
xmlns="http://www.w3.org/2000/svg"
5+
fill="none"
6+
viewBox="0 0 24 24"
7+
stroke="currentColor"
8+
>
9+
<path
10+
strokeLinecap="round"
11+
strokeLinejoin="round"
12+
strokeWidth={2}
13+
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
14+
/>
15+
<path
16+
strokeLinecap="round"
17+
strokeLinejoin="round"
18+
strokeWidth={2}
19+
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
20+
/>
21+
</svg>
22+
);
23+
24+
const OfficeBuilding = (props) => (
25+
<svg
26+
className={props.className}
27+
xmlns="http://www.w3.org/2000/svg"
28+
fill="none"
29+
viewBox="0 0 24 24"
30+
stroke="currentColor"
31+
>
32+
<path
33+
strokeLinecap="round"
34+
strokeLinejoin="round"
35+
strokeWidth={2}
36+
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
37+
/>
38+
</svg>
39+
);
40+
41+
export { LocationMarker, OfficeBuilding };

‎components/viewport.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function Viewport(props) {
77
<Sidebar />
88
<Submenu name={props.name} children={props.submenu} />
99
<div
10-
className={`flex-auto bg-white border-l border-gray-300 shadow-2xl ${props.className}`}
10+
className={`flex-auto bg-white border-l border-gray-300 text-gray-500 shadow-2xl ${props.className}`}
1111
>
1212
{props.children}
1313
</div>

‎pages/index.js‎

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { v4 as uuidv4 } from "uuid";
33
import { useState } from "react";
44
import faker from "faker";
55
import Bubble from "../components/bubble";
6+
import { LocationMarker, OfficeBuilding } from "../components/svg";
67

78
const Accordion = (props) => {
89
return (
@@ -328,7 +329,52 @@ const ChatPane = (props) => {
328329
};
329330

330331
const InfoPane = (props) => {
331-
return <div className="w-1/5 bg-gray-200">Right</div>;
332+
return (
333+
<>
334+
<div className="w-1/5 flex flex-col flex-none">
335+
<div className="p-4 flex flex-col flex-none border-b border-gray-300">
336+
<div className="flex items-start">
337+
<div className="mx-auto">
338+
<Bubble size="h-16 w-16" text="text-2xl">
339+
SB
340+
</Bubble>
341+
</div>
342+
<button className="">
343+
<svg
344+
className="h-4 w-4"
345+
xmlns="http://www.w3.org/2000/svg"
346+
fill="none"
347+
viewBox="0 0 24 24"
348+
stroke="currentColor"
349+
>
350+
<path
351+
strokeLinecap="round"
352+
strokeLinejoin="round"
353+
strokeWidth={2}
354+
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
355+
/>
356+
</svg>
357+
</button>
358+
</div>
359+
<h1 className="text-lg font-extrabold text-gray-500 mx-auto my-2">
360+
Elizabeth McGuane
361+
</h1>
362+
<div className="text-gray-400 border-blueGray-400 mx-auto text-xs border rounded-2xl px-3 py-1 mb-2 uppercase">
363+
User
364+
</div>
365+
<span className="mt-6 text-sm text-gray-500 flex items-center space-x-2">
366+
<LocationMarker className="h-6 w-6" />
367+
<span>3:42 PM in Dublin, Ireland</span>
368+
</span>
369+
<span className="mt-1 text-sm text-gray-500 flex items-center space-x-2">
370+
<OfficeBuilding className="h-6 w-6" />
371+
<span>Writer's Central</span>
372+
</span>
373+
</div>
374+
<div className="flex-grow">Hello</div>
375+
</div>
376+
</>
377+
);
332378
};
333379

334380
export default function Home() {
@@ -472,11 +518,7 @@ export default function Home() {
472518
);
473519

474520
return (
475-
<Viewport
476-
name="Inbox"
477-
className="flex flex-row text-gray-600"
478-
submenu={submenu}
479-
>
521+
<Viewport name="Inbox" className="flex flex-row" submenu={submenu}>
480522
<MessagePane chats={chats} />
481523
<ChatPane chats={chats} />
482524
<InfoPane />

0 commit comments

Comments
 (0)