shadcn-vue/apps/www/src/examples/playground/components/PresetShare.vue
2023-09-05 16:21:36 +08:00

51 lines
1.4 KiB
Vue

<script setup lang="ts">
import CopyIcon from '~icons/radix-icons/copy'
import { Button } from '@/lib/registry/default/ui/button'
import { Input } from '@/lib/registry/default/ui/input'
import { Label } from '@/lib/registry/default/ui/label'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/lib/registry/default/ui/popover'
</script>
<template>
<Popover>
<PopoverTrigger as-child>
<Button variant="secondary">
Share
</Button>
</PopoverTrigger>
<PopoverContent align="end" class="w-[520px]">
<div class="flex flex-col space-y-2 text-center sm:text-left">
<h3 class="text-lg font-semibold">
Share preset
</h3>
<p class="text-sm text-muted-foreground">
Anyone who has this link and an OpenAI account will be able to view
this.
</p>
</div>
<div class="flex items-center space-x-2 pt-4">
<div class="grid flex-1 gap-2">
<Label for="link" class="sr-only">
Link
</Label>
<Input
id="link"
default-value="https://platform.openai.com/playground/p/7bbKYQvsVkNmVb8NGcdUOLae?model=text-davinci-003"
read-only
class="h-9"
/>
</div>
<Button type="submit" size="sm" class="px-3">
<span class="sr-only">Copy</span>
<CopyIcon class="h-4 w-4" />
</Button>
</div>
</PopoverContent>
</Popover>
</template>