+
)
}
diff --git a/src/components/people/PeopleList.tsx b/src/components/people/PeopleList.tsx
index 975af48..3d4d89c 100644
--- a/src/components/people/PeopleList.tsx
+++ b/src/components/people/PeopleList.tsx
@@ -52,6 +52,7 @@ export default function PeopleList() {
const router = useRouter()
const { page = 1 } = router.query as { page: string }
const [people, setPeople] = useState
+ {children}
+
{errorMessage}
;
return (
-
+
{people.map((person) => (
)
}
-
- return (
-
- {renderContent()}
-
- );
-}
diff --git a/src/components/people/PersonItem.tsx b/src/components/people/PersonItem.tsx
index e5efb52..ded39d7 100644
--- a/src/components/people/PersonItem.tsx
+++ b/src/components/people/PersonItem.tsx
@@ -8,6 +8,7 @@ import PersonHideCell from "./PersonHideCell";
import clsx from "clsx";
import Link from "next/link";
import { ENV } from "@/config/environment";
+import { ArrowUpRight } from "lucide-react";
interface IProps {
person: IPerson;
@@ -31,37 +32,62 @@ export default function PersonItem({ person }: IProps) {
});
};
+ const handleHide = (hidden: boolean) => {
+ setLoading(true);
+ return updatePerson(person.id, {
+ isHidden: hidden,
+ })
+ .then(() => {
+ setFormData((person) => ({
+ ...person,
+ isHidden: hidden,
+ }));
+ })
+ .catch(() => {})
+ .finally(() => {
+ setLoading(false);
+ });
+ };
+
return (
-
-
-
-
-
-
+
{
+ if (typeof leftComponent === "string") {
+ return {leftComponent} - Immich Power Tools
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/shared/Sidebar.tsx b/src/components/shared/Sidebar.tsx
new file mode 100644
index 0000000..467944b
--- /dev/null
+++ b/src/components/shared/Sidebar.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link";
+import { Bell, Camera, Package2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+import { sidebarNavs } from "@/config/constants/sidebarNavs";
+import { cn } from "@/lib/utils";
+import { useRouter } from "next/router";
+import { Badge } from "../ui/badge";
+import { ENV } from "@/config/environment";
+
+export default function Sidebar() {
+ const router = useRouter();
+ const { pathname } = router;
+
+ return (
+ ,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ )
+}
+
+export { Badge, badgeVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..77e9fb7
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..0e4dccf
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,203 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+ CheckIcon,
+ ChevronRightIcon,
+ DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+))
+DropdownMenuSubTrigger.displayName =
+ DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuCheckboxItem.displayName =
+ DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+
+ )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuCheckboxItem,
+ DropdownMenuRadioItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuGroup,
+ DropdownMenuPortal,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuRadioGroup,
+}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..a92b8e0
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ )
+ }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..639ffcb
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+const SheetContent = React.forwardRef<
+ React.ElementRef,
+ SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+ > = ({
+ children,
+ ...props
+}) => (
+
+
+ {children}
+
+
+)
+
+export { Tooltip, TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/config/constants/sidebarNavs.tsx b/src/config/constants/sidebarNavs.tsx
new file mode 100644
index 0000000..2a608b5
--- /dev/null
+++ b/src/config/constants/sidebarNavs.tsx
@@ -0,0 +1,22 @@
+import { Home, User } from "lucide-react";
+
+
+export const sidebarNavs = [
+ {
+ title: "Manage People",
+ link: "/",
+ icon:
+
);
}
diff --git a/src/types/person.d.ts b/src/types/person.d.ts
index 9be8a8d..93641f1 100644
--- a/src/types/person.d.ts
+++ b/src/types/person.d.ts
@@ -10,4 +10,5 @@ export interface IPerson {
interface IPeopleListResponse extends IListData{
people: IPerson[]
+ total: number
}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1fb21a9..d4d8bee 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,7 +12,7 @@ const config = {
prefix: "",
theme: {
fontFamily: {
-
+ mono: [ ...fontFamily.mono ],
},
container: {
center: true,
-
- View
-
-
-
- {
- setFormData(newData);
- }}
+ {
setEditMode((prev) => !prev);
}}
@@ -75,8 +101,9 @@ export default function PersonItem({ person }: IProps) {
) : (
{
setFormData({ ...formData, name: e.target.value });
@@ -90,8 +117,9 @@ export default function PersonItem({ person }: IProps) {
onBlur={handleEdit}
/>
)}
-
);
}
diff --git a/src/components/people/PersonMergeDropdown.tsx b/src/components/people/PersonMergeDropdown.tsx
index c95d2d9..00324ea 100644
--- a/src/components/people/PersonMergeDropdown.tsx
+++ b/src/components/people/PersonMergeDropdown.tsx
@@ -95,12 +95,11 @@ export function PersonMergeDropdown(
+
{!editMode ? (
{
+ handleHide(!formData.isHidden);
+ }}
+ >
+
+
+
+
+
+
{
setEditMode((prev) => !prev);
}}
@@ -75,8 +101,9 @@ export default function PersonItem({ person }: IProps) {
) : (
{
setFormData({ ...formData, name: e.target.value });
@@ -90,8 +117,9 @@ export default function PersonItem({ person }: IProps) {
onBlur={handleEdit}
/>
)}
-
{leftComponent}
; + } + return leftComponent; + }; + + const renderRightComponent = () => { + if (typeof rightComponent === "string") { + return{rightComponent}
; + } + return rightComponent; + } + + return ( + <> + {typeof leftComponent === "string" && ( + +
+
+
+ Upgrade to Pro
+
+ Unlock all features and get unlimited access to our support
+ team.
+
+
+
+
+
+
+
+
+ {renderLeftComponent()}
+
+ {renderRightComponent()}
+
+
+ );
+}
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+ "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ {
+ variants: {
+ variant: {
+ default:
+ "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+ secondary:
+ "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ destructive:
+ "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+ outline: "text-foreground",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ },
+ }
+)
+
+export interface BadgeProps
+ extends React.HTMLAttributes
+
+
+
+ 
+ Immich Power Tools
+
+
+
+ Immich Power Tools
+
+
+
+
+
+
+
+
+
+ Connected to
+ + {ENV.IMMICH_URL} + +
+
+
+ + Made with ♥ by @zathvarun +
+