chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Use prettier-plugin-tailwindcss (#11373)

Browse Source 
* use prettier-plugin-tailwindcss to keep class names organized

* use prettierrc file to ensure formatting on save works with vscode

* classname reorder with prettier-plugin-tailwindcss
This commit is contained in:
Josh Hawkins
2024-05-14 10:06:44 -05:00
committed by GitHub
parent b10ae68c1f
commit 1757f4cb04
80 changed files with 682 additions and 597 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/navigation/Bottombar.tsx
View File

@@ -20,7 +20,7 @@ function Bottombar() {
const navItems = useNavigation("secondary");
return (
<div className="absolute h-16 inset-x-4 bottom-0 flex flex-row items-center justify-between">
<div className="absolute inset-x-4 bottom-0 flex h-16 flex-row items-center justify-between">
{navItems.map((item) => (
<NavItem key={item.id} className="p-2" item={item} Icon={item.icon} />
))}
@@ -77,16 +77,16 @@ function StatusAlertNav({ className }: StatusAlertNavProps) {
</DrawerTrigger>
<DrawerContent
className={cn(
"max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden",
"mx-1 max-h-[75dvh] overflow-hidden rounded-t-2xl px-2",
className,
)}
>
<div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
<div className="flex h-auto w-full flex-col items-center gap-2 overflow-y-auto overflow-x-hidden py-4">
{Object.entries(messages).map(([key, messageArray]) => (
<div key={key} className="w-full flex items-center gap-2">
<div key={key} className="flex w-full items-center gap-2">
{messageArray.map(({ id, text, color, link }: StatusMessage) => {
const message = (
<div key={id} className="flex items-center text-xs gap-2">
<div key={id} className="flex items-center gap-2 text-xs">
<IoIosWarning
className={`size-5 ${color || "text-danger"}`}
/>

2
web/src/components/navigation/NavItem.tsx
View File

@@ -44,7 +44,7 @@ export default function NavItem({
onClick={onClick}
className={({ isActive }) =>
cn(
"flex flex-col justify-center items-center rounded-lg",
"flex flex-col items-center justify-center rounded-lg",
className,
variants[item.variant ?? "primary"][isActive ? "active" : "inactive"],
)

8
web/src/components/navigation/Sidebar.tsx
View File

@@ -12,10 +12,10 @@ function Sidebar() {
const navbarLinks = useNavigation();
return (
<aside className="absolute w-[52px] z-10 left-o inset-y-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between bg-background_alt border-r border-secondary-highlight">
<aside className="left-o scrollbar-hidden absolute inset-y-0 z-10 flex w-[52px] flex-col justify-between overflow-y-auto border-r border-secondary-highlight bg-background_alt py-4">
<span tabIndex={0} className="sr-only" />
<div className="w-full flex flex-col gap-0 items-center">
<Logo className="w-8 h-8 mb-6" />
<div className="flex w-full flex-col items-center gap-0">
<Logo className="mb-6 h-8 w-8" />
{navbarLinks.map((item) => {
const showCameraGroups =
item.id == 1 && item.url == location.pathname;
@@ -32,7 +32,7 @@ function Sidebar() {
);
})}
</div>
<div className="flex flex-col items-center gap-4 mb-8">
<div className="mb-8 flex flex-col items-center gap-4">
<GeneralSettings />
<AccountSettings />
</div>