Skip to content

Commit

Permalink
Documentation Page Design Updated. (#116)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arifulislam5577
Arifulislam5577 authored Dec 27, 2023
1 parent 590b0aa commit ba41376
Show file tree
Hide file tree
Showing 9 changed files with 148 additions and 116 deletions.
10 changes: 5 additions & 5 deletions app/components/CodePreview.tsx
View file
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
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
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
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
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
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

0 comments on commit ba41376

Please sign in to comment.