Skip to content

Commit e037145

Browse files
Stan-l-e-yStan-l-e-y
committed
add server to use react tooltip
1 parent a7489f8 commit e037145

3 files changed

Lines changed: 55 additions & 53 deletions

File tree

‎components/home/RenderDesktopView.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export default function RenderDesktopView() {
1616
const [sideBarView, mainView] = renderContent(sideBarOption, channel);
1717

1818
return (
19-
<div className={`${styles.container}`}>
19+
<div className={`${styles.container} `}>
2020
<div className="col-start-1 col-end-2 bg-grey-950 flex-col justify-center ">
2121
<NavBar type="vertical" />
2222
</div>
23-
<div className="col-start-2 col-end-4 flex-col bg-grey-900 h-screen overflow-y-scroll overflow-x-hidden">
23+
<div className="col-start-2 col-end-4 flex-col bg-grey-900 ">
2424
{sideBarView}
2525
</div>
2626
<div className="col-start-4 col-end-13 flex flex-col h-screen">

‎components/home/ServerList.tsx‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
66
import styles from '@/styles/Servers.module.css';
77
import AddServerModal from '@/components/home/AddServerModal';
88
import { useGetServers, useServers } from '@/lib/store';
9+
import { Tooltip } from 'react-tooltip';
910

1011
export default function ServerList() {
1112
//TODO: fetch server_users via profile id, select server_id -> fetch channels via this server_id && fetch servers with server_id
1213
//This should at minimum return server_id, author_id (serveruser id), server name, channel id, channel name
1314

1415
//TODO: Display default page (when user belongs to and has no servers)
1516

16-
const [addServerhover, setAddServerHover] = useState(false);
1717
const [showAddServer, setShowAddServer] = useState(false);
1818
const [expanded, setExpanded] = useState(0);
1919

@@ -34,7 +34,7 @@ export default function ServerList() {
3434
//TODO: add isServer check
3535

3636
return (
37-
<div className=" p-4 min-h-0">
37+
<div className=" p-4 flex-col flex h-screen">
3838
<AddServerModal
3939
showModal={showAddServer}
4040
setShowModal={setShowAddServer}
@@ -44,26 +44,26 @@ export default function ServerList() {
4444
<div className="pt-2 ml-3 relative">
4545
<span
4646
className="hover:cursor-pointer"
47-
onMouseEnter={() => setAddServerHover(true)}
48-
onMouseLeave={() => setAddServerHover(false)}
4947
onClick={() => {
5048
setShowAddServer(true);
5149
}}
5250
>
53-
<AddServerIcon hovered={addServerhover} />
51+
<span data-tooltip-id="addServer" data-tooltip-place="right">
52+
<AddServerIcon />
53+
</span>
5454
</span>
55-
{addServerhover ? (
56-
<div className="absolute w-10 top-2 left-7 flex">
57-
<div
58-
className={`${styles.arrow} absolute -left-2 top-[6px]`}
59-
></div>
60-
<div className=" bg-grey-950 rounded-lg py-1 px-2">
61-
Add a Server
62-
</div>
63-
</div>
64-
) : (
65-
''
66-
)}
55+
<Tooltip
56+
className="z-20 !opacity-100 font-semibold text-base"
57+
style={{
58+
backgroundColor: '#21282b',
59+
borderRadius: '0.5rem',
60+
fontSize: '1rem',
61+
}}
62+
id="addServer"
63+
clickable
64+
>
65+
Add a server
66+
</Tooltip>
6767
</div>
6868
</div>
6969
<div className="pt-4 pb-4">
@@ -73,28 +73,30 @@ export default function ServerList() {
7373
placeholder="Search"
7474
></input>
7575
</div>
76-
{servers &&
77-
servers.map((server, idx, serverList) => {
78-
if (server) {
79-
return (
80-
<span
81-
key={server.server_id}
82-
onClick={() => {
83-
return expanded !== server.server_id
84-
? setExpanded(server.server_id)
85-
: '';
86-
}}
87-
>
88-
<Server
89-
server={server.servers}
90-
expanded={expanded}
91-
isLast={idx == serverList.length - 1}
92-
setExpanded={setExpanded}
93-
/>
94-
</span>
95-
);
96-
}
97-
})}
76+
<div className="overflow-y-scroll">
77+
{servers &&
78+
servers.map((server, idx, serverList) => {
79+
if (server) {
80+
return (
81+
<span
82+
key={server.server_id}
83+
onClick={() => {
84+
return expanded !== server.server_id
85+
? setExpanded(server.server_id)
86+
: '';
87+
}}
88+
>
89+
<Server
90+
server={server.servers}
91+
expanded={expanded}
92+
isLast={idx == serverList.length - 1}
93+
setExpanded={setExpanded}
94+
/>
95+
</span>
96+
);
97+
}
98+
})}
99+
</div>
98100
</div>
99101
);
100102
}

‎components/icons/AddServerIcon.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
export default function AddServerIcon({hovered = false}) {
1+
export default function AddServerIcon() {
22
return (
3-
<svg
4-
xmlns="http://www.w3.org/2000/svg"
5-
fill="none"
6-
viewBox="-5 -5 34 34"
7-
strokeWidth={1.7}
8-
stroke="currentColor"
9-
className={`${hovered ? 'bg-grey-950 rounded-xl ' : ''} w-6 h-6`}
3+
<svg
4+
xmlns="http://www.w3.org/2000/svg"
5+
fill="none"
6+
viewBox="-5 -5 34 34"
7+
strokeWidth={1.7}
8+
stroke="currentColor"
9+
className="w-6 h-6 hover:bg-grey-950 rounded-xl transition ease-in-out delay-75"
1010
>
11-
<path
12-
strokeLinecap="round"
13-
strokeLinejoin="round"
14-
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
11+
<path
12+
strokeLinecap="round"
13+
strokeLinejoin="round"
14+
d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
1515
/>
1616
</svg>
1717
);

0 commit comments

Comments
 (0)