Skip to content

Commit

Permalink
🔧 update: comaand component in popovercontent of sidebar menu option.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yashdev9274
yashdev9274 committed Jun 12, 2024
1 parent 6115d55 commit cffeb67
Showing 1 changed file with 129 additions and 5 deletions.
134 changes: 129 additions & 5 deletions src/components/sidebar/menu-options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,23 @@ import {
SubAccountSidebarOption,
} from '@prisma/client'
import { useEffect, useMemo, useState } from 'react'
import { Sheet, SheetContent, SheetTrigger } from '../ui/sheet'
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '../ui/sheet'
import { Button } from '../ui/button'
import { LucideChevronDownCircle, Menu } from 'lucide-react'
import { LucideChevronDownCircle, Menu, PlusCircleIcon } from 'lucide-react'
import clsx from 'clsx'
import { AspectRatio } from '../ui/aspect-ratio'
import Image from 'next/image'
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
import Compass from '../icons/compass'
import { Command } from '../ui/command'
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '../ui/command'
import Link from 'next/link'


type Props = {
Expand Down Expand Up @@ -112,8 +120,124 @@ const MenuOptions = ({
</Button>
</PopoverTrigger>
<PopoverContent className="w-80 h-80 mt-4 z-[200]">
<Command>

<Command className="rounded-lg">
<CommandInput placeholder="Search Accounts..." />
<CommandList className="pb-16">
<CommandEmpty> No results found</CommandEmpty>
{(user?.role === 'AGENCY_OWNER' ||
user?.role === 'AGENCY_ADMIN') &&
user?.Agency && (
<CommandGroup heading="Agency">
<CommandItem className="!bg-transparent my-2 text-primary broder-[1px] border-border p-2 rounded-md hover:!bg-muted cursor-pointer transition-all">
{defaultOpen ? (
<Link
href={`/agency/${user?.Agency?.id}`}
className="flex gap-4 w-full h-full"
>
<div className="relative w-16">
<Image
src={user?.Agency?.agencyLogo}
alt="Agency Logo"
fill
className="rounded-md object-contain"
/>
</div>
<div className="flex flex-col flex-1">
{user?.Agency?.name}
<span className="text-muted-foreground">
{user?.Agency?.address}
</span>
</div>
</Link>
) : (
<SheetClose asChild>
<Link
href={`/agency/${user?.Agency?.id}`}
className="flex gap-4 w-full h-full"
>
<div className="relative w-16">
<Image
src={user?.Agency?.agencyLogo}
alt="Agency Logo"
fill
className="rounded-md object-contain"
/>
</div>
<div className="flex flex-col flex-1">
{user?.Agency?.name}
<span className="text-muted-foreground">
{user?.Agency?.address}
</span>
</div>
</Link>
</SheetClose>
)}
</CommandItem>
</CommandGroup>
)}
<CommandGroup heading="Accounts">
{!!subAccounts
? subAccounts.map((subaccount) => (
<CommandItem key={subaccount.id}>
{defaultOpen ? (
<Link
href={`/subaccount/${subaccount.id}`}
className="flex gap-4 w-full h-full"
>
<div className="relative w-16">
<Image
src={subaccount.subAccountLogo}
alt="subaccount Logo"
fill
className="rounded-md object-contain"
/>
</div>
<div className="flex flex-col flex-1">
{subaccount.name}
<span className="text-muted-foreground">
{subaccount.address}
</span>
</div>
</Link>
) : (
<SheetClose asChild>
<Link
href={`/subaccount/${subaccount.id}`}
className="flex gap-4 w-full h-full"
>
<div className="relative w-16">
<Image
src={subaccount.subAccountLogo}
alt="subaccount Logo"
fill
className="rounded-md object-contain"
/>
</div>
<div className="flex flex-col flex-1">
{subaccount.name}
<span className="text-muted-foreground">
{subaccount.address}
</span>
</div>
</Link>
</SheetClose>
)}
</CommandItem>
))
: 'No Accounts'}
</CommandGroup>
</CommandList>
{(user?.role === 'AGENCY_OWNER' ||
user?.role === 'AGENCY_ADMIN') && (
<SheetClose>
<Button
className="w-full flex gap-2"
>
<PlusCircleIcon size={15} />
Create Sub Account
</Button>
</SheetClose>
)}
</Command>

</PopoverContent>
Expand Down

0 comments on commit cffeb67

Please sign in to comment.