mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-18 00:37:27 +02:00
📢 Add Featurebase (#796)
This commit is contained in:
Luke Vella
GitHub
parent
5532723d23
commit
222947292b
8 changed files with 151 additions and 157 deletions
|
|
@ -1,107 +1,75 @@
|
|||
import { trpc } from "@rallly/backend";
|
||||
import { CheckCircleIcon, MegaphoneIcon } from "@rallly/icons";
|
||||
import { Button } from "@rallly/ui/button";
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
|
||||
import {
|
||||
BugIcon,
|
||||
LifeBuoyIcon,
|
||||
LightbulbIcon,
|
||||
MegaphoneIcon,
|
||||
SmileIcon,
|
||||
} from "@rallly/icons";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@rallly/ui/dropdown-menu";
|
||||
import Link from "next/link";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { Trans } from "next-i18next";
|
||||
|
||||
import { Logo } from "@/components/logo";
|
||||
import { useModalState } from "@/components/modal/use-modal";
|
||||
|
||||
const FeedbackForm = (props: { onClose: () => void }) => {
|
||||
const { t } = useTranslation();
|
||||
const sendFeedback = trpc.feedback.send.useMutation();
|
||||
const { handleSubmit, register, formState } = useForm<{ content: string }>();
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(async (data) => {
|
||||
await sendFeedback.mutateAsync(data);
|
||||
})}
|
||||
className="shadow-huge animate-popIn fixed bottom-8 right-8 z-20 w-[460px] max-w-full origin-bottom-right space-y-2 overflow-hidden rounded-md border bg-white p-3"
|
||||
>
|
||||
{formState.isSubmitted ? (
|
||||
<div className="absolute inset-0 flex h-full w-full items-center justify-center bg-white">
|
||||
<div className="space-y-3 text-center">
|
||||
<CheckCircleIcon className="inline-block h-14 text-green-500" />
|
||||
<div>{t("feedbackSent")}</div>
|
||||
<div>
|
||||
<button onClick={props.onClose} className="text-link">
|
||||
{t("close")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="font-semibold text-gray-800">
|
||||
{t("feedbackFormTitle")}
|
||||
</div>
|
||||
<fieldset>
|
||||
<label className="mb-2" htmlFor="feedback">
|
||||
<Trans
|
||||
t={t}
|
||||
i18nKey="feedbackFormLabel"
|
||||
components={{ appname: <Logo /> }}
|
||||
/>
|
||||
</label>
|
||||
<textarea
|
||||
id="feedback"
|
||||
autoFocus={true}
|
||||
placeholder={t("feedbackFormPlaceholder")}
|
||||
rows={4}
|
||||
className="w-full border bg-gray-50 p-2 text-gray-800"
|
||||
{...register("content", { required: true })}
|
||||
/>
|
||||
</fieldset>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={props.onClose}>{t("cancel")}</Button>
|
||||
<Button
|
||||
loading={formState.isSubmitting}
|
||||
type="submit"
|
||||
variant="primary"
|
||||
>
|
||||
{t("send")}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<Trans
|
||||
t={t}
|
||||
i18nKey="feedbackFormFooter"
|
||||
components={{
|
||||
a: (
|
||||
<Link href="https://support.rallly.co" className="text-link" />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
import { FeaturebaseProvider } from "@/components/featurebase";
|
||||
|
||||
const FeedbackButton = () => {
|
||||
const { t } = useTranslation();
|
||||
const [isVisible, show, close] = useModalState();
|
||||
if (isVisible) {
|
||||
return <FeedbackForm onClose={close} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={show}
|
||||
className="shadow-huge fixed bottom-8 right-8 hidden h-14 w-14 items-center justify-center rounded-full bg-gray-800 sm:inline-flex"
|
||||
>
|
||||
<MegaphoneIcon className="h-7 text-white" />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="left">
|
||||
<p>{t("sendFeedback")}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<FeaturebaseProvider>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger className="shadow-huge fixed bottom-8 right-6 hidden h-12 w-12 items-center justify-center rounded-full bg-gray-800 hover:bg-gray-700 active:shadow-none sm:inline-flex">
|
||||
<MegaphoneIcon className="h-5 text-white" />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent sideOffset={10} align="end">
|
||||
<DropdownMenuLabel>
|
||||
<Trans i18nKey="menu" />
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`https://rallly.featurebase.app/?b=feedback`}
|
||||
target={"_blank"}
|
||||
>
|
||||
<SmileIcon className="mr-2 h-4 w-4" />
|
||||
<Trans i18nKey="sendFeedback" defaults="Send Feedback" />
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`https://rallly.featurebase.app/?b=feature-request`}
|
||||
target={"_blank"}
|
||||
>
|
||||
<LightbulbIcon className="mr-2 h-4 w-4" />
|
||||
<Trans
|
||||
i18nKey={"featureRequest"}
|
||||
defaults={"Request a Feature"}
|
||||
/>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
href={`https://rallly.featurebase.app/?b=bug-reports`}
|
||||
target={"_blank"}
|
||||
>
|
||||
<BugIcon className="mr-2 h-4 w-4" />
|
||||
<Trans i18nKey={"bugReport"} defaults={"Report an Issue"} />
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={`https://support.rallly.co`} target={"_blank"}>
|
||||
<LifeBuoyIcon className="mr-2 h-4 w-4" />
|
||||
<Trans i18nKey={"getSupport"} defaults={"Get Support"} />
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FeaturebaseProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue