gridBox.view.tsx

import { faGripVertical, IconDefinition } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import UpdateIndicator from "@layout/grid.layout/update-inidicator.layout/update-indicator.layout"
import { Category, CategoryType } from "@shared/types/category.type"
import { Col, Container, Row } from "react-bootstrap"
import './gridBox.view.scss'

interface GridBoxProps {
    title: string,
    title_icon: IconDefinition,
    children: React.ReactNode,
    className?: string,
}


export const GridBox: React.FC<GridBoxProps> = ({ children, title, title_icon, className = "" }) => {
    return (
        <div className="grid-box h-100">
            <Container fluid className={`c-box d-flex flex-column h-100 ${className}`}>
                <div>
                    <UpdateIndicator
                        category={Category.DEVICE as CategoryType}
                        updateInterval={15000}
                    />
                    <FontAwesomeIcon icon={faGripVertical} className="drag-handle" />
                    <Row className="mb-0">
                        <Col xs={12}>

                            <h4 className='c-box-title'><FontAwesomeIcon icon={title_icon} size="1x" className="me-2 text-primary" />{title}</h4>
                        </Col>
                    </Row>
                </div>
                <div className="flex-grow-1 content">
                    {children}
                </div>
            </Container>
        </div>
    )
}