content: import React from 'react';
  
  import Layout from './components/Layout';
  import { getAuthStatus } from '../helpers/auth';
  
  const Dashboard = () => {
    const { isAdmin, isGuest, isStaff } = getAuthStatus();
  
    return (
      <div className="base-12-grid pb-20 pt-8">
        <h1 className="col-span-full mb-10 text-purple-500 text-base uppercase">
          Administration
        </h1>
  
        <h2 className="col-span-full font-bold mb-10 text-black text-2xl">
          Hello! 👋
        </h2>
  
        <div className="col-span-full mb-10 max-chars">
          <p className="text-lg">
            Welcome to the <strong>DoSomething.org Admin interface</strong>. If
            you're looking to manage user accounts, campaigns, clubs, or domain
            redirects, you're in the right place.
          </p>
        </div>
  
        {isStaff && (
          <div className="col-span-10 max-chars">
            <p className="mb-8">
              The main navigation will get you where you need to go, but here are
              some quicks hits of what you'll find in each section:
            </p>
  
            <ul className="mb-10">
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/admin/campaigns"
                >
                  Campaigns:
                </a>{' '}
                <span className="text-gray-500">
                  create/edit campaigns, actions, signups, and reportbacks.
                </span>
              </li>
  
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/admin/users"
                >
                  Users:
                </a>{' '}
                <span className="text-gray-500">
                  view/edit user profiles, signups, or posts.
                </span>
              </li>
  
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/admin/clubs"
                >
                  Clubs:
                </a>{' '}
                <span className="text-gray-500">
                  view/edit DoSomething.org clubs.
                </span>
              </li>
  
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/admin/imports"
                >
                  Imports:
                </a>{' '}
                <span className="text-gray-500">
                  view/create third-party partner & CSV imports.
                </span>
              </li>
  
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/admin/faq"
                >
                  FAQ:
                </a>{' '}
                <span className="text-gray-500">
                  view frequently asked questions.
                </span>
              </li>
  
              <li className="mb-4">
                <a
                  className="font-bold text-blurple-500 hover:text-blurple-200"
                  href="/dev"
                >
                  Documentation:
                </a>{' '}
                <span className="text-gray-500">
                  view documentation for the DoSomething.org Identity platform and
                  Admin UI.
                </span>
              </li>
            </ul>
  
            {isAdmin && (
              <ul className="mb-20">
                <li className="mb-4">
                  <a
                    className="font-bold text-blurple-500 hover:text-blurple-200"
                    href="/admin/users?role=admin,staff"
                  >
                    Super Users:
                  </a>{' '}
                  <span className="text-gray-500">
                    view/edit staff profiles and manage settings{' '}
                    <em>(admins only)</em>.
                  </span>
                </li>
  
                <li className="mb-4">
                  <a
                    className="font-bold text-blurple-500 hover:text-blurple-200"
                    href="/admin/redirects"
                  >
                    Redirects:
                  </a>{' '}
                  <span className="text-gray-500">
                    view/edit vanity URL redirects <em>(admins only)</em>.
                  </span>
                </li>
  
                <li className="mb-4">
                  <a
                    className="font-bold text-blurple-500 hover:text-blurple-200"
                    href="/admin/clients"
                  >
                    OAuth Clients:
                  </a>{' '}
                  <span className="text-gray-500">
                    view/edit authentication settings <em>(admins only)</em>.
                  </span>
                </li>
              </ul>
            )}
  
            <p>
              Questions? Check out the{' '}
              <a
                className="font-bold text-blurple-500 hover:text-blurple-200"
                href="/admin/faq"
              >
                FAQs
              </a>{' '}
              or ask in <code className="text-purple-500">#help-product</code>.
            </p>
          </div>
        )}
  
        {isGuest && (
          <div className="col-span-10 max-chars">
            <p className="mb-10">
              Drop a message in the{' '}
              <code className="text-purple-500">#help-product</code> Slack room if
              you can't log in!
            </p>
  
            <a
              href="/login"
              className="bg-blurple-500 hover:bg-blurple-300 inline-block mt-4 px-8 py-4 rounded text-white"
            >
              Log In
            </a>
          </div>
        )}
      </div>
    );
  };
  
  Dashboard.layout = page => <Layout children={page} title="Welcome" />;
  
  export default Dashboard;
  