@page "/components/hover-card"

<PageTitle>Hover Card — Lumeo</PageTitle>

<PageHeader Title="Hover Card" Description="A card that appears when hovering over an element, showing additional information." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>User profile previews on hover over usernames or avatars</li>
        <li>Link previews showing a summary before the user clicks through</li>
        <li>Quick info cards that provide context without requiring a page navigation</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <HoverCard>
            <HoverCardTrigger>
                <Button Variant="Button.ButtonVariant.Link">@@blazor</Button>
            </HoverCardTrigger>
            <HoverCardContent>
                <Stack Gap="1">
                    <Heading Level="4" Size="sm" Weight="semibold">@@blazor</Heading>
                    <Lumeo.Text Size="sm" Color="muted">
                        A free and open-source web framework for building interactive web UIs using C#.
                    </Lumeo.Text>
                    <Lumeo.Text Size="xs" Color="muted" Class="pt-2">Joined December 2018</Lumeo.Text>
                </Stack>
            </HoverCardContent>
        </HoverCard>
    </ComponentDemo>

    <ComponentDemo Title="Alignment" Code="@_alignCode">
        <Flex Gap="8">
            <HoverCard>
                <HoverCardTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Start</Button>
                </HoverCardTrigger>
                <HoverCardContent Align="HoverCardContent.HoverCardAlign.Start">
                    <Lumeo.Text Size="sm">This hover card is aligned to the start.</Lumeo.Text>
                </HoverCardContent>
            </HoverCard>
            <HoverCard>
                <HoverCardTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">Center</Button>
                </HoverCardTrigger>
                <HoverCardContent Align="HoverCardContent.HoverCardAlign.Center">
                    <Lumeo.Text Size="sm">This hover card is centered.</Lumeo.Text>
                </HoverCardContent>
            </HoverCard>
            <HoverCard>
                <HoverCardTrigger>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Sm">End</Button>
                </HoverCardTrigger>
                <HoverCardContent Align="HoverCardContent.HoverCardAlign.End">
                    <Lumeo.Text Size="sm">This hover card is aligned to the end.</Lumeo.Text>
                </HoverCardContent>
            </HoverCard>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="With Arrow" Code="@_hoverArrowCode">
        <Flex Align="center" Gap="4">
            <HoverCard>
                <HoverCardTrigger>
                    <Button Variant="Button.ButtonVariant.Outline">Hover me</Button>
                </HoverCardTrigger>
                <HoverCardContent ShowArrow="true">
                    <Stack Gap="1">
                        <Heading Level="4" Size="sm" Weight="semibold">With arrow</Heading>
                        <Lumeo.Text Size="sm" Color="muted">A small pointer ties the card to its trigger.</Lumeo.Text>
                    </Stack>
                </HoverCardContent>
            </HoverCard>
        </Flex>
    </ComponentDemo>

    <ComponentDemo Title="User Profile" Code="@_profileCode">
        <Lumeo.Text Size="sm" Color="muted">
            Created by
            <HoverCard>
                <HoverCardTrigger>
                    <Lumeo.Text As="span" Class="font-medium text-foreground underline underline-offset-4 cursor-pointer">Jane Smith</Lumeo.Text>
                </HoverCardTrigger>
                <HoverCardContent>
                    <Stack Gap="2">
                        <Heading Level="4" Size="sm" Weight="semibold">Jane Smith</Heading>
                        <Lumeo.Text Size="sm" Color="muted">Senior Developer at Acme Inc.</Lumeo.Text>
                        <Flex Align="center" Gap="2">
                            <Lumeo.Text As="span" Size="xs" Color="muted">42 repositories</Lumeo.Text>
                            <Lumeo.Text As="span" Size="xs" Color="muted">128 followers</Lumeo.Text>
                        </Flex>
                    </Stack>
                </HoverCardContent>
            </HoverCard>
            on March 15, 2024.
        </Lumeo.Text>
    </ComponentDemo>
