mirror of
https://github.com/supabase/supabase.git
synced 2026-10-17 07:09:07 +03:00
Joshen Lim
09a1f431bc
## Context This is largely just a mechanical change here: Opting to use lucide icons with the `Icon` suffix across all icon imports within `studio` - so that it’s clearer which components are icons + reduces the possibility of name collision with our own components - e.g <User /> vs <UserIcon /> Also added a eslint rule for this: <img width="1069" height="167" alt="image" src="https://github.com/user-attachments/assets/7f36f443-5ca2-4bf6-8d22-86e774513bfc" /> And updated `AGENTS.md` as such: ``` Icons come from `lucide-react`, always imported with the `Icon` suffix (`import { CheckIcon, Trash2Icon } from 'lucide-react'`) — never the bare names (`Check`) or `Check as CheckIcon` aliases (lint-enforced). ```
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { CheckIcon, CopyIcon } from 'lucide-react'
|
|
import { useMemo, useState } from 'react'
|
|
import { Button, cn, copyToClipboard, FloatingPlate } from 'ui'
|
|
|
|
import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
|
|
|
|
type SqlMonacoBlockProps = {
|
|
value?: string
|
|
wrapperClassName?: string
|
|
}
|
|
|
|
// [Joshen] This is technically a duplicate of CodeBlock from `ui-patterns`
|
|
// Should decide which is the preferred and consolidate - although rendering CodeEditor
|
|
// is much heavier due to Monaco Editor. I'd rather we use CodeBlock (or improve that)
|
|
// for read-only rendering of code contents
|
|
export const SqlMonacoBlock = ({ value, wrapperClassName }: SqlMonacoBlockProps) => {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const content = useMemo(() => value ?? '', [value])
|
|
|
|
const handleCopy = (value: string) => {
|
|
setCopied(true)
|
|
copyToClipboard(value)
|
|
setTimeout(() => setCopied(false), 1000)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn('group relative border rounded-md overflow-hidden w-full', wrapperClassName)}
|
|
>
|
|
<CodeEditor
|
|
hideLineNumbers
|
|
language="pgsql"
|
|
value={content}
|
|
className="h-[322px] pl-2"
|
|
options={{ padding: { top: 12, bottom: 12 } }}
|
|
/>
|
|
|
|
<FloatingPlate className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity">
|
|
<Button
|
|
className="px-1.5"
|
|
icon={copied ? <CheckIcon /> : <CopyIcon />}
|
|
onClick={() => handleCopy(content)}
|
|
>
|
|
{copied ? 'Copied' : ''}
|
|
</Button>
|
|
</FloatingPlate>
|
|
</div>
|
|
)
|
|
}
|