import React, {Component} from "react";
import {WalletCard} from "./Cards";

export class Navbar extends Component<any, any> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <nav
                className="ml-1 w-24 flex flex-col items-center bg-gray-700 dark:bg-gray-700 py-4 my-1 rounded-tl rounded-bl">

                <ul className="flex-1 mt-2 text-gray-700 dark:text-gray-400 capitalize">
                    {/* Links */}
                    <li className="mt-3 p-2 text-gray-400 dark:text-blue-300 rounded-lg">
                        <a href="#" className=" flex flex-col items-center">
                            <svg className="fill-current h-5 w-5" viewBox="0 0 24 24">
                                <path
                                    d="M19 5v2h-4V5h4M9 5v6H5V5h4m10 8v6h-4v-6h4M9
							17v2H5v-2h4M21 3h-8v6h8V3M11 3H3v10h8V3m10
							8h-8v10h8V11m-10 4H3v6h8v-6z"/>
                            </svg>
                            <span className="text-xs mt-2 text-gray-300">Dashboard</span>
                        </a>
                    </li>
                    <li className="mt-3 p-2 text-gray-400 dark:text-blue-300 rounded-lg">
                        <a href="#" className=" flex flex-col items-center">
                            <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                                      d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                            </svg>
                            <span className="text-xs mt-2 text-gray-300">Reports</span>
                        </a>
                    </li>
                </ul>
                <ul className="text-gray-700 dark:text-gray-400 capitalize">
                    <li className="mt-auto p-2 text-gray-400 dark:text-blue-300 rounded-lg">
                        <a href="#" className=" flex flex-col items-center">
                            <svg className="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                                      d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                                      d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <span className="text-xs mt-2 text-gray-300">Settings</span>
                        </a>
                    </li>
                </ul>
            </nav>
        )
    }
}

export class Sidebar extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <aside
                className="w-1/4 my-1 mr-1 pr-2 py-4 flex flex-col bg-gray-200 dark:bg-black
		dark:text-gray-400 rounded-r-lg overflow-y-auto">
                <WalletCard/>
            </aside>
        )
    }
}