asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: redesign tabs (#5687)

Browse Source 
* redesigned tabs

* design fixes
This commit is contained in:
Shahed Nasser
2023-11-22 16:01:51 +00:00
committed by GitHub
parent dc5750dd66
commit 00d59e28e9
2 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
www/apps/docs/content/development/backend/prepare-environment.mdx
View File

@@ -69,6 +69,8 @@ node -v
</TabItem>
</Tabs>
---
## Git
Medusa uses Git behind the scenes when you create a new project. So, you'll have to install it on your machine to get started.
@@ -99,6 +101,8 @@ Medusa uses Git behind the scenes when you create a new project. So, you'll have
</TabItem>
</Tabs>
---
## PostgreSQL
The Medusa backend uses PostgreSQL to store data of your commerce system.
@@ -126,6 +130,8 @@ The Medusa backend uses PostgreSQL to store data of your commerce system.
</TabItem>
</Tabs>
---
## (Optional) Medusa CLI
Medusa provides a CLI tool that can aid your through your Medusa development. You can install it globally, or you can use it through `npx`.

46
www/apps/docs/src/theme/Tabs/index.tsx
View File

@@ -110,7 +110,7 @@ function TabList({
return (
<div
className={clsx(isCodeTabs && "code-header", !isCodeTabs && "[&+*]:pt-2")}
className={clsx(isCodeTabs && "code-header", !isCodeTabs && "[&+*]:pt-1")}
>
<div
className={clsx(isCodeTabs && "relative overflow-auto")}
@@ -129,8 +129,10 @@ function TabList({
aria-orientation="horizontal"
className={clsx(
"tabs",
isCodeTabs && "no-scrollbar",
"list-none",
isCodeTabs && "no-scrollbar",
!isCodeTabs &&
"overflow-visible border-0 border-b border-solid border-medusa-border-base pb-1",
className
)}
>
@@ -146,29 +148,28 @@ function TabList({
onClick={handleTabChange}
{...attributes}
className={clsx(
isCodeTabs &&
isCodeTabs && [
"text-compact-small-plus py-0.25 border border-solid border-transparent whitespace-nowrap rounded-full [&:not(:first-child)]:ml-0.25",
"!mt-0 cursor-pointer",
attributes?.className,
isCodeTabs && "z-[2] flex justify-center items-center",
isCodeTabs &&
"z-[2] flex justify-center items-center",
selectedValue !== value &&
"text-medusa-code-text-subtle hover:!bg-medusa-code-bg-base",
isCodeTabs &&
"text-medusa-code-text-subtle hover:!bg-medusa-code-bg-base",
selectedValue === value &&
"text-medusa-code-text-base border border-solid border-medusa-code-border bg-medusa-code-bg-base xs:!border-none xs:!bg-transparent",
!isCodeTabs &&
"border-0 border-b-[3px] rounded inline-flex p-1 transition-[background-color] duration-200 ease-ease",
!isCodeTabs &&
selectedValue === value &&
"border-solid border-medusa-fg-base rounded-b-none",
!isCodeTabs &&
selectedValue !== value &&
"text-medusa-fg-subtle",
(!isCodeTabs || !attributes?.badge) && "px-0.75",
isCodeTabs &&
"text-medusa-code-text-base border border-solid border-medusa-code-border bg-medusa-code-bg-base xs:!border-none xs:!bg-transparent",
attributes?.badge &&
"[&_.badge]:ml-0.5 [&_.badge]:py-0.125 [&_.badge]:px-[6px] [&_.badge]:rounded-full pl-0.75 pr-0.25"
"[&_.badge]:ml-0.5 [&_.badge]:py-0.125 [&_.badge]:px-[6px] [&_.badge]:rounded-full pl-0.75 pr-0.25",
!attributes?.badge && "px-0.75",
],
!isCodeTabs && [
"[&:not(:last-child)]:mr-0.5 px-0.75 py-[6px] txt-compact-small-plus",
"border-0 rounded-full transition-shadow duration-200 ease-ease",
selectedValue === value &&
"text-medusa-fg-base shadow-card-rest dark:shadow-card-rest-dark",
selectedValue !== value &&
"text-medusa-fg-subtle hover:text-medusa-fg-base",
"flex gap-0.5",
],
"!mt-0 cursor-pointer",
attributes?.className
)}
>
{label ?? value}
@@ -251,8 +252,7 @@ export default function Tabs(props: TabsProps): JSX.Element {
"tabs-wrapper",
props.wrapperClassName,
isCodeTabs && "code-tabs",
!isCodeTabs &&
"bg-docs-bg-surface p-1 border border-solid border-medusa-border-base rounded"
!isCodeTabs && "my-4"
)}
>
<TabsComponent