</Stack>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="hovercard" Level="3" Class="mt-8 scroll-mt-20">HoverCard</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Trigger and content elements.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Controls whether the hover card is visible.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the open state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenDelay</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">200</TableCell><TableCell>Delay in milliseconds before opening on hover.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">CloseDelay</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">300</TableCell><TableCell>Delay in milliseconds before closing on mouse leave.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsOpen</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Obsolete alias for Open; forwards to and from it.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsOpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Obsolete alias for OpenChanged; forwards to and from it.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="hovercardtrigger" Level="3" Class="mt-8 scroll-mt-20">HoverCardTrigger</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Hoverable trigger content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="hovercardcontent" Level="3" Class="mt-8 scroll-mt-20">HoverCardContent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Content displayed in the hover card.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Align</TableCell><TableCell Class="font-mono text-xs">HoverCardAlign</TableCell><TableCell Class="font-mono text-xs">Center</TableCell><TableCell>Horizontal alignment. Values: Start, Center, End.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ShowArrow</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Renders a small arrow pointing at the trigger.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Side</TableCell><TableCell Class="font-mono text-xs">HoverCardSide</TableCell><TableCell Class="font-mono text-xs">Bottom</TableCell><TableCell>Preferred side for placement. Values: Top, Right, Bottom, Left.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/tooltip" class="text-primary hover:underline">Tooltip</a> — For simple text hints on hover without rich content</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — For interactive floating content triggered by a click</li>
        <li><a href="/components/card" class="text-primary hover:underline">Card</a> — For static content containers that are always visible</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<HoverCard>
    <HoverCardTrigger>
        <Button Variant=""Button.ButtonVariant.Link"">@@blazor</Button>
    </HoverCardTrigger>
    <HoverCardContent>
        <Stack Gap=""1"">
            <Heading Level=""4"" Size=""sm"" Weight=""semibold"">@@blazor</Heading>
            <Lumeo.Text Size=""sm"" Color=""muted"">
                A free and open-source web framework.
            </Lumeo.Text>
            <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">Joined December 2018</Lumeo.Text>
        </Stack>
    </HoverCardContent>
</HoverCard>";

    private string _alignCode = @"<HoverCard>
    <HoverCardTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">Start</Button>
    </HoverCardTrigger>
    <HoverCardContent Align=""HoverCardContent.HoverCardAlign.Start"">
        <Lumeo.Text Size=""sm"">Aligned to start.</Lumeo.Text>
    </HoverCardContent>
</HoverCard>

<HoverCard>
    <HoverCardTrigger>
        <Button Variant=""Button.ButtonVariant.Outline"">End</Button>
    </HoverCardTrigger>
    <HoverCardContent Align=""HoverCardContent.HoverCardAlign.End"">
        <Lumeo.Text Size=""sm"">Aligned to end.</Lumeo.Text>
    </HoverCardContent>
</HoverCard>";

    private string _hoverArrowCode = @"<HoverCard>
    <HoverCardTrigger><Button Variant=""Button.ButtonVariant.Outline"">Hover me</Button></HoverCardTrigger>
    <HoverCardContent ShowArrow=""true"">
        <Stack Gap=""1"">
            <Heading Level=""4"" Size=""sm"" Weight=""semibold"">With arrow</Heading>
            <Lumeo.Text Size=""sm"" Color=""muted"">A small pointer ties the card to its trigger.</Lumeo.Text>
        </Stack>
    </HoverCardContent>
</HoverCard>";

    private string _profileCode = @"<HoverCard>
    <HoverCardTrigger>
        <span class=""font-medium underline cursor-pointer"">Jane Smith</span>
    </HoverCardTrigger>
    <HoverCardContent>
        <Stack Gap=""2"">
            <Heading Level=""4"" Size=""sm"" Weight=""semibold"">Jane Smith</Heading>
            <Lumeo.Text Size=""sm"" Color=""muted"">Senior Developer at Acme Inc.</Lumeo.Text>
            <Flex Align=""center"" Gap=""2"">
                <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">42 repositories</Lumeo.Text>
                <Lumeo.Text As=""span"" Size=""xs"" Color=""muted"">128 followers</Lumeo.Text>
            </Flex>
        </Stack>
    </HoverCardContent>
</HoverCard>";
}
