Card

[<ReactComponent>]
let CardTest () =
    let selected, setSelected = React.useState(false)
    Fui.card [
        card.appearance.filled
        card.selected selected
        card.onSelectionChange (fun s -> setSelected s.selected)
        card.style [ style.width 400; style.maxWidth (length.percent 100); style.height.fitContent ]
        card.children [
            Fui.cardPreview [
                cardPreview.logo (
                    Fui.image [
                        image.style [ style.width 40 ]
                        image.src "https://cdn.sanity.io/images/599r6htc/localized/46a76c802176eb17b04e12108de7e7e0f3736dc6-1024x1024.png?w=804&h=804&q=75&fit=max&auto=format"
                        image.alt "Figma logo"
                    ]
                )
                cardPreview.children [
                    Fui.image [
                        image.src "https://i0.wp.com/www.smartprix.com/bytes/wp-content/uploads/2023/06/Untitled-design-88.jpg?fit=1200%2C675&ssl=1"
                        image.alt "Presentation Preview"
                    ]
                ]
            ]
            Fui.cardHeader [
                cardHeader.header (
                    Fui.text [
                        text.weight.semibold
                        text.text "iOS App Prototype"
                    ]
                )
                cardHeader.description  "You created 53m ago"
                cardHeader.action (
                    Fui.button [
                        button.appearance.transparent
                        button.icon (
                            Fui.icon.moreHorizontalFilled []
                        )
                        button.ariaLabel "More Actions"
                    ]
                )
            ]
            Fui.cardFooter [
                cardFooter.action (
                    Fui.button [
                        button.appearance.transparent
                        button.icon (Fui.icon.moreHorizontalFilled [])
                    ]
                )
                cardFooter.children [
                    Fui.button [
                        button.icon (Fui.icon.arrowReplyAllRegular [])
                        button.text "Reply"
                    ]
                    Fui.button [
                        button.icon (Fui.icon.shareIosRegular [])
                        button.text "Share"
                    ]
                ]
            ]
        ]
    ]