additional formatting

This commit is contained in:
Khalim Conn-Kowlessar 2023-07-12 18:17:23 +01:00
parent 8d2db50d1c
commit c1f4f3ca60
3 changed files with 18 additions and 6 deletions

View file

@ -54,17 +54,19 @@ export default function AddNewDropDown({
return (
<NavigationMenuItem>
<NavigationMenuTrigger>Add New</NavigationMenuTrigger>
<NavigationMenuTrigger className="bg-gray-50">
Add New
</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="p-6 md:w-[200px] lg:w-[350px] lg:grid-cols-[.75fr_1fr]">
<ul className="p-6 md:w-[200px] lg:w-[350px] lg:grid-cols-[.75fr_1fr] cursor-pointer">
<ListItem onClick={handleCickAddUnit}>
<div className="font-medium items-center flex text-sm text-gray-900 justify-start hover:cursor-pointer">
<div className="font-medium items-center flex text-sm text-gray-900 justify-start">
<PlusIcon className="h-4 w-4 mr-2" /> Add Unit
</div>
</ListItem>
<ListItem onClick={handleClickUploadCSV}>
<div className="font-medium items-center flex text-sm text-gray-900 justify-start cursor-pointer">
<div className="font-medium items-center flex text-sm text-gray-900 justify-start">
<TableCellsIcon className="h-4 w-4 mr-2" /> Upload CSV
</div>
Upload a csv of multiple units

View file

@ -5,14 +5,18 @@ import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuList,
navigationMenuTriggerStyle,
} from "@/app/shadcn_components/ui/navigation-menu";
import AddNewDropDown from "./AddNew";
import { cva } from "class-variance-authority";
interface ToolbarProps {
portfolioId: number;
}
const navigationMenuTriggerStyle = cva(
"bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
);
export function Toolbar({ portfolioId }: ToolbarProps) {
function handleClickSettings() {
console.log("Settings were clicked, implement me");
@ -24,6 +28,7 @@ export function Toolbar({ portfolioId }: ToolbarProps) {
className={navigationMenuTriggerStyle() + " ml-3 mr-2"}
onClick={handleClickSettings}
>
<Cog6ToothIcon className="h-4 w-4 mr-2" />
Settings
</NavigationMenuItem>
<AddNewDropDown portfolioId={portfolioId} />

View file

@ -40,8 +40,13 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
const NavigationMenuItem = NavigationMenuPrimitive.Item;
// Original style:
// const navigationMenuTriggerStyle = cva(
// "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
// );
const navigationMenuTriggerStyle = cva(
"bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
"bg-gray-50 cursor-pointer group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-200 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-gray-200"
);
const NavigationMenuTrigger = React.forwardRef<