handoff-app 1.2.2-6 → 1.2.2-7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +0 -0
- package/package.json +1 -1
- package/src/app/components/Component/ComponentLists.tsx +102 -102
package/dist/cli.js
CHANGED
|
File without changes
|
package/package.json
CHANGED
|
@@ -76,114 +76,114 @@ export const ComponentList = ({
|
|
|
76
76
|
return (
|
|
77
77
|
<TooltipProvider delayDuration={0}>
|
|
78
78
|
<div className="mx-auto w-full mb-4">
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
79
|
+
<div className="flex justify-between bg-accent rounded-xl mb-8">
|
|
80
|
+
<div className="mr-auto flex items-center gap-3 bg-accent p-2.5 rounded-md">
|
|
81
|
+
<div className="relative">
|
|
82
|
+
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400" />
|
|
83
|
+
<Input
|
|
84
|
+
type="text"
|
|
85
|
+
placeholder="Search components..."
|
|
86
|
+
className="rounded-md pl-9 pr-3 py-1 text-sm border-none shadow-none"
|
|
87
|
+
onChange={e => setSearch(e.currentTarget.value)}
|
|
88
|
+
aria-label="Search components"
|
|
89
|
+
style={{ minWidth: 200 }}
|
|
90
|
+
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
93
|
|
|
94
|
-
</div>
|
|
95
|
-
<div className="flex justify-end p-2.5 gap-2.5">
|
|
96
|
-
<div className="flex items-center gap-0.5 border border-input bg-background shadow-xs hover:text-accent-foreground p-0.5 rounded-md">
|
|
97
|
-
<Select
|
|
98
|
-
value={category}
|
|
99
|
-
onValueChange={val => {
|
|
100
|
-
setCategory(val);
|
|
101
|
-
}}
|
|
102
|
-
aria-label="Filter by category"
|
|
103
|
-
>
|
|
104
|
-
<SelectTrigger className="rounded-md [&_span]:text-xs [&_svg]:ml-2.5 [&_svg]:size-3 py-1 px-2 pl-3 text-sm border-none shadow-none bg-transparent focus:border-blue-400 focus:outline-none">
|
|
105
|
-
<SelectValue placeholder="All Categories" />
|
|
106
|
-
</SelectTrigger>
|
|
107
|
-
<SelectContent>
|
|
108
|
-
<SelectItem value="all">All Categories</SelectItem>
|
|
109
|
-
{categories.map((category) => (
|
|
110
|
-
<SelectItem key={category} value={category}>
|
|
111
|
-
{category}
|
|
112
|
-
</SelectItem>
|
|
113
|
-
))}
|
|
114
|
-
</SelectContent>
|
|
115
|
-
</Select>
|
|
116
|
-
|
|
117
|
-
<hr className="h-7 w-px bg-input" />
|
|
118
|
-
|
|
119
|
-
<Tooltip>
|
|
120
|
-
<TooltipTrigger asChild>
|
|
121
|
-
<Button variant="ghost" className={cn("w-9", groupBy && 'bg-accent text-accent-foreground')} onClick={() => setGroupBy(!groupBy)}>
|
|
122
|
-
<Rows className="size-3.5" strokeWidth={1.5} />
|
|
123
|
-
<span className="sr-only">Group by category</span>
|
|
124
|
-
</Button>
|
|
125
|
-
</TooltipTrigger>
|
|
126
|
-
<TooltipContent>
|
|
127
|
-
Group by category
|
|
128
|
-
</TooltipContent>
|
|
129
|
-
</Tooltip>
|
|
130
94
|
</div>
|
|
131
|
-
<
|
|
132
|
-
<
|
|
133
|
-
<
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
95
|
+
<div className="flex justify-end p-2.5 gap-2.5">
|
|
96
|
+
<div className="flex items-center gap-0.5 border border-input bg-background shadow-xs hover:text-accent-foreground p-0.5 rounded-md">
|
|
97
|
+
<Select
|
|
98
|
+
value={category}
|
|
99
|
+
onValueChange={val => {
|
|
100
|
+
setCategory(val);
|
|
101
|
+
}}
|
|
102
|
+
aria-label="Filter by category"
|
|
103
|
+
>
|
|
104
|
+
<SelectTrigger className="rounded-md [&_span]:text-xs [&_svg]:ml-2.5 [&_svg]:size-3 py-1 px-2 pl-3 text-sm border-none shadow-none bg-transparent focus:border-blue-400 focus:outline-none">
|
|
105
|
+
<SelectValue placeholder="All Categories" />
|
|
106
|
+
</SelectTrigger>
|
|
107
|
+
<SelectContent>
|
|
108
|
+
<SelectItem value="all">All Categories</SelectItem>
|
|
109
|
+
{categories.filter((category) => category !== '').map((category) => (
|
|
110
|
+
<SelectItem key={category} value={category}>
|
|
111
|
+
{category}
|
|
112
|
+
</SelectItem>
|
|
113
|
+
))}
|
|
114
|
+
</SelectContent>
|
|
115
|
+
</Select>
|
|
116
|
+
|
|
117
|
+
<hr className="h-7 w-px bg-input" />
|
|
118
|
+
|
|
119
|
+
<Tooltip>
|
|
120
|
+
<TooltipTrigger asChild>
|
|
121
|
+
<Button variant="ghost" className={cn("w-9", groupBy && 'bg-accent text-accent-foreground')} onClick={() => setGroupBy(!groupBy)}>
|
|
122
|
+
<Rows className="size-3.5" strokeWidth={1.5} />
|
|
123
|
+
<span className="sr-only">Group by category</span>
|
|
124
|
+
</Button>
|
|
125
|
+
</TooltipTrigger>
|
|
126
|
+
<TooltipContent>
|
|
127
|
+
Group by category
|
|
128
|
+
</TooltipContent>
|
|
129
|
+
</Tooltip>
|
|
130
|
+
</div>
|
|
131
|
+
<ToggleGroup className='flex gap-0.5 border border-input bg-background shadow-xs hover:text-accent-foreground p-0.5 rounded-md' type="single" value={layout} onValueChange={(value) => storeLayout(value)}>
|
|
132
|
+
<Tooltip>
|
|
133
|
+
<TooltipTrigger asChild>
|
|
134
|
+
<ToggleGroupItem className={cn("size-9 py-2 px-2 flex items-center justify-center hover:bg-accent rounded-md", layout === 'grid' && 'bg-accent text-accent-foreground')} value="grid" aria-label="Grid layout" >
|
|
135
|
+
<LayoutGrid className="size-3.5" strokeWidth={1.5} />
|
|
136
|
+
</ToggleGroupItem>
|
|
137
|
+
</TooltipTrigger>
|
|
138
|
+
<TooltipContent>
|
|
139
|
+
Grid layout
|
|
140
|
+
</TooltipContent>
|
|
141
|
+
</Tooltip>
|
|
142
|
+
<Tooltip>
|
|
143
|
+
<TooltipTrigger asChild>
|
|
144
|
+
<ToggleGroupItem className={cn("size-9 py-2 px-2 flex items-center justify-center hover:bg-accent rounded-md", layout === 'single' && 'bg-accent text-accent-foreground')} value="single" aria-label="Single column layout" >
|
|
145
|
+
<AlignJustify className="size-3.5" strokeWidth={1.5} />
|
|
146
|
+
</ToggleGroupItem>
|
|
147
|
+
</TooltipTrigger>
|
|
148
|
+
<TooltipContent>
|
|
149
|
+
Column layout
|
|
150
|
+
</TooltipContent>
|
|
151
|
+
</Tooltip>
|
|
152
|
+
</ToggleGroup>
|
|
153
|
+
</div>
|
|
153
154
|
</div>
|
|
154
|
-
</div>
|
|
155
155
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
156
|
+
{groupBy ? (
|
|
157
|
+
<>
|
|
158
|
+
{Object.keys(groupedList).map((group) => {
|
|
159
|
+
return (
|
|
160
|
+
<div key={`group-${group}`} className="mb-8">
|
|
161
|
+
<HeadersType.H3 className="mb-4 text-lg font-medium border-b border-gray-200 pb-2">{group}</HeadersType.H3>
|
|
162
|
+
<div
|
|
163
|
+
className={cn(
|
|
164
|
+
'grid',
|
|
165
|
+
layout === 'grid' ? 'grid-cols-1 gap-10 min-[800px]:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4' : 'grid-cols-1 gap-2'
|
|
166
|
+
)}
|
|
167
|
+
>
|
|
168
|
+
{groupedList[group].map((component) => {
|
|
169
|
+
return <ComponentsPageCard key={`component-${component.id}`} component={component} layout={layout} />;
|
|
170
|
+
})}
|
|
171
|
+
</div>
|
|
171
172
|
</div>
|
|
172
|
-
|
|
173
|
-
)
|
|
173
|
+
);
|
|
174
|
+
})}
|
|
175
|
+
</>
|
|
176
|
+
) : (
|
|
177
|
+
<div
|
|
178
|
+
className={cn(
|
|
179
|
+
'grid',
|
|
180
|
+
layout === 'grid' ? 'grid-cols-1 gap-10 min-[800px]:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4' : 'grid-cols-1 gap-2'
|
|
181
|
+
)}
|
|
182
|
+
> {list.map((component) => {
|
|
183
|
+
return <ComponentsPageCard key={`component-${component.id}`} component={component} layout={layout} />;
|
|
174
184
|
})}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<div
|
|
178
|
-
className={cn(
|
|
179
|
-
'grid',
|
|
180
|
-
layout === 'grid' ? 'grid-cols-1 gap-10 min-[800px]:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4' : 'grid-cols-1 gap-2'
|
|
181
|
-
)}
|
|
182
|
-
> {list.map((component) => {
|
|
183
|
-
return <ComponentsPageCard key={`component-${component.id}`} component={component} layout={layout} />;
|
|
184
|
-
})}
|
|
185
|
-
</div>
|
|
186
|
-
)}
|
|
185
|
+
</div>
|
|
186
|
+
)}
|
|
187
187
|
</div>
|
|
188
188
|
</TooltipProvider>
|
|
189
189
|
);
|