mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-20 19:30:41 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

search box improved & default category set

Browse Source
This commit is contained in:
Meet Patel
2023-08-01 23:32:00 +05:30
parent 86da5ff2f4
commit 712431e842
3 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateContainer.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export default function TemplateContainerWithPreview({
value={templateSearch ?? ""}
onChange={(e) => setTemplateSearch(e.target.value)}
placeholder={"Search..."}
className="block rounded-md border border-slate-100 bg-white p-2 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-0 sm:text-sm md:w-auto"
className="block rounded-md border border-slate-100 bg-white shadow-sm focus:border-slate-500 focus:outline-none focus:ring-0 sm:text-sm md:w-auto "
/>
</div>
</div>
apps/web/app/(app)/environments/[environmentId]/surveys/templates/TemplateList.tsx
+16 -20
View File
@@ -61,14 +61,9 @@ export default function TemplateList({
setCategories(fullCategories);
if (templateSearch && templateSearch.length > 0) {
setSelectedFilter(ALL_CATEGORY_NAME);
} else {
const activeFilter =
!!profile?.objective && profile.objective !== "other" ? RECOMMENDED_CATEGORY_NAME : ALL_CATEGORY_NAME;
setSelectedFilter(activeFilter);
}
const activeFilter =
!!profile?.objective && profile.objective !== "other" ? RECOMMENDED_CATEGORY_NAME : ALL_CATEGORY_NAME;
setSelectedFilter(activeFilter);
}, [profile, templateSearch]);
const addSurvey = async (activeTemplate) => {
@@ -95,8 +90,8 @@ export default function TemplateList({
const searchQuery = templateSearch?.toLowerCase() ?? "";
const searchWords = searchQuery.split(" ");
const matchesSearch = searchWords.every(word =>
(templateName?.includes(word) || templateDescription?.includes(word))
const matchesSearch = searchWords.every(
(word) => templateName?.includes(word) || templateDescription?.includes(word)
);
return matchesCategory && matchesSearch;
@@ -166,18 +161,19 @@ export default function TemplateList({
)}>
<div className="flex">
<div
className={`rounded border px-1.5 py-0.5 text-xs ${template.category === "Product Experience"
? "border-blue-300 bg-blue-50 text-blue-500"
: template.category === "Exploration"
className={`rounded border px-1.5 py-0.5 text-xs ${
template.category === "Product Experience"
? "border-blue-300 bg-blue-50 text-blue-500"
: template.category === "Exploration"
? "border-pink-300 bg-pink-50 text-pink-500"
: template.category === "Growth"
? "border-orange-300 bg-orange-50 text-orange-500"
: template.category === "Increase Revenue"
? "border-emerald-300 bg-emerald-50 text-emerald-500"
: template.category === "Customer Success"
? "border-violet-300 bg-violet-50 text-violet-500"
: "border-slate-300 bg-slate-50 text-slate-500" // default color
}`}>
? "border-orange-300 bg-orange-50 text-orange-500"
: template.category === "Increase Revenue"
? "border-emerald-300 bg-emerald-50 text-emerald-500"
: template.category === "Customer Success"
? "border-violet-300 bg-violet-50 text-violet-500"
: "border-slate-300 bg-slate-50 text-slate-500" // default color
}`}>
{template.category}
</div>
{template.preset.questions.some((question) => question.logic && question.logic.length > 0) && (
packages/ui/components/SearchBox.tsx
+4 -1
View File
@@ -15,11 +15,14 @@ const SearchBox = React.forwardRef<HTMLInputElement, InputProps>(({ className, .
<div className="relative">
<input
className={cn(
"focus:border-brand flex h-10 w-full rounded-md border bg-white px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-300",
"focus:border-brand flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-5 pr-10 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
className
)}
ref={ref}
{...props}
type="search"
name="search"
placeholder="Search..."
/>
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<SearchIcon className="h-5 w-5 text-gray-400" />