this is my current qml component to display camera information in tile // CameraTile.qml
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtGraphicalEffects 1.15

Item {
    id: itemCameraTile

    width: 300
    height: 200

    property string camName: qsTr("Unknown")
    property string camModel: qsTr("Unknown")
    property url camIcon: "qrc:default-icon.png"
    property url camPreview: "qrc:Animals/Tigers.png"

    signal viewClicked()

    // ✅ Shadow applied here
    DropShadow {
        id: shadowBackground
        anchors.fill: source
        radius: 20
        samples: 40
        color: Qt.rgba(0, 128/255, 128/255, 0.66)
        horizontalOffset: 0
        verticalOffset: 0
        source: tileBackground
        cached: true
    }

    // ✅ Background rectangle becomes shadow source
    Rectangle {
        id: tileBackground
        width: parent.width
        height: parent.height
        radius: 12
        clip: true
        z: 1

        // 🔳 Background image
        Image {
            id: tilePreview

            anchors.fill: parent

            fillMode: Image.PreserveAspectCrop

            source: camPreview
        }

        // 📦 Overlay container only at top (not whole tile)
        Rectangle {
            id: rectangleOverlay
            width: parent.width
            height: parent.height * .25
            anchors.top: parent.top
            color: "#80808088"
            radius: 0

            RowLayout {
                id: rowLayoutInformation
                anchors.fill: parent
                anchors.margins: 10
                spacing: 10

                Item {
                    width: rowLayoutInformation.width * .25
                    height: rowLayoutInformation.width * .15

                    Layout.alignment: Qt.AlignTop

                    Image {
                        id: tileIcon
                        anchors.fill: parent
                        source: camIcon

                        fillMode: Image.PreserveAspectFit

                        Component.onCompleted: {
                            LOG.debug(qsTr("tileIcon: %1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
                        }

                        Component.onDestruction: {
                            LOG.debug(qsTr("tileIcon: %1 destroyed").arg(objectName))
                        }
                    }
                }

                Item {
                    ColumnLayout {
                        id: columnLayoutLabels
                        Layout.alignment: Qt.AlignTop

                        width: rowLayoutInformation.width * .50
                        spacing: 4

                        Item {
                            id: lableNameContainer
                            width: columnLayoutLabels.width
                            height: lableName.implicitHeight

                            SequentialAnimation {
                                running: lableName.implicitWidth > lableNameContainer.width
                                loops: Animation.Infinite
                                XAnimator {
                                    target: lableName
                                    from: 0
                                    to: lableNameContainer.width - lableName.implicitWidth
                                    duration: 5000
                                }
                                XAnimator {
                                    target: lableName
                                    from: lableNameContainer.width - lableName.implicitWidth
                                    to: 0
                                    duration: 5000
                                }
                            }

                            Label {
                                id: lableName

                                font.bold: true
                                elide: Label.ElideRight

                                text: camName
                            }
                        }

                        Item  {
                            id: labelModelContainer
                            width: columnLayoutLabels.width
                            height: labelModel.implicitHeight

                            SequentialAnimation {
                                running: labelModel.implicitWidth > labelModelContainer.width
                                loops: Animation.Infinite
                                XAnimator {
                                    target: labelModel
                                    from: 0
                                    to: labelModelContainer.width - labelModel.implicitWidth
                                    duration: 5000
                                }
                                XAnimator {
                                    target: labelModel
                                    from: labelModelContainer.width - labelModel.implicitWidth
                                    to: 0
                                    duration: 5000
                                }
                            }

                            Label {
                                id: labelModel

                                color: Material.secondaryTextColor

                                text: camModel
                            }
                        }

                        Component.onCompleted: {
                            LOG.debug(qsTr("columnLayoutLabels: %1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
                        }

                        Component.onDestruction: {
                            LOG.debug(qsTr("columnLayoutLabels: %1 destroyed").arg(objectName))
                        }
                    }
                }

                RoundButton {
                    id: roundButtonOpen

                    width: rowLayoutInformation.width * .25
                    Layout.alignment: Qt.AlignTop

                    text: qsTr("OPEN")

                    onClicked: itemCameraTile.viewClicked()

                    Component.onCompleted: {
                        LOG.debug(qsTr("roundButtonOpen: %1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
                    }

                    Component.onDestruction: {
                        LOG.debug(qsTr("roundButtonOpen: %1 destroyed").arg(objectName))
                    }
                }

                Component.onCompleted: {
                    LOG.debug(qsTr("rowLayoutInformation: %1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
                }

                Component.onDestruction: {
                    LOG.debug(qsTr("rowLayoutInformation: %1 destroyed").arg(objectName))
                }
            }


            Component.onCompleted: {
                LOG.debug(qsTr("rectangleOverlay: %1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
            }

            Component.onDestruction: {
                LOG.debug(qsTr("rectangleOverlay: %1 destroyed").arg(objectName))
            }
        }
    }

    Component.onCompleted: {
        objectName = qsTr("CAMERA_TILE_%1").arg(camName)
        LOG.debug(qsTr("%1 -> %2x%3(%4,%5)").arg(objectName).arg(width).arg(height).arg(x).arg(y))
    }

    Component.onDestruction: {
        LOG.debug(qsTr("%1 destroyed").arg(objectName))
    }
}
i want to have camera icon in the left top next  to it is Name of the camera below ip address , with fixed size and if the name or ip exceed the width scroll to show and right top button to open the dedicated camera page. all these information i want the bacground shade and tile should be fille with image which will be updated form hte camera feed. make more robust code