Added links and API Keys to the bottom of the side menu
This commit is contained in:
James Ritchie
@@ -5,18 +5,19 @@ import { CopyText } from "./CopyText";
|
||||
|
||||
const variantStyle = {
|
||||
slate:
|
||||
"bg-slate-600 text-white transition hover:text-slate-700 hover:bg-slate-700 hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
|
||||
blue: "bg-blue-500 transition text-white hover:text-slate-100 hover:bg-blue-600 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
|
||||
"bg-slate-600 text-white rounded px-2 py-1 transition hover:text-slate-700 hover:bg-slate-700 hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900",
|
||||
blue: "bg-blue-500 rounded px-2 py-1 transition text-white hover:text-slate-100 hover:bg-blue-600 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600",
|
||||
darkTransparent:
|
||||
"bg-black/10 text-slate-900 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
|
||||
"bg-black/10 text-slate-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
|
||||
lightTransparent:
|
||||
"bg-white/10 text-white-900 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
|
||||
"bg-white/10 text-white-900 rounded px-2 py-1 transition hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white",
|
||||
text: "text-sm text-slate-300 transition hover:text-slate-400",
|
||||
};
|
||||
|
||||
export type CopyTextButtonProps = {
|
||||
value: string;
|
||||
className?: string;
|
||||
variant?: "slate" | "blue" | "darkTransparent" | "lightTransparent";
|
||||
variant?: "slate" | "blue" | "darkTransparent" | "lightTransparent" | "text";
|
||||
};
|
||||
|
||||
export function CopyTextButton({
|
||||
@@ -34,15 +35,18 @@ export function CopyTextButton({
|
||||
return (
|
||||
<CopyText className={`${className}`} value={value} onCopied={onCopied}>
|
||||
{copied ? (
|
||||
<div className="flex items-center rounded bg-emerald-200 px-2 py-1 text-slate-600 transition hover:cursor-pointer hover:bg-emerald-200">
|
||||
<p className="font-sans text-emerald-700 hover:text-emerald-700">
|
||||
Copied!
|
||||
</p>
|
||||
<div
|
||||
className={classNames(
|
||||
"flex items-center hover:cursor-pointer",
|
||||
variantStyle[variant]
|
||||
)}
|
||||
>
|
||||
<p className="font-sans">Copied!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className={classNames(
|
||||
"flex items-center rounded px-2 py-1 hover:cursor-pointer",
|
||||
"flex items-center hover:cursor-pointer",
|
||||
variantStyle[variant]
|
||||
)}
|
||||
>
|
||||
|
||||
@@ -4,6 +4,9 @@ import {
|
||||
UsersIcon,
|
||||
ForwardIcon,
|
||||
ChevronLeftIcon,
|
||||
ArrowTopRightOnSquareIcon,
|
||||
PhoneArrowUpRightIcon,
|
||||
EnvelopeIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { Link, NavLink } from "@remix-run/react";
|
||||
import {
|
||||
@@ -11,7 +14,11 @@ import {
|
||||
useOrganizations,
|
||||
} from "~/hooks/useOrganizations";
|
||||
import { useCurrentWorkflow } from "~/hooks/useWorkflows";
|
||||
import { Body } from "../primitives/text/Body";
|
||||
import { Header1 } from "../primitives/text/Headers";
|
||||
import { useTypedLoaderData } from "remix-typedjson";
|
||||
import type { loader } from "~/routes/__app/orgs/$organizationSlug";
|
||||
import { CopyTextButton } from "../CopyTextButton";
|
||||
|
||||
export function SideMenuContainer({ children }: { children: React.ReactNode }) {
|
||||
return <div className="grid grid-cols-[300px_2fr] h-full">{children}</div>;
|
||||
@@ -88,44 +95,115 @@ const activeStyle =
|
||||
"group flex items-center gap-2 px-3 py-3 text-base rounded transition bg-slate-800 text-white";
|
||||
|
||||
function SideMenu({ title, items }: { title: string; items: SideMenuItem[] }) {
|
||||
// const { organization } = useTypedLoaderData<typeof loader>();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col bg-slate-1000 border-r border-slate-800">
|
||||
<div className="flex flex-1 flex-col overflow-y-auto pb-4">
|
||||
<nav
|
||||
className="mt-2 flex-1 space-y-1 bg-slate-1000 px-2"
|
||||
className="mt-2 flex flex-col h-full justify-between space-y-1 bg-slate-1000 px-2"
|
||||
aria-label="Sidebar"
|
||||
>
|
||||
<div className="group flex items-center my-2 text-slate-400 rounded hover:bg-slate-900 transition divide-x divide-transparent hover:divide-slate-900">
|
||||
<Link
|
||||
to="/"
|
||||
className="px-2 py-3 hover:bg-slate-800 rounded-l transition"
|
||||
>
|
||||
<ChevronLeftIcon className="h-5 w-5 text-slate-400" />
|
||||
</Link>
|
||||
<div>
|
||||
<div className="group flex items-center my-2 text-slate-400 rounded hover:bg-slate-900 transition divide-x divide-transparent hover:divide-slate-900">
|
||||
<Link
|
||||
to="/"
|
||||
className="px-2 py-3 hover:bg-slate-800 rounded-l transition"
|
||||
>
|
||||
<ChevronLeftIcon className="h-5 w-5 text-slate-400" />
|
||||
</Link>
|
||||
|
||||
<Header1
|
||||
size="regular"
|
||||
className="pl-2 py-2 w-full text-slate-400 rounded-r hover:bg-slate-800 transition"
|
||||
>
|
||||
<Link to="">{title}</Link>
|
||||
</Header1>
|
||||
<Header1
|
||||
size="regular"
|
||||
className="pl-2 py-2 w-full text-slate-400 rounded-r hover:bg-slate-800 transition"
|
||||
>
|
||||
<Link to="">{title}</Link>
|
||||
</Header1>
|
||||
</div>
|
||||
|
||||
{items.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
to={item.to}
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeStyle : defaultStyle
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col gap-6">
|
||||
<ul className="flex flex-col gap-2 ml-3 mr-2">
|
||||
<li>
|
||||
<Body size="extra-small" className={menuSmallTitleStyle}>
|
||||
API Keys
|
||||
</Body>
|
||||
</li>
|
||||
{/* {organization.environments.map((environment) => {
|
||||
return (
|
||||
<li key={environment.id} className="flex justify-between w-full">
|
||||
<Body size="small" className="text-slate-400">
|
||||
{environment.slug}: <span className="select-all">{environment.apiKey}</span>
|
||||
</Body>
|
||||
<CopyTextButton variant="text" value={environment.apiKey} />
|
||||
</li>
|
||||
);
|
||||
})} */}
|
||||
<li className="flex justify-between w-full">
|
||||
<Body size="small" className="text-slate-400">
|
||||
Dev: <span className="select-all">Jgfisd9Kd*&jdfks</span>
|
||||
</Body>
|
||||
<CopyTextButton variant="text" value={"sdfgsdfg"} />
|
||||
</li>
|
||||
<li className="flex justify-between w-full">
|
||||
<Body size="small" className="text-slate-400">
|
||||
Prod: <span className="select-all">Jgfisd9Kd*&jdfks</span>
|
||||
</Body>
|
||||
<CopyTextButton variant="text" value={"sdfgsdfg"} />
|
||||
</li>
|
||||
</ul>
|
||||
<ul className="flex flex-col gap-2 ml-3">
|
||||
<li>
|
||||
<Body size="extra-small" className={menuSmallTitleStyle}>
|
||||
Help and resources
|
||||
</Body>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/" target="_blank" className={menuSmallLinkStyle}>
|
||||
<ArrowTopRightOnSquareIcon className={menuSmallIconStyle} />
|
||||
Documentation
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/" target="_blank" className={menuSmallLinkStyle}>
|
||||
<ArrowTopRightOnSquareIcon className={menuSmallIconStyle} />
|
||||
Quick start guide
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/" target="_blank" className={menuSmallLinkStyle}>
|
||||
<PhoneArrowUpRightIcon className={menuSmallIconStyle} />
|
||||
Schedule a call
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/" target="_blank" className={menuSmallLinkStyle}>
|
||||
<EnvelopeIcon className={menuSmallIconStyle} />
|
||||
Contact us
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{items.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
to={item.to}
|
||||
end
|
||||
className={({ isActive }) =>
|
||||
isActive ? activeStyle : defaultStyle
|
||||
}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const menuSmallTitleStyle = "uppercase text-slate-500 tracking-wide";
|
||||
const menuSmallLinkStyle =
|
||||
"flex gap-1.5 text-slate-400 hover:text-white text-sm items-center transition";
|
||||
const menuSmallIconStyle = "h-4 w-4";
|
||||
|
||||
Reference in New Issue
Block a user