Vertical source picker with branded tiles, an account hint per source, and a Connect pill for services that are not linked yet.
The import and the props worth knowing about, in one place.
import { Upload9 } from "@/components/beste/piece/upload9";
<Upload9
sources={[
{
"id": "drive",
"name": "Google Drive",
"description": "[email protected]",
"icon": "drive",
"src": "https://oud.pics/sm/l/google-drive.avif",
"alt": "Google Drive",
"connected": true
},
{
"id": "figma",
"name": "Figma",
"description": "Beste Studio team",
"icon": "figma",
"src": "https://oud.pics/sm/l/figma.png",
"alt": "Figma",
"connected": true
},
{
"id": "dropbox",
"name": "Dropbox",
"description": "Connect to browse",
"icon": "dropbox",
"src": "https://oud.pics/sm/l/dropbox.png",
"alt": "Dropbox"
},
{
"id": "device",
"name": "This device",
"description": "Files on this Mac",
"icon": "device",
"src": "https://oud.pics/sm/l/apple.png",
"alt": "This device",
"connected": true
}
]}
bordered={false}
/>