Popover

shellui add popover

<Popover IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)">
  <Trigger>
    <Button Variant="ButtonVariant.Outline">Open Popover</Button>
  </Trigger>
  <ChildContent>
    <div class="space-y-2">
      <h4 class="font-medium leading-none">Dimensions</h4>
      <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
    </div>
  </ChildContent>
</Popover>

@code {
    private bool isOpen = false;
}

<Popover IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Placement="top">
  <Trigger><Button>Top</Button></Trigger>
  <ChildContent><p>Appears above the trigger.</p></ChildContent>
</Popover>

<Popover IsOpen="@isOpen2" IsOpenChanged="@((v) => isOpen2 = v)" Placement="bottom">
  <Trigger><Button>Bottom</Button></Trigger>
  <ChildContent><p>Appears below the trigger.</p></ChildContent>
</Popover>

<Popover IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)">
  <Trigger>
    <Button Variant="ButtonVariant.Outline">Settings</Button>
  </Trigger>
  <ChildContent>
    <div class="grid gap-4 p-4">
      <div class="space-y-2">
        <h4 class="font-medium leading-none">Display</h4>
        <p class="text-sm text-muted-foreground">Configure display settings.</p>
      </div>
      <div class="grid gap-2">
        <div class="flex items-center justify-between">
          <Label>Compact mode</Label>
          <Switch @bind-Value="compact" />
        </div>
        <div class="flex items-center justify-between">
          <Label>Show icons</Label>
          <Switch @bind-Value="showIcons" />
        </div>
      </div>
    </div>
  </ChildContent>
</Popover>

@code {
    private bool isOpen = false;
    private bool compact = false;
    private bool showIcons = true;
}