Skip to content

Commit

Permalink
refactor: consolidate base gui
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexandrelamberty
alexandrelamberty committed Dec 30, 2023
1 parent 546100d commit 3b38d9b
Show file tree
Hide file tree
Showing 42 changed files with 472 additions and 923 deletions.
38 changes: 0 additions & 38 deletions src/App.css
View file
Original file line number Diff line number Diff line change
@@ -1,38 +0,0 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
22 changes: 14 additions & 8 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,47 @@
import { Outlet, Route, Routes, useLocation } from "react-router";
import { useNavigate } from "react-router-dom";
import "./App.css";
import Sidebar from "./components/Sidebar";

import { NoMatch } from "./routes/NoMatch";
import { Capabilities } from "./routes/Capabilities";
import { Dashboard } from "./routes/Dashboard";
import { Devices } from "./routes/Devices";
import { Settings } from "./routes/Settings";
import { Zones } from "./routes/Zones";
import { NoMatch } from "./routes/NoMatch";
import { Register } from "./routes/Register";
import { Settings } from "./routes/Settings";
import { SignIn } from "./routes/SignIn";
import { Zones } from "./routes/Zones";

import { GeneralSettings } from "./features/settings/GeneralSettings";
import { SecuritySettings } from "./features/settings/SecuritySettings";
import { Capabilities } from "./routes/Capabilities";

/**
* React Router v6 testing
* https://testing-library.com/docs/example-react-router/
*/
export const LocationDisplay = () => {
const location = useLocation();

return <div data-testid="location-display">{location.pathname}</div>;
};

function App() {
const navigate = useNavigate();
return (
<>
<Routes>
<Route path="/auth" element={<NoLayout />}>
<Route index element={<SignIn />} />
<Route path="register" element={<Register />} />
<Route path="sign-in" element={<SignIn />} />
<Route path="*" element={<NoMatch />} />
</Route>
<Route path="/" element={<Layout />}>
<Route index element={<Dashboard />} />
<Route path="devices" element={<Devices />} />
<Route path="capabilities" element={<Capabilities />} />
<Route path="zones" element={<Zones />} />
<Route path="settings" element={<Settings />} />
<Route path="settings" element={<Settings />}>
<Route index element={<GeneralSettings />} />
<Route path="security" element={<SecuritySettings />} />
</Route>
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
Expand Down
179 changes: 42 additions & 137 deletions src/components/Headings.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,148 +1,53 @@
/* This example requires Tailwind CSS v2.0+ */
import { Menu, Transition } from "@headlessui/react";
import {
BriefcaseIcon,
CalendarIcon,
CheckIcon,
ChevronDownIcon,
CurrencyDollarIcon,
LinkIcon,
PencilIcon,
} from "@heroicons/react/24/solid";
import { Fragment } from "react";

//@ts-ignore
function classNames(...classes) {
return classes.filter(Boolean).join(" ");
}
import { CheckIcon, LinkIcon, PencilIcon } from "@heroicons/react/24/solid";

type HeadingsProp = {
title: string;
};
export default function Headings({ title }: HeadingsProp) {
return (
<div className="lg:flex lg:items-center lg:justify-between">
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
{title}
</h2>
<div className="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6">
<div className="mt-2 flex items-center text-sm text-gray-500">
<BriefcaseIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
Full-time
</div>
<div className="mt-2 flex items-center text-sm text-gray-500">
<BriefcaseIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
Remote
</div>
<div className="mt-2 flex items-center text-sm text-gray-500">
<CurrencyDollarIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
$120k &ndash; $140k
</div>
<div className="mt-2 flex items-center text-sm text-gray-500">
<CalendarIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
Closing on January 9, 2020
</div>
<div className="bg-indigo-600 py-4">
<div className="h-8 lg:flex lg:items-center lg:justify-between">
<div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate">
{title}
</h2>
</div>
<div className="mt-5 flex lg:mt-0 lg:ml-4">
<span className="hidden sm:block">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<PencilIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-500"
aria-hidden="true"
/>
Edit
</button>
</span>
<span className="hidden sm:block ml-3">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<LinkIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-500"
aria-hidden="true"
/>
View
</button>
</span>
<span className="sm:ml-3">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<CheckIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Publish
</button>
</span>
</div>
</div>
<div className="mt-5 flex lg:mt-0 lg:ml-4">
<span className="hidden sm:block">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<PencilIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-500"
aria-hidden="true"
/>
Edit
</button>
</span>

<span className="hidden sm:block ml-3">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<LinkIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-500"
aria-hidden="true"
/>
View
</button>
</span>

<span className="sm:ml-3">
<button
type="button"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<CheckIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Publish
</button>
</span>

{/* Dropdown */}
<Menu as="span" className="ml-3 relative sm:hidden">
<Menu.Button className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
More
<ChevronDownIcon
className="-mr-1 ml-2 h-5 w-5 text-gray-500"
aria-hidden="true"
/>
</Menu.Button>

<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 -mr-1 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
Edit
</a>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
View
</a>
)}
</Menu.Item>
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
);
Expand Down
104 changes: 0 additions & 104 deletions src/components/Sidebar copy.tsx
View file

This file was deleted.

Loading

0 comments on commit 3b38d9b

Please sign in to comment.