import { Dialog, DialogTrigger, DialogContent, DialogTitle } from '@stellar-ui/core';

function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogTitle>Dialog Title</DialogTitle>
        <p>Dialog content goes here</p>
      </DialogContent>
    </Dialog>
  );
}

import { Button } from '@stellar-ui/core';

function App() {
  return <Button onClick={() => alert('clicked')}>Click me</Button>;
}

import { Popover, PopoverTrigger, PopoverContent } from '@stellar-ui/core';

function App() {
  return (
    <Popover>
      <PopoverTrigger>Open Popover</PopoverTrigger>
      <PopoverContent side="top">
        <p>Popover content</p>
      </PopoverContent>
    </Popover>
  );
}

import { Tooltip } from '@stellar-ui/core';

function App() {
  return (
    <Tooltip content="This is a tooltip" side="top">
      <button>Hover me</button>
    </Tooltip>
  );
}

import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '@stellar-ui/core';

function App() {
  return (
    <Dropdown>
      <DropdownTrigger>Open Menu</DropdownTrigger>
      <DropdownContent>
        <DropdownItem onSelect={() => console.log('Edit')}>Edit</DropdownItem>
        <DropdownItem onSelect={() => console.log('Delete')}>Delete</DropdownItem>
      </DropdownContent>
    </Dropdown>
  );
}

import { Select, SelectTrigger, SelectContent, SelectItem } from '@stellar-ui/core';

function App() {
  return (
    <Select onValueChange={(value) => console.log(value)}>
      <SelectTrigger>Select an option</SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
      </SelectContent>
    </Select>
  );
}