shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add feedback button

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

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

File diff suppressed because it is too large Load Diff

4
src/app/auth/login/page.tsx
View File

@@ -3,8 +3,8 @@ import { Login } from "~/app/components/auth";
export default function LoginPage() { export default function LoginPage() {
return ( return (
<main className="flex h-screen flex-col items-center justify-center bg-dark-50"> <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"> <h1 className="mb-6 text-lg font-bold tracking-tight text-dark-1000">
貫 kan kan.bn
</h1> </h1>
<p className="mb-10 text-3xl text-dark-1000">Get started</p> <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"> <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
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;

2
src/app/components/UserMenu.tsx
View File

@@ -13,7 +13,7 @@ interface UserMenuProps {
export default function UserMenu({ imageUrl, email }: UserMenuProps) { export default function UserMenu({ imageUrl, email }: UserMenuProps) {
return ( return (
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block w-full text-left">
<div> <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"> <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 ? ( {imageUrl ? (

8
src/app/components/dashboard.tsx
View File

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

2
src/email/emails/magic-link.tsx
View File

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