mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Ali Waseem
e5f12b4252
Two fixes for the [Prisma guide](https://supabase.com/docs/guides/database/prisma): - `StepHikeCompact.Code` marked its whole subtree `not-prose`, so the labels and admonitions that steps interleave with their code samples rendered at 16px with zero margins, flush against the samples and tab bars. Dropping `not-prose` restores body typography and spacing; back-to-back samples now get a gap too, since they have no prose between them. - The guide's three outer tab groups omitted `type`, so they fell back to pill styling — the only pills among 395 `<Tabs>` in the content tree. Fixes DOCS-1327 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved spacing and prose behavior for code samples in the documentation. * Preserved existing code margin customizations. * Updated Prisma guide tabs with a consistent compact, underlined appearance. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
133 lines
3.1 KiB
TypeScript
133 lines
3.1 KiB
TypeScript
import { FC, PropsWithChildren } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
interface IStep {
|
|
title: string
|
|
step: number | string
|
|
}
|
|
|
|
interface IStepHikeCompactSubcomponents {
|
|
Step: FC<IStep>
|
|
Details: FC<IDetails>
|
|
Code: FC<ICode>
|
|
}
|
|
interface IDetails {
|
|
title?: string
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
interface ICode {}
|
|
|
|
interface IStepHikeCompact {
|
|
title: string
|
|
}
|
|
|
|
const StepHikeCompact: FC<PropsWithChildren<IStepHikeCompact>> & IStepHikeCompactSubcomponents = ({
|
|
children,
|
|
title,
|
|
}) => {
|
|
return <div className="py-8">{children}</div>
|
|
}
|
|
|
|
const Step: FC<PropsWithChildren<IStep>> = ({ children, title, step }) => {
|
|
return (
|
|
<div className="relative pb-8 group">
|
|
<div
|
|
className="
|
|
absolute
|
|
w-px
|
|
left-[11px]
|
|
pt-1
|
|
h-full
|
|
"
|
|
>
|
|
<div
|
|
className="
|
|
absolute
|
|
w-full
|
|
h-full
|
|
py-1
|
|
bg-border-control
|
|
group-last:bg-transparent
|
|
"
|
|
></div>
|
|
</div>
|
|
<div
|
|
className="
|
|
absolute
|
|
left-0
|
|
flex gap-3 items-center
|
|
not-prose
|
|
"
|
|
>
|
|
<div className="flex items-center gap-6">
|
|
<div
|
|
className="border bg-surface-100
|
|
border-control flex items-center justify-center rounded-full
|
|
w-6 h-6 text-xs text-foreground font-normal font-mono
|
|
dropshadow-sm
|
|
"
|
|
>
|
|
{step}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
'ml-12 flex min-w-0 flex-col',
|
|
'[&_[data-step-hike=details]+[data-step-hike=code]]:mt-6',
|
|
'[&_[data-step-hike=details]:not(:has(+[data-step-hike=code]))]:mb-6',
|
|
'[&_[data-step-hike=code]]:mb-6',
|
|
'[&_[data-step-hike=code]:last-child]:mb-0'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Details: FC<PropsWithChildren<IDetails>> = ({ children, title, fullWidth = false }) => {
|
|
return (
|
|
<div
|
|
data-step-hike="details"
|
|
className={cn(
|
|
'min-w-0',
|
|
'[&_p:last-child]:mb-0 [&_ul:last-child]:mb-0 [&_ol:last-child]:mb-0',
|
|
fullWidth && 'w-full'
|
|
)}
|
|
>
|
|
{title && (
|
|
<span className="block mt-0 mb-[18px] text-foreground text-base font-heading font-semibold">
|
|
{title}
|
|
</span>
|
|
)}
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Code: FC<PropsWithChildren<ICode>> = ({ children }) => {
|
|
// Not `not-prose`: steps interleave labels and admonitions with their code samples, and
|
|
// stripping prose leaves that text unstyled and flush against the samples.
|
|
return (
|
|
<div
|
|
data-step-hike="code"
|
|
className={cn(
|
|
'min-w-0 w-full',
|
|
// `Step` spaces the block as a whole, so samples don't carry margins of their own...
|
|
'[&_.shiki]:!my-0 [&_.shiki-wrapper]:!my-0',
|
|
// ...but back-to-back samples have no prose between them to separate them.
|
|
'[&_.shiki+.shiki]:!mt-6'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
StepHikeCompact.Step = Step
|
|
StepHikeCompact.Details = Details
|
|
StepHikeCompact.Code = Code
|
|
export default StepHikeCompact
|