Skip to content

Commit

Permalink
add help widget (#531)
Browse files Browse the repository at this point in the history
* add help widget

* pretty
cohenaj194 authored Dec 28, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 39af3a6 commit 5e4eb67
Showing 3 changed files with 93 additions and 0 deletions.
47 changes: 47 additions & 0 deletions app/components/widgets/HelpWidget.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useState } from 'react'

export default function HelpWidget() {
const [isOpen, setIsOpen] = useState(false)

const openDiscord = () => {
window.open(
'https://discord.com/servers/saddlebag-exchange-973380473281724476',
'_blank'
)
}

return (
<div className="fixed bottom-4 right-4 z-50">
{isOpen && (
<div className="mb-4 w-72 rounded-lg bg-white p-4 shadow-lg dark:bg-slate-700">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold dark:text-white">
Need Help?
</h3>
<button
onClick={() => setIsOpen(false)}
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
<span className="text-xl">×</span>
</button>
</div>
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
Join our Discord community for support, tips, and discussions!
</p>
<button
onClick={openDiscord}
className="mt-4 flex w-full items-center justify-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-white hover:bg-indigo-700">
<span className="font-bold">Join Discord Server</span>
</button>
</div>
)}
{!isOpen && (
<button
onClick={() => setIsOpen(true)}
className="flex h-14 w-14 items-center justify-center rounded-full bg-indigo-600 text-white shadow-lg hover:bg-indigo-700"
aria-label="Get Help">
<span className="text-2xl font-bold">?</span>
</button>
)}
</div>
)
}
2 changes: 2 additions & 0 deletions app/root.tsx
Original file line number Diff line number Diff line change
@@ -54,6 +54,7 @@ import {
setWoWRealmDataInLocalStorage
} from './redux/localStorage/wowRealmHelpers'
import { setCookie } from './utils/cookies'
import HelpWidget from '~/components/widgets/HelpWidget'

export const ErrorBoundary = () => {
return (
@@ -309,6 +310,7 @@ function App() {
<Sidebar data={data}>
<Outlet />
</Sidebar>
<HelpWidget />
<ScrollRestoration />
<Scripts />
<LiveReload />
44 changes: 44 additions & 0 deletions app/tailwind.css
Original file line number Diff line number Diff line change
@@ -810,6 +810,14 @@ select {
top: 1.25rem;
}

.bottom-4 {
bottom: 1rem;
}

.right-4 {
right: 1rem;
}

.z-10 {
z-index: 10;
}
@@ -1151,6 +1159,14 @@ select {
height: 100%;
}

.h-14 {
height: 3.5rem;
}

.h-7 {
height: 1.75rem;
}

.max-h-0 {
max-height: 0px;
}
@@ -1285,6 +1301,14 @@ select {
width: 100vw;
}

.w-7 {
width: 1.75rem;
}

.w-72 {
width: 18rem;
}

.min-w-0 {
min-width: 0px;
}
@@ -1938,6 +1962,11 @@ select {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
}

.bg-opacity-75 {
--tw-bg-opacity: 0.75;
}
@@ -2711,6 +2740,11 @@ select {
background-color: rgb(126 34 206 / var(--tw-bg-opacity));
}

.hover\:bg-indigo-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -2746,6 +2780,11 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:text-gray-700:hover {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity));
}

.hover\:underline:hover {
text-decoration-line: underline;
}
@@ -3153,6 +3192,11 @@ select {
color: rgb(252 165 165 / var(--tw-text-opacity));
}

:is(.dark .dark\:hover\:text-gray-200:hover) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}

:is(.dark .dark\:focus\:border-gray-100:focus) {
--tw-border-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-border-opacity));

0 comments on commit 5e4eb67

Please sign in to comment.