feat: add feedback button

This commit is contained in:
Henry
2024-03-08 08:28:40 +00:00
parent 6d9a4346f0
commit ab7f799f88
7 changed files with 3395 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

3357
src/app/assets/chat.json Normal file

File diff suppressed because it is too large Load Diff

View File

@@ -3,8 +3,8 @@ import { Login } from "~/app/components/auth";
export default function LoginPage() {
return (
<main className="flex h-screen flex-col items-center justify-center bg-dark-50">
<h1 className="mb-6 text-lg font-normal tracking-tight text-dark-1000">
kan
<h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
kan.bn
</h1>
<p className="mb-10 text-3xl text-dark-1000">Get started</p>
<div className="w-full rounded-md border border-dark-600 bg-dark-300 px-10 py-10 sm:max-w-md">

View File

@@ -0,0 +1,29 @@
"use client";
import { useState } from "react";
import LottieIcon from "~/app/components/LottieIcon";
import chatIcon from "~/app/assets/chat.json";
const FeedbackButton: React.FC = () => {
const [isHovered, setIsHovered] = useState(false);
const [index, setIndex] = useState(0);
const handleMouseEnter = () => {
setIsHovered(true);
setIndex((index) => index + 1);
};
return (
<button
type="button"
onMouseEnter={handleMouseEnter}
className="flex items-center rounded-md border-[1px] border-dark-600 bg-dark-50 px-2.5 py-1.5 text-sm font-normal text-dark-1000 shadow-sm"
>
<LottieIcon index={index} json={chatIcon} isPlaying={isHovered} />
<span className="ml-1">Feedback</span>
</button>
);
};
export default FeedbackButton;

View File

@@ -13,7 +13,7 @@ interface UserMenuProps {
export default function UserMenu({ imageUrl, email }: UserMenuProps) {
return (
<Menu as="div" className="relative inline-block text-left">
<Menu as="div" className="relative inline-block w-full text-left">
<div>
<Menu.Button className="-mx-2 flex items-center rounded-md p-1.5 text-dark-900 hover:bg-dark-200 hover:text-dark-1000">
{imageUrl ? (

View File

@@ -3,6 +3,7 @@ import { redirect } from "next/navigation";
import { auth } from "~/server/auth";
import SideNavigation from "./SideNavigation";
import FeedbackButton from "./FeedbackButton";
export default async function Layout(props: { children: React.ReactNode }) {
const session = await auth();
@@ -14,10 +15,11 @@ export default async function Layout(props: { children: React.ReactNode }) {
return (
<main className="flex h-screen flex-col items-center bg-dark-50">
<div className="m-auto flex h-16 w-full justify-between border-b border-dark-600 px-5 py-2 align-middle">
<div className="my-auto flex">
<h1 className="text-lg font-normal tracking-tight text-dark-1000">
kan
<div className="my-auto flex w-full items-center justify-between">
<h1 className="text-lg font-bold tracking-tight text-dark-1000">
kan.bn
</h1>
<FeedbackButton />
</div>
</div>

View File

@@ -62,7 +62,7 @@ export const MagicLinkEmail = ({ loginUrl }: MagicLinkEmailProps) => (
<Body className="bg-white">
<Container className="font-body m-auto px-3">
<Heading className="my-10 text-[24px] font-bold text-dark-200">
kan
kan.bn
</Heading>
<Heading className="text-[24px] font-bold text-dark-200">
Login to your Kan account