Skip to content

Commit 3d55332

Browse files
shairezshairez
committed
docs: improved api table design
1 parent e494473 commit 3d55332

File tree

5 files changed

+134
-146
lines changed

5 files changed

+134
-146
lines changed

‎.prettierrc

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
11
{
2-
"singleQuote": true
2+
"semi": true,
3+
"singleQuote": true,
4+
"trailingComma": "none",
5+
"printWidth": 90
36
}

‎apps/website/src/routes/_components/header/header.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,13 @@ export default component$(
2929
if (selectedKitSig.value === KitName.HEADLESS) {
3030
return {
3131
name: 'Headless',
32-
version: headlessVersion,
32+
version: headlessVersion
3333
};
3434
}
3535
if (selectedKitSig.value === KitName.TAILWIND) {
3636
return {
3737
name: 'Tailwind',
38-
version: tailwindVersion,
38+
version: tailwindVersion
3939
};
4040
}
4141
});
@@ -47,13 +47,12 @@ export default component$(
4747
return (
4848
<header
4949
class={[
50-
`fixed top-0 w-full h-20 md:h-20 z-20 lg:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
50+
`fixed top-0 w-full h-20 md:h-20 z-20 md:bg-[var(--color-bg)] flex gap-8 p-4 items-center`,
51+
`ease-in-out duration-300`,
5152
rootStore.isSidebarOpened
5253
? 'bg-blue-200 brightness-75 dark:bg-indigo-900'
53-
: '',
54-
showBottomBorder
55-
? `border-b-[1px] border-slate-300 dark:border-slate-600`
56-
: ``,
54+
: 'bg-[var(--color-bg)]',
55+
showBottomBorder ? `border-b-[1px] border-slate-300 dark:border-slate-600` : ``
5756
]}
5857
>
5958
<section class="flex flex-col md:flex-row gap-1 md:gap-8 mr-auto">
@@ -83,11 +82,7 @@ export default component$(
8382
{/* <a href="/contact">Contact</a> */}
8483
</nav>
8584

86-
<button
87-
type="button"
88-
aria-label="Toggle dark mode"
89-
onClick$={toggleDarkMode}
90-
>
85+
<button type="button" aria-label="Toggle dark mode" onClick$={toggleDarkMode}>
9186
{rootStore.mode === 'dark' ? <MoonIcon /> : <SunIcon />}
9287
</button>
9388
<a

‎apps/website/src/routes/docs/_components/api-table/api-table.tsx

Lines changed: 63 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import { component$ } from '@builder.io/qwik';
2-
import { Tooltip } from '@qwik-ui/headless';
32
import { Popover, PopoverContent, PopoverTrigger } from '@qwik-ui/headless';
4-
import {} from '@qwik-ui/headless';
5-
import { Button } from '@qwik-ui/tailwind';
63
type APITableProps = {
74
propDescriptors: {
85
name: string;
@@ -14,66 +11,68 @@ type APITableProps = {
1411

1512
export const APITable = component$(({ propDescriptors }: APITableProps) => {
1613
return (
17-
<table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
18-
<tbody class="divide-y divide-gray-700">
19-
<tr class="w-1/4 text-white">
20-
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
21-
Prop
22-
</td>
23-
<td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium">Type</td>
24-
<td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium">
25-
Description
26-
</td>
27-
</tr>
28-
{propDescriptors?.map((propDescriptor) => {
29-
return (
30-
<tr key={propDescriptor.name}>
31-
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
32-
<code>{propDescriptor.name}</code>
33-
</td>
34-
<td class="prose prose-sm py-3 align-baseline">
35-
<span class="flex items-center">
36-
<code>{propDescriptor.type}</code>
37-
{propDescriptor.info && (
38-
<Popover placement="top">
39-
<PopoverContent>
40-
<div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2 rounded-md">
41-
{propDescriptor?.info}
42-
</div>
43-
</PopoverContent>
44-
<PopoverTrigger>
45-
<div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
46-
<svg
47-
width="15"
48-
height="15"
49-
viewBox="0 0 15 15"
50-
fill="none"
51-
xmlns="http://www.w3.org/2000/svg"
52-
aria-hidden="true"
53-
focusable="false"
54-
>
55-
<path
56-
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
57-
fill="currentColor"
58-
fill-rule="evenodd"
59-
clip-rule="evenodd"
60-
></path>
61-
</svg>
62-
</div>{' '}
63-
</PopoverTrigger>
64-
</Popover>
65-
)}
66-
</span>
67-
</td>
68-
<td class="py-3 align-baseline">
69-
<div class="prose prose-sm prose-docs-table">
70-
<p>{propDescriptor.description}</p>
71-
</div>
72-
</td>
73-
</tr>
74-
);
75-
})}
76-
</tbody>
77-
</table>
14+
<div class="overflow-x-auto">
15+
<table class="w-full min-w-[540px] border-b border-gray-700 text-left sm:min-w-full">
16+
<tbody class="divide-y divide-gray-700">
17+
<tr class="w-1/4 text-white">
18+
<td class="w-1/6 whitespace-nowrap py-2 pl-4 text-sm font-medium sm:pl-0">
19+
Prop
20+
</td>
21+
<td class="w-1/6 whitespace-nowrap py-2 text-sm font-medium">Type</td>
22+
<td class="w-2/3 whitespace-nowrap py-2 text-sm font-medium">Description</td>
23+
</tr>
24+
{propDescriptors?.map((propDescriptor) => {
25+
return (
26+
<tr key={propDescriptor.name}>
27+
<td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0 ">
28+
<code class="bg-indigo-900 rounded-md">{propDescriptor.name}</code>
29+
</td>
30+
<td class="prose prose-sm py-3 align-baseline">
31+
<span class="flex items-center">
32+
<code class="bg-gray-300 dark:bg-gray-700 rounded-md ">
33+
{propDescriptor.type}
34+
</code>
35+
{propDescriptor.info && (
36+
<Popover placement="top">
37+
<PopoverContent>
38+
<div class="bg-[#202425] text-[#7881fa] max-w-xs mb-2 text-md px-4 py-2 rounded-md">
39+
{propDescriptor?.info}
40+
</div>
41+
</PopoverContent>
42+
<PopoverTrigger>
43+
<div class="hover:bg-slate-500 hover:bg-opacity-50 h-[31px] mt-2 p-2 rounded-md">
44+
<svg
45+
width="15"
46+
height="15"
47+
viewBox="0 0 15 15"
48+
fill="none"
49+
xmlns="http://www.w3.org/2000/svg"
50+
aria-hidden="true"
51+
focusable="false"
52+
>
53+
<path
54+
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
55+
fill="currentColor"
56+
fill-rule="evenodd"
57+
clip-rule="evenodd"
58+
></path>
59+
</svg>
60+
</div>{' '}
61+
</PopoverTrigger>
62+
</Popover>
63+
)}
64+
</span>
65+
</td>
66+
<td class="py-3 align-baseline">
67+
<div class="prose prose-sm prose-docs-table">
68+
<p>{propDescriptor.description}</p>
69+
</div>
70+
</td>
71+
</tr>
72+
);
73+
})}
74+
</tbody>
75+
</table>
76+
</div>
7877
);
7978
});

‎apps/website/src/routes/docs/_components/navigation-docs/navigation-docs.tsx

Lines changed: 55 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -21,72 +21,66 @@ export interface DocsNavigationProps {
2121
isSidebarOpenedSig?: boolean;
2222
}
2323

24-
export const DocsNavigation = component$(
25-
({ linksGroups }: DocsNavigationProps) => {
26-
const rootStore = useRootStore();
27-
const selectedKitSig = useSelectedKit();
28-
const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
24+
export const DocsNavigation = component$(({ linksGroups }: DocsNavigationProps) => {
25+
const rootStore = useRootStore();
26+
const selectedKitSig = useSelectedKit();
27+
const linkStyles = `px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
2928
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`;
30-
return (
31-
<nav
32-
class={`${rootStore.isSidebarOpened ? 'flex w-100' : 'hidden lg:flex'}
33-
flex-col gap-4 fixed top-20 inset-0 z-10 lg:w-80 pb-6
34-
overflow-y-auto bg-blue-200 dark:bg-indigo-900`}
35-
>
36-
<ul class="show lg:hidden pl-12 mt-8 flex flex-col gap-2">
29+
return (
30+
<nav
31+
class={`flex-col gap-4 fixed top-20 inset-0 z-10 lg:w-80 pb-6
32+
overflow-y-auto bg-blue-200 dark:bg-indigo-900
33+
${rootStore.isSidebarOpened ? 'flex w-100' : 'hidden lg:flex'} `}
34+
>
35+
<ul class="show lg:hidden pl-12 mt-8 flex flex-col gap-2">
36+
<li class={linkStyles}>
37+
<a href="/about">About</a>
38+
</li>
39+
{selectedKitSig.value !== KitName.HEADLESS && (
3740
<li class={linkStyles}>
38-
<a href="/about">About</a>
41+
<a href="/docs/headless/introduction">Headless Kit</a>
3942
</li>
40-
{selectedKitSig.value !== KitName.HEADLESS && (
43+
)}
44+
{rootStore.featureFlags?.showTailwind &&
45+
selectedKitSig.value !== KitName.TAILWIND && (
4146
<li class={linkStyles}>
42-
<a href="/docs/headless/introduction">Headless Kit</a>
47+
<a href="/docs/tailwind/introduction">Tailwind Kit</a>
4348
</li>
4449
)}
45-
{rootStore.featureFlags?.showTailwind &&
46-
selectedKitSig.value !== KitName.TAILWIND && (
47-
<li class={linkStyles}>
48-
<a href="/docs/tailwind/introduction">Tailwind Kit</a>
49-
</li>
50-
)}
51-
<li class={linkStyles}>
52-
<a href="https://discord.gg/PVWUUejrez" target="_blank">
53-
Community
54-
</a>
55-
</li>
56-
{/* <a href="/contact">Contact</a> */}
57-
</ul>
58-
{linksGroups?.map((group) => {
59-
return (
60-
<>
61-
<h1 class="pl-12 mt-8 font-medium text-3xl lg:text-lg">
62-
{group.name}
63-
</h1>
64-
<ul class="pl-12 flex flex-col gap-2">
65-
{group.children?.map((link) => {
66-
return (
67-
<li class="pl-4" key={link.name + link.href}>
68-
<a
69-
class={`px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
50+
<li class={linkStyles}>
51+
<a href="https://discord.gg/PVWUUejrez" target="_blank">
52+
Community
53+
</a>
54+
</li>
55+
{/* <a href="/contact">Contact</a> */}
56+
</ul>
57+
{linksGroups?.map((group) => {
58+
return (
59+
<>
60+
<h1 class="pl-12 mt-8 font-medium text-3xl lg:text-lg">{group.name}</h1>
61+
<ul class="pl-12 flex flex-col gap-2">
62+
{group.children?.map((link) => {
63+
return (
64+
<li class="pl-4" key={link.name + link.href}>
65+
<a
66+
class={`px-4 py-2 -ml-4 mr-8 text-xl lg:text-sm flex items-center
7067
rounded-lg hover:bg-[var(--qwik-light-blue)] dark:hover:bg-[var(--qwik-dark-purple)]`}
71-
href={link.href}
72-
>
73-
<div class="flex flex-row gap-2 w-full">
74-
<div class="w-48">{link.name}</div>
75-
<div class="flex-auto">
76-
{link.status && (
77-
<StatusBadge status={link.status} />
78-
)}
79-
</div>
68+
href={link.href}
69+
>
70+
<div class="flex flex-row gap-2 w-full">
71+
<div class="w-48">{link.name}</div>
72+
<div class="flex-auto">
73+
{link.status && <StatusBadge status={link.status} />}
8074
</div>
81-
</a>
82-
</li>
83-
);
84-
})}
85-
</ul>
86-
</>
87-
);
88-
})}
89-
</nav>
90-
);
91-
}
92-
);
75+
</div>
76+
</a>
77+
</li>
78+
);
79+
})}
80+
</ul>
81+
</>
82+
);
83+
})}
84+
</nav>
85+
);
86+
});

