🏡 index : ~doyle/chartered.git

import React = require("react");

import { Link } from "react-router-dom";
import { useAuth } from "../useAuth";
import Nav from "../sections/Nav";
import { ChevronRight } from "react-bootstrap-icons";

export default function Dashboard() {
  const auth = useAuth();

  const recentlyUpdated = [
    {
      name: "hello-world-rs",
      version: "0.0.1",
    },
    {
      name: "cool-beans-rs",
      version: "0.0.1",
    },
  ];

  return (
    <div className="text-white">
      <Nav />

      <div className="container mt-4 pb-4">
        <h1 className="mb-0">Welcome to Chartered.</h1>
        <p style={{ maxWidth: "72ch" }}>
          A private, authenticated Cargo registry. Everything published to this
          registry is <em>private and visible only to you</em>, until explicit
          permissions are granted to others.
        </p>
        <a
          href="https://github.com/w4/chartered"
          target="_blank"
          className="btn btn-outline-light shadow-sm"
        >
          Getting Started
        </a>

        <hr />

        <div className="row">
          <div className="col-md-4">
            <h4>Your Crates</h4>
            {recentlyUpdated.map((v) => (
              <CrateCard key={v.name} crate={v} />
            ))}
          </div>

          <div className="col-md-4">
            <h4>Recently Updated</h4>
            {recentlyUpdated.map((v) => (
              <CrateCard key={v.name} crate={v} />
            ))}
          </div>

          <div className="col-md-4">
            <h4>Most Downloaded</h4>
            {recentlyUpdated.map((v) => (
              <CrateCard key={v.name} crate={v} />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

interface Crate {
  name: string;
  version: string;
}

function CrateCard({ crate }: { crate: Crate }) {
  return (
    <Link to={`/crates/${crate.name}`} className="text-decoration-none">
      <div className="card border-0 mb-2 shadow-sm">
        <div className="card-body text-black d-flex flex-row">
          <div className="flex-grow-1 align-self-center">
            <h6 className="text-primary my-0">{crate.name}</h6>
            <small className="text-secondary">v{crate.version}</small>
          </div>

          <ChevronRight size={16} className="align-self-center" />
        </div>
      </div>
    </Link>
  );
}