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

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

@ -7,6 +7,7 @@ import {
CommandList,
CommandSeparator,
} from "@/components/ui/command";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { Check, Plus } from "lucide-react";
import React, { useState } from "react";
@ -21,6 +22,7 @@ export default function TagList({ list, className }: ITagListProps) {
<Command className={cn("rounded-lg border shadow-md h-fit p-2", className)}>
<CommandList>
<CommandGroup>
<ScrollArea className="max-h-32">
{list.map((tag) => (
<CommandItem
value={tag.id + ""}
@ -29,7 +31,9 @@ export default function TagList({ list, className }: ITagListProps) {
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={cn("mr-2 h-2 w-2 rounded-[2px]", tag.color)}
/>
<span>{tag.name}</span>
</div>
{selectedValue === tag.id + "" && (
@ -37,6 +41,7 @@ export default function TagList({ list, className }: ITagListProps) {
)}
</CommandItem>
))}
</ScrollArea>
</CommandGroup>
<CommandSeparator />
<CommandGroup>