import React from 'react'
import './page-icons.css'

export const BoxiconsPage = () => {
    return (
        <>
            <h4 className="py-3 mb-4"><span className="text-muted fw-light">Icons /</span> Box Icons</h4>

            <p>
                You can check complete list of box icons from
                <a aria-label="go to boxicon web" href="https://boxicons.com/" rel='noreferrer' target="_blank">https://boxicons.com</a>
            </p>

            {/* <!-- Icon container --> */}
            <div className="d-flex flex-wrap" id="icons-container">
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-adobe mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">adobe</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-algolia mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">algolia</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-audible mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">audible</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-figma mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">figma</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-redbubble mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">redbubble</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-etsy mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">etsy</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-gitlab mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">gitlab</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-patreon mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">patreon</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-facebook-circle mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">facebook-circle</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-imdb mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">imdb</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-jquery mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">jquery</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-pinterest-alt mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">pinterest-alt</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-500px mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">500px</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-airbnb mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">airbnb</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-amazon mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">amazon</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-android mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">android</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-angular mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">angular</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-apple mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">apple</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-baidu mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">baidu</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-behance mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">behance</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-bing mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">bing</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-bitcoin mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">bitcoin</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-blogger mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">blogger</p>
                    </div>
                </div>
                <div className="card icon-card cursor-pointer text-center mb-4 mx-2">
                    <div className="card-body">
                        <i className="bx bxl-bootstrap mb-2"></i>
                        <p className="icon-name text-capitalize text-truncate mb-0">bootstrap</p>
                    </div>
                </div>
            </div>

            {/* <!-- Buttons --> */}
            <div className="d-flex justify-content-center mx-auto gap-3">
                <a aria-label="go to boxicon web" href="https://boxicons.com/" target="_blank" rel="noreferrer" className="btn btn-primary">View All Icons</a>
                <a aria-label="go to themeselection web"
                    href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/documentation//Icons.html"
                    className="btn btn-primary"
                    target="_blank"
                    rel="noreferrer"
                >How to use icons?</a>
            </div>
        </>
    )
}
