mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 06:39:09 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
63 lines
2.0 KiB
TypeScript
63 lines
2.0 KiB
TypeScript
import { useParams } from 'common'
|
|
import Link from 'next/link'
|
|
import { Button } from 'ui'
|
|
|
|
import SimpleCodeBlock from 'components/to-be-cleaned/SimpleCodeBlock'
|
|
import { Markdown } from '../Markdown'
|
|
import { ExternalLink } from 'lucide-react'
|
|
|
|
interface ResourceContentProps {
|
|
selectedLanguage: 'js' | 'bash'
|
|
snippet: {
|
|
key: string
|
|
title: string
|
|
description?: string
|
|
docsUrl?: string
|
|
}
|
|
codeSnippets: any[]
|
|
}
|
|
|
|
const ResourceContent = ({ selectedLanguage, snippet, codeSnippets }: ResourceContentProps) => {
|
|
const { ref: projectRef } = useParams()
|
|
|
|
return (
|
|
<div id={snippet.key} className="space-y-4 py-6">
|
|
<div className="px-4 space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="doc-heading">{snippet.title}</h2>
|
|
{snippet.docsUrl !== undefined && (
|
|
<Button asChild type="default" icon={<ExternalLink />}>
|
|
<Link href={snippet.docsUrl} target="_blank" rel="noreferrer">
|
|
Documentation
|
|
</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
{snippet.description !== undefined && (
|
|
<div className="doc-section">
|
|
<article className="text text-sm text-foreground-light">
|
|
<Markdown
|
|
className="max-w-none"
|
|
content={snippet.description.replaceAll('[ref]', projectRef ?? '_')}
|
|
/>
|
|
</article>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{codeSnippets.map((codeSnippet) => (
|
|
<div key={codeSnippet.key} className="px-4 space-y-2">
|
|
<p className="text-sm text-foreground-light">{codeSnippet.title}</p>
|
|
<div className="codeblock-container">
|
|
<div className="bg rounded p-2">
|
|
<SimpleCodeBlock className={selectedLanguage}>
|
|
{codeSnippet[selectedLanguage]}
|
|
</SimpleCodeBlock>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
export default ResourceContent
|