Skip to content

Documentation Page Design Updated. #116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Arifulislam5577 merged 1 commit into from
Dec 27, 2023
Merged

Documentation Page Design Updated. #116

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/components/CodePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,16 @@ interface CodePreviewProps {
const CodePreview = ({ children, code, github }: CodePreviewProps) => {
const [active, setActive] = useState(0)
const { copy, copyToClipboard } = useCopy()
const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/src/components/${github}`
const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`

return (
<div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
<div className="-mb-px flex flex-wrap border-b border-metal-200 bg-white px-5 text-center">
<div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
<button
type="button"
onClick={() => setActive(0)}
className={`-mb-[0.7px] flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
active === 0 ? '!border-b-metal-900 text-metal-900' : ''
active === 0 ? '!border-b-white text-white' : ''
}`}
id="preview-btn">
Preview
Expand All @@ -33,7 +33,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
id="code-btn"
onClick={() => setActive(1)}
className={` flex items-center justify-center border-b border-b-transparent px-5 py-3 text-body-5 font-medium text-metal-400 first:ml-0 ${
active === 1 ? '!border-b-metal-900 text-metal-900' : ''
active === 1 ? '!border-b-metal-100 text-white' : ''
}`}>
Code
</button>
Expand Down Expand Up @@ -81,7 +81,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
</SyntaxHighlighter>
</div>
) : (
<div className="flex w-full items-center justify-center px-2 py-3 md:p-6">
<div className="flex w-full items-center justify-center bg-white px-2 py-3 md:p-6">
<div className="h-full w-full overflow-auto">{children}</div>
</div>
)}
Expand Down
52 changes: 23 additions & 29 deletions app/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { usePathname } from 'next/navigation'
import { List, MagnifyingGlass, X } from 'phosphor-react'
import Search from './Search'
import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes'
import { Accordion } from '../src'
import { Accordion, Typography } from '../src'

const Navbar = () => {
const [active, setActive] = useState(false)
Expand Down Expand Up @@ -143,77 +143,71 @@ const Navbar = () => {
active ? 'translate-x-0' : 'translate-x-full'
}`}>
<div className="mt-5 space-y-3 pr-4">
<Accordion flush className="border-none bg-transparent">
<Accordion flush>
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-5 font-semibold text-metal-900">Quick Link</Accordion.Title>
<Accordion.Title className="text-body-4 font-semibold text-metal-900">Quick Link</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
<Typography variant="ul" className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
{navbarRoutes.map((route) => (
<li key={route.id}>
<Typography variant="li" key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
: ''
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
}`}
href={route.href}>
{route.name}
</Link>
</li>
</Typography>
))}
</ul>
</Typography>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
<Accordion flush className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-5 font-semibold text-metal-900">
<Accordion.Title className="text-body-4 font-semibold text-metal-900">
Getting Started
</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
<Typography variant="ul" className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
{gettingStartedRoutes.map((route) => (
<li key={route.id}>
<Typography variant="li" key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
: ''
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
}`}
href={route.href}>
{route.name}
</Link>
</li>
</Typography>
))}
</ul>
</Typography>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
<Accordion flush className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-5 font-semibold text-metal-900">Components</Accordion.Title>
<Accordion.Title className="text-body-4 font-semibold text-metal-900">Components</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
<Typography variant="ul" className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
{routes.map((route) => (
<li key={route.id}>
<Typography variant="li" key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
: ''
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href) ? 'border-l !border-primary-500 !text-primary-500' : ''
}`}
href={route.href}>
{route.name}
</Link>
</li>
</Typography>
))}
</ul>
</Typography>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
Expand Down
22 changes: 22 additions & 0 deletions app/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,12 @@
@apply border-l-metal-900 text-metal-900 transition-colors duration-300 hover:text-metal-900 active:text-metal-900;
}

#componentListSidebar::-webkit-scrollbar {
display: none;
}

#linkPage::-webkit-scrollbar {
display: none;
width: 4px !important;
}
#linkPage::-webkit-scrollbar-track {
Expand All @@ -74,6 +79,23 @@
background-color: #e9eff6 !important;
}

