Skip to content

Commit

Permalink
New showcase implementation #5258
Browse files Browse the repository at this point in the history
  • Loading branch information
@gucal
gucal committed Nov 8, 2023
1 parent 9718c99 commit 0e6cc5b
Show file tree
Hide file tree
Showing 46 changed files with 1,738 additions and 2,043 deletions.
96 changes: 47 additions & 49 deletions components/doc/common/docsectioncode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,47 +32,21 @@ export function DocSectionCode(props) {
return (
<>
{!props.embedded && (
<div className="relative doc-section-code">
{codeMode === 'basic' && (
<div className={props.codeClassName}>
<CodeHighlight code {...props}>
{props.code.basic}
</CodeHighlight>
</div>
)}
{codeMode === 'data' && (
<div className={props.codeClassName}>
<CodeHighlight code lang={'json'}>
{props.code.data}
</CodeHighlight>
</div>
)}
{codeMode !== 'basic' && codeLang === 'javascript' && (
<div className={props.codeClassName}>
<CodeHighlight code>{props.code.javascript}</CodeHighlight>
</div>
)}
{codeMode !== 'basic' && codeLang === 'typescript' && (
<div className={props.codeClassName}>
<CodeHighlight code lang={'tsx'}>
{props.code.typescript}
</CodeHighlight>
</div>
)}
<div className="flex surface-card align-items-center justify-content-end absolute" style={{ right: '.75rem', top: '.75rem', gap: '.75rem' }}>
<div className="doc-section-code">
<div className="doc-section-code-buttons scalein animation-duration-300">
{codeMode !== 'basic' && !props.hideToggleCode && codeMode !== 'data' && (
<>
<Button
className={classNames('p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center', {
'doc-section-code-active text-primary': codeLang === 'javascript' && codeMode !== 'data'
className={classNames('py-0 px-2 border-round h-2rem', {
'code-active': codeLang === 'javascript' && codeMode !== 'data'
})}
label="JS"
onClick={() => setCodeLang('javascript')}
tooltip="JavaScript Code"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
></Button>
<Button
className={classNames('p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' })}
className={classNames('py-0 px-2 border-round h-2rem', { 'code-active': codeLang === 'typescript' })}
label="TS"
onClick={() => setCodeLang('typescript')}
tooltip="TypeScript Code"
Expand All @@ -85,57 +59,81 @@ export function DocSectionCode(props) {
<Button
type="button"
onClick={() => toggleCodeMode('javascript')}
className="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
icon="pi pi-code"
className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
tooltip="Toggle Full Code"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
></Button>
>
<i class="pi pi-code"></i>
</Button>
)}
{!props.hideToggleCode && props.code.data ? (
<Button
type="button"
onClick={() => setCodeMode('data')}
className="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
icon="pi pi-database"
className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
tooltip="View Data"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
></Button>
>
<i class="pi pi-database"></i>
</Button>
) : null}
{!props.hideCodeSandbox && (
<Button
type="button"
className="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
tooltip="Edit in CodeSandbox"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
onClick={() => codeEditor.openCodeSandbox(codeLang)}
>
<svg role="img" viewBox="0 0 24 24" width={16} height={16} fill={'var(--text-color-secondary)'} style={{ display: 'block' }}>
<svg role="img" viewBox="0 0 24 24" width={16} height={16} fill={'currentColor'} style={{ display: 'block' }}>
<path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z" />
</svg>
</Button>
)}
{!props.hideStackBlitz && (
<Button
type="button"
className="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
tooltip="Edit in StackBlitz"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
onClick={() => codeEditor.openStackBlitz(codeLang)}
>
<svg role="img" viewBox="0 0 24 24" width={16} height={16} fill={'var(--text-color-secondary)'} style={{ display: 'block' }}>
<svg role="img" viewBox="0 0 24 24" width={16} height={16} fill={'currentColor'} style={{ display: 'block' }}>
<path d="M0 15.98H8.15844L3.40299 27.26L19 11.1945H10.7979L15.5098 0L0 15.98Z" />
</svg>
</Button>
)}
<Button
type="button"
onClick={copyCode}
className="p-button-rounded p-button-text p-button-plain h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center"
icon="pi pi-copy"
tooltip="Copy Code"
tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
></Button>
<Button type="button" onClick={copyCode} className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center" tooltip="Copy Code" tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}>
<i class="pi pi-copy"></i>
</Button>
</div>

{codeMode === 'basic' && (
<div className={props.codeClassName}>
<CodeHighlight code {...props}>
{props.code.basic}
</CodeHighlight>
</div>
)}
{codeMode === 'data' && (
<div className={props.codeClassName}>
<CodeHighlight code lang={'json'}>
{props.code.data}
</CodeHighlight>
</div>
)}
{codeMode !== 'basic' && codeLang === 'javascript' && (
<div className={props.codeClassName}>
<CodeHighlight code>{props.code.javascript}</CodeHighlight>
</div>
)}
{codeMode !== 'basic' && codeLang === 'typescript' && (
<div className={props.codeClassName}>
<CodeHighlight code lang={'tsx'}>
{props.code.typescript}
</CodeHighlight>
</div>
)}
</div>
)}
{props.embedded && <div id="embed"></div>}
Expand Down
Loading

0 comments on commit 0e6cc5b

Please sign in to comment.