Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-15 02:53:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(website): add typography improvements (#8355)

Browse Source 
* refactor(website): add typography improvements

* chore: bold on hover
This commit is contained in:
Suneet Tipirneni
2022-07-24 15:56:50 -04:00
committed by GitHub
parent 9ae461d84d
commit 4bda24678a
10 changed files with 238 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/website/src/components/ItemSidebar.tsx
View File

@@ -1,7 +1,6 @@
import Link from 'next/link';
import { FiMenu } from 'react-icons/fi';
import { VscPackage } from 'react-icons/vsc';
import { generateIcon } from '~/util/icon';
import type { getMembers } from '~/util/parse.server';
export interface ItemListProps {
@@ -9,6 +8,8 @@ export interface ItemListProps {
data: {
members: ReturnType<typeof getMembers>;
};
selectedMember?: string | undefined;
}
function onMenuClick() {
@@ -16,11 +17,11 @@ function onMenuClick() {
// Todo show/hide list
}
export function ItemSidebar({ packageName, data }: ItemListProps) {
export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
return (
<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-gray border-width-0.5">
<div className=" border-b-solid border-gray border-width-0.5 py-2 sticky top-0">
<h2 className="px-2 font-mono flex items-center m-0 dark:text-white">
<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-0.5 border-gray border-width-0.5">
<div className=" border-b-solid border-0.5 border-gray border-width-0.5 py-2 sticky top-0">
<h2 className="px-2 flex items-center m-0 dark:text-white">
<VscPackage className="px-1" />
{`${packageName}`}
</h2>
@@ -28,12 +29,19 @@ export function ItemSidebar({ packageName, data }: ItemListProps) {
<FiMenu size={32} />
</button>
</div>
<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7">
<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7 space-y-2">
{data.members.map((member, i) => (
<div key={i} className="mb-1">
<div className="flex items-center align-center font-mono no-underline break-all text-blue-500 dark:text-blue-300">
{generateIcon(member.kind, 'px-1')}
<Link href={member.path}>{member.name}</Link>
<div className="flex items-center align-center no-underline break-all text-blue-500 dark:text-blue-300">
<Link href={member.path}>
<a
className={`no-underline m-0 hover:color-black hover:font-semibold ${
selectedMember === member.name ? 'color-black font-semibold' : 'color-gray-600'
}`}
>
{member.name}
</a>
</Link>
</div>
</div>
))}