43 lines
3.5 KiB
HTML
43 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<div style="display:flex;flex-direction:column;min-width:0;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text)">
|
|
<div style="display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 8px;border-bottom:1px solid var(--ui-border)">
|
|
<div role="tablist" aria-label="Language" style="display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto">
|
|
<sc-for list="{{ tabs }}" as="t" hint-placeholder-count="3">
|
|
<button role="tab" aria-selected="{{ t.on }}" onClick="{{ t.pick }}" style="all:unset;box-sizing:border-box;cursor:pointer;height:32px;padding:0 10px;display:flex;align-items:center;white-space:nowrap;font-size:13px;font-weight:{{ t.fw }};background:transparent;box-shadow:{{ t.bd }};color:{{ t.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:-2px">{{ t.label }}</button>
|
|
</sc-for>
|
|
</div>
|
|
<button aria-label="Copy code" onClick="{{ copy }}" style="all:unset;box-sizing:border-box;cursor:pointer;height:32px;min-width:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:500;color:{{ copyFg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:-2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat"></span><span aria-live="polite">{{ copyT }}</span></button>
|
|
</div>
|
|
<pre tabindex="0" style="margin:0;padding:12px 16px;overflow-x:auto;font:400 12px/19px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted);white-space:pre;tab-size:2">{{ code }}</pre>
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":640,"height":220},"tabs":{"editor":null,"tsType":"{k:string,label:string,code:string}[]"},"active":{"editor":"text","default":"curl","tsType":"string"},"copied":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
|
class Component extends DCLogic {
|
|
state = { tab: null, copied: false }
|
|
renderVals() {
|
|
const tabs = this.props.tabs || []
|
|
const act = this.props.active ?? this.state.tab ?? (tabs[0] && tabs[0].k)
|
|
const cur = tabs.find(t => t.k === act) || tabs[0] || { code: '' }
|
|
const copied = this.props.copied ?? this.state.copied
|
|
return {
|
|
tabs: tabs.map(t => { const on = t.k === cur.k, one = tabs.length === 1; return { label: t.label, on, fw: on ? 500 : 400, bd: on && !one ? 'inset 0 -2px 0 var(--ui-primary)' : 'none', fg: one ? 'var(--ui-text-muted)' : on ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', pick: () => this.setState({ tab: t.k }) } }),
|
|
code: cur.code,
|
|
copyIcon: copied ? 'check' : 'copy',
|
|
copyT: copied ? 'Copied' : 'Copy',
|
|
copyFg: copied ? 'var(--ui-success)' : 'var(--ui-text-highlighted)',
|
|
copy: () => { try { navigator.clipboard && navigator.clipboard.writeText(cur.code) } catch (e) {} this.setState({ copied: true }); clearTimeout(this._t); this._t = setTimeout(() => this.setState({ copied: false }), 2000) }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|