body::-webkit-scrollbar {
width: 8px !important;
}
body::-webkit-scrollbar-track {
background-color: transparent !important;
}
body::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: #333 !important;
}

.tabActive {
@apply border-b-metal-900 !text-metal-900;
}

.docs-page {
position: relative;
border-radius: 16px;
background-image: linear-gradient(0deg, #f2f5ff 0%, #fff 100%);
}
3 changes: 2 additions & 1 deletion app/docs/components/notification/variant/DefaultNotification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ const DefaultNotification = () => {
const onDismiss = () => {
setShowNotification(!showNotification)
}

return (
<div className="px-5 py-3">
<Button onClick={onDismiss} type="primary">
Show Notification
</Button>
<Notification dismiss={showNotification} onDismiss={onDismiss}>
<Notification position="bottom-left" dismiss={showNotification} onDismiss={onDismiss}>
<Notification.Body>
<Notification.Title>Can we store cookies?</Notification.Title>
<Notification.Description>
Expand Down
2 changes: 1 addition & 1 deletion app/docs/components/notification/variant/NotificationWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const NotificationWithIcon = () => {
<Button type="primary" onClick={onDismiss}>
Show Notification
</Button>
<Notification dismiss={showNotification} onDismiss={onDismiss} className="max-w-[400px]" position="top-left">
<Notification dismiss={showNotification} onDismiss={onDismiss} className="max-w-[400px]" position="bottom-right">
<Notification.Container className="grid grid-cols-12">
<Notification.Icon className="col-span-2">
<Cookie size={24} color="#3D4A5C" />
Expand Down
154 changes: 79 additions & 75 deletions app/docs/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* eslint-disable no-undef */
'use client'
import Link from 'next/link'
import { Accordion } from '../src'
import { Accordion, Typography } from '../src'
import { ReactNode, useEffect, useState } from 'react'
import { usePathname } from 'next/navigation'
import { gettingStartedRoutes, routes } from '../../routes/routes'
Expand All @@ -15,7 +15,6 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
const pathname = usePathname()
const [activeSection, setActiveSection] = useState<string>('')
const [allSection, setAllSection] = useState<NodeListOf<Element> | []>([])

const [tableOfContents, setTableOfContents] = useState<HTMLUListElement | null>(null)

// get the table of contents
Expand Down Expand Up @@ -54,7 +53,6 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
})
}

// On this page active section html
const innerHtml = tableOfContents?.innerHTML

useEffect(() => {
Expand All @@ -80,81 +78,87 @@ const DocsLayout = ({ children }: { children: ReactNode }) => {
}, [newIdArr])

return (
<section className="pt-12 2xl:container">
<aside
id="linkPage"
className="fixed left-0 top-20 z-20 hidden h-screen overflow-y-auto border-r border-r-metal-100 bg-white pt-8 lg:block lg:w-[calc(100vw-75vw)] 2xl:w-[calc(100%-75%)] 4k:w-[calc(100%-78%)]">
<div className="ml-auto w-56 space-y-3 pr-3">
<Accordion flush openFirstPanel className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-5 font-semibold text-metal-900">Getting Started</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
{gettingStartedRoutes.map((route) => (
<li key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
: ''
}`}
href={route.href}>
{route.name}
</Link>
</li>
))}
</ul>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
<Accordion openFirstPanel flush className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-5 font-semibold text-metal-900">Components</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
{routes.map((route) => (
<li key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 leading-[28px] tracking-[-0.2px] text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-metal-900 text-metal-900 transition-all duration-150'
: ''
}`}
href={route.href}>
{route.name}
</Link>
</li>
))}
</ul>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
<section>
<div className="sticky top-20 z-30 hidden h-20 w-full bg-white md:bg-primary-25 lg:block"></div>
<div className="docs-page fixed left-0 right-0 -z-0 mx-auto hidden h-2/3 lg:block xl:max-w-[1560px] 4k:max-w-[2000px]"></div>
<div className="container relative z-20 grid grid-cols-12 gap-5 md:pt-16">
<div className="hidden lg:col-span-3 lg:block xl:col-span-2">
<aside
id="componentListSidebar"
className="keep-shadow sticky top-56 h-[80vh] space-y-5 overflow-auto py-6 pl-8">
<Accordion flush openFirstPanel className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-4 font-semibold text-metal-900">
Getting Started
</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<Typography variant="ul" className="-ml-px mt-3 space-y-1.5 border-l border-l-metal-100">
{gettingStartedRoutes.map((route) => (
<Typography variant="li" key={route.id}>
<Link
className={`duration-150' -ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 transition-colors hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href) ? 'border-l !border-primary-500 text-primary-500' : ''
}`}
href={route.href}>
{route.name}
</Link>
</Typography>
))}
</Typography>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
<Accordion openFirstPanel flush className="border-none bg-transparent">
<Accordion.Panel>
<Accordion.Container className="p-0">
<Accordion.Title className="text-body-4 font-semibold text-metal-900">Components</Accordion.Title>
</Accordion.Container>
<Accordion.Content className="p-0">
<Typography variant="ul" className="mb-4 mt-3 space-y-1.5 border-l border-l-metal-100">
{routes.map((route) => (
<Typography variant="li" key={route.id}>
<Link
className={`-ml-px border-l border-l-transparent pl-3 text-body-5 font-medium text-metal-500 hover:-ml-px hover:border-l hover:border-metal-500 hover:text-metal-900 ${
IsActive(route.href)
? 'border-l !border-primary-500 text-primary-500 transition-colors duration-150'
: ''
}`}
href={route.href}>
{route.name}
</Link>
</Typography>
))}
</Typography>
</Accordion.Content>
</Accordion.Panel>
</Accordion>
</aside>
</div>
</aside>
<main className="mx-auto md:w-[calc(100vw-10vw)] lg:w-[calc(100vw-5vw)] lg:pl-[calc(100vw-75vw)] xl:w-[calc(100vw-25vw)] xl:pl-[calc(100vw-85vw)] xl:pr-[calc(100vw-95vw)] 2xl:w-[calc(100vw-40vw)] 2xl:pl-[calc(100vw-93vw)] 2xl:pr-[calc(100vw-98vw)] 4k:w-[calc(100vw-49vw)] 4k:pl-[calc(100vw-100vw)] 4k:pr-[calc(100vw-95vw)]">
<div className="overflow-y-auto px-4 pb-10">{children}</div>
</main>
<aside
id="linkPage"
className="fixed bottom-0 right-[max(0px,calc(50%-51rem))] top-16 z-20 hidden h-[calc(100vh-3rem)] overflow-y-auto pt-12 lg:w-[calc(100vw-80vw)] xl:block xl:w-[calc(100vw-82vw)] 2xl:w-[calc(100vw-86vw)] 4k:w-[calc(100vw-88vw)]">
<div className="pl-5">
<div className="flex flex-col justify-between overflow-y-auto">
<h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
<nav id="visible-table-of-contents">
<ul
dangerouslySetInnerHTML={{
__html: innerHtml ? innerHtml : '',
}}
className="border-l border-l-metal-100"
/>
</nav>
<div className="col-span-12 p-4 md:p-4 lg:col-span-9 xl:col-span-8">
<div id="linkPage" className="overflow-y-auto">
{children}
</div>
</div>
</aside>
<div className="hidden lg:col-span-3 lg:block xl:col-span-2">
<aside id="linkPage" className="sticky top-56 h-[80vh]">
<div className="pl-5">
<div className="flex flex-col justify-between overflow-y-auto">
<h4 className="mb-2 text-body-5 font-semibold uppercase text-black/100">On this page</h4>
<nav id="visible-table-of-contents">
<ul
dangerouslySetInnerHTML={{
__html: innerHtml ? innerHtml : '',
}}
className="border-l border-l-metal-100"
/>
</nav>
</div>
</div>
</aside>
</div>
</div>
</section>
)
}
Expand Down
Loading