clz/nextjs-tailwindcss-headlessUI-project
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎨 Style: tag-list-2

Browse Source
This commit is contained in:
cheliangzhao 2023-09-15 11:21:39 +08:00
parent 0e3042b458
commit d928368ceb
3 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/tag/tag-add.tsx
View File

@ -53,7 +53,7 @@ export function TagAdd({
return ( return (
<Card <Card
className={cn("w-full h-fit border-none shadow-none", className)} className={cn("w-[272px] h-fit border-none shadow-none", className)}
ref={ref} ref={ref}
> >
<CardContent className="p-4 space-y-4"> <CardContent className="p-4 space-y-4">

4
app/components/tag/tag-list-2.tsx
View File

@ -65,7 +65,7 @@ const TagList2Options = ({ tag }: ITagList2OptionsProps) => {
<span>编辑</span> <span>编辑</span>
</DropdownMenuItem> </DropdownMenuItem>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="h-fit w-fit"> <PopoverContent className="h-fit w-fit p-0">
<TagAdd color={tag.color} value={tag.name} /> <TagAdd color={tag.color} value={tag.name} />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
@ -167,7 +167,7 @@ export default function TagList2({ list, className }: ITagListProps) {
<span>新建标签</span> <span>新建标签</span>
</div> </div>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[200px] p-0"> <PopoverContent className="w-fit h-fit p-0">
<TagAdd /> <TagAdd />
</PopoverContent> </PopoverContent>
</Popover> </Popover>

37
app/components/tag/tag-list.tsx
View File

@ -7,6 +7,7 @@ import {
CommandList, CommandList,
CommandSeparator, CommandSeparator,
} from "@/components/ui/command"; } from "@/components/ui/command";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Check, Plus } from "lucide-react"; import { Check, Plus } from "lucide-react";
import React, { useState } from "react"; import React, { useState } from "react";
@ -21,22 +22,26 @@ export default function TagList({ list, className }: ITagListProps) {
<Command className={cn("rounded-lg border shadow-md h-fit p-2", className)}> <Command className={cn("rounded-lg border shadow-md h-fit p-2", className)}>
<CommandList> <CommandList>
<CommandGroup> <CommandGroup>
{list.map((tag) => ( <ScrollArea className="max-h-32">
<CommandItem {list.map((tag) => (
value={tag.id + ""} <CommandItem
key={tag.id} value={tag.id + ""}
className="flex justify-between items-center cursor-pointer" key={tag.id}
onSelect={(v) => setSelectedValue(v + "")} className="flex justify-between items-center cursor-pointer"
> onSelect={(v) => setSelectedValue(v + "")}
<div className="flex justify-start items-center"> >
<div className={cn("mr-2 h-2 w-2 rounded-[2px]", tag.color)} /> <div className="flex justify-start items-center">
<span>{tag.name}</span> <div
</div> className={cn("mr-2 h-2 w-2 rounded-[2px]", tag.color)}
{selectedValue === tag.id + "" && ( />
<Check className="ml-2 h-4 w-4 text-primary" /> <span>{tag.name}</span>
)} </div>
</CommandItem> {selectedValue === tag.id + "" && (
))} <Check className="ml-2 h-4 w-4 text-primary" />
)}
</CommandItem>
))}
</ScrollArea>
</CommandGroup> </CommandGroup>
<CommandSeparator /> <CommandSeparator />
<CommandGroup> <CommandGroup>