‎apps/website/src/routes/layout.tsx

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,14 @@
11
import { Slot, component$, useStyles$ } from '@builder.io/qwik';
22
import { ContentMenu, useContent } from '@builder.io/qwik-city';
3-
import {
4-
ComponentsStatusesMap,
5-
componentsStatuses,
6-
} from '../_state/component-statuses';
3+
import { ComponentsStatusesMap, componentsStatuses } from '../_state/component-statuses';
74
import { KitName } from '../_state/kit-name.type';
85
import { useRootStore } from '../_state/use-root-store';
96
import Header from './_components/header/header';
107
import docsStyles from './docs.css?inline';
118
import {
129
DocsNavigation,
1310
LinkGroup,
14-
LinkProps,
11+
LinkProps
1512
} from './docs/_components/navigation-docs/navigation-docs';
1613
import { useSelectedKit } from './docs/use-selected-kit';
1714
import prismStyles from './prism.css?inline';
@@ -58,7 +55,7 @@ function useKitMenuItems() {
5855
}
5956

6057
return {
61-
menuItemsGroups,
58+
menuItemsGroups
6259
};
6360
}
6461

@@ -72,13 +69,13 @@ function decorateMenuItemsWithBadges(
7269
children: item.items?.map((child) => {
7370
const link: LinkProps = {
7471
name: child.text,
75-
href: child.href,
72+
href: child.href
7673
};
7774
if (kitStatusesMap[link.name]) {
7875
link.status = kitStatusesMap[link.name];
7976
}
8077
return link;
81-
}),
78+
})
8279
};
8380
});
8481
}

0 commit comments

Comments
 (0)