mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-21 03:03:25 -05:00
Code Issues Packages Projects Releases 164 Wiki Activity

feat: Add "How to add people" to People View (#1910)

Browse Source
This commit is contained in:
Khanh Ho
2024-01-17 11:23:46 +01:00
committed by GitHub
parent 1901313873
commit 602238f6a5
3 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/environments/[environmentId]/components/HowToAddPeopleButton.tsx
+12
View File
@@ -0,0 +1,12 @@
import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
import { Button } from "@formbricks/ui/Button";
export default function HowToAddPeopleButton() {
return (
<Button variant="secondary" href="https://formbricks.com/docs/attributes/identify-users" target="_blank">
<QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
How to add people
</Button>
);
}
apps/web/app/(app)/environments/[environmentId]/people/loading.tsx
+34 -22
View File
@@ -1,31 +1,43 @@
import HowToAddPeopleButton from "@/app/(app)/environments/[environmentId]/components/HowToAddPeopleButton";
export default function Loading() {
return (
<div className="rounded-lg border border-slate-200">
<div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
<div className="col-span-3 pl-6">User</div>
<div className="col-span-2 text-center">User ID</div>
<div className="col-span-2 text-center">Email</div>
<>
<div className="mb-6 text-right">
<div className="mb-6 flex items-center justify-end text-right">
<HowToAddPeopleButton />
</div>
</div>
<div className="w-full">
{[...Array(3)].map((_, index) => (
<div key={index} className="m-2 grid h-16 grid-cols-7 content-center rounded-lg hover:bg-slate-100">
<div className="col-span-3 flex items-center pl-6 text-sm">
<div className="flex items-center">
<div className="ph-no-capture h-10 w-10 flex-shrink-0 animate-pulse rounded-full bg-gray-200"></div>
<div className="ml-4">
<div className="ph-no-capture h-4 w-28 animate-pulse rounded-full bg-gray-200 font-medium text-slate-900"></div>
<div className="rounded-lg border border-slate-200">
<div className="grid h-12 grid-cols-7 content-center rounded-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
<div className="col-span-3 pl-6">User</div>
<div className="col-span-2 text-center">User ID</div>
<div className="col-span-2 text-center">Email</div>
</div>
<div className="w-full">
{[...Array(3)].map((_, index) => (
<div
key={index}
className="m-2 grid h-16 grid-cols-7 content-center rounded-lg hover:bg-slate-100">
<div className="col-span-3 flex items-center pl-6 text-sm">
<div className="flex items-center">
<div className="ph-no-capture h-10 w-10 flex-shrink-0 animate-pulse rounded-full bg-gray-200"></div>
<div className="ml-4">
<div className="ph-no-capture h-4 w-28 animate-pulse rounded-full bg-gray-200 font-medium text-slate-900"></div>
</div>
</div>
</div>
<div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
<div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
</div>
<div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
<div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
</div>
</div>
<div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
<div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
</div>
<div className="col-span-2 my-auto whitespace-nowrap text-center text-sm text-slate-500">
<div className="ph-no-capture m-12 h-4 animate-pulse rounded-full bg-gray-200 text-slate-900"></div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</>
);
}
apps/web/app/(app)/environments/[environmentId]/people/page.tsx
+6
View File
@@ -1,3 +1,4 @@
import HowToAddPeopleButton from "@/app/(app)/environments/[environmentId]/components/HowToAddPeopleButton";
import Link from "next/link";
import { ITEMS_PER_PAGE } from "@formbricks/lib/constants";
@@ -41,6 +42,11 @@ export default async function PeoplePage({
return (
<>
<div className="mb-6 text-right">
<div className="mb-6 flex items-center justify-end text-right">
<HowToAddPeopleButton />
</div>
</div>
{people.length === 0 ? (
<EmptySpaceFiller
type="table"