feat: add feedback button
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
3357
src/app/assets/chat.json
Normal file
3357
src/app/assets/chat.json
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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">
|
||||
|
||||
29
src/app/components/FeedbackButton.tsx
Normal file
29
src/app/components/FeedbackButton.tsx
Normal 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;
|
||||
@@ -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 ? (
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user