Skip to content

Commit f69a81a

Browse files
mikita-kandratsyeumikita-kandratsyeu
authored
chore: chat UI 3.0 (#59)
* uppdated ui * ui * updated side bar * updated embed chat ui * updated deps * redability issue
1 parent 83aee6f commit f69a81a

File tree

24 files changed

+94
-78
lines changed

24 files changed

+94
-78
lines changed

‎actions/chat/get-chat-initial.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const getChatInitial = async () => {
2222
content: 'You are a machine that only returns array format.',
2323
},
2424
{
25-
content: `Generate 4 questions ranging from 120 to 150 characters long for an intelligent chat. Language code is ${locale}. Write the result to an array.`,
25+
content: `Generate 4 questions ranging from 120 to 150 characters long for an intelligent chat on the topic of programming. Language code is ${locale}. Write the result to an array.`,
2626
role: ChatCompletionRole.USER as unknown as ChatCompletionUserMessageParam['role'],
2727
},
2828
],

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-body.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -102,9 +102,10 @@ export const ChatBody = ({
102102
<AvatarFallback>AI</AvatarFallback>
103103
</Avatar>
104104
<p className="mb-5 mx-4 text-2xl font-medium text-center">{t('title')}</p>
105+
<ChatIntro introMessages={introMessages} onSubmit={onSubmit} />
105106
</div>
106107
)}
107-
<div className={cn(isShared ? 'h-[calc(100%-4rem)]' : 'h-[calc(100%-12rem)]', 'relative')}>
108+
<div className={cn(isShared ? 'h-[calc(100%-4rem)]' : 'h-[calc(100%-17rem)]', 'relative')}>
108109
{hasMessages && (
109110
<ScrollToBottom
110111
className="flex h-full w-full flex-col"
@@ -126,7 +127,7 @@ export const ChatBody = ({
126127
return (
127128
<div
128129
key={message.id}
129-
className="flex flex-1 text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] px-4 first:mt-4 last:mb-6"
130+
className="flex flex-1 text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-4xl px-4 first:mt-4 last:mb-6"
130131
>
131132
<ChatBubble
132133
isShared={isShared}
@@ -138,7 +139,7 @@ export const ChatBody = ({
138139
);
139140
})}
140141
{assistantMessage && (
141-
<div className="flex flex-1 text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] px-4 first:mt-4 last:mb-6">
142+
<div className="flex flex-1 text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-4xl px-4 first:mt-4 last:mb-6">
142143
<ChatBubble
143144
isSubmitting={isSubmitting}
144145
message={{ role: ChatCompletionRole.ASSISTANT, content: '' }}
@@ -150,9 +151,6 @@ export const ChatBody = ({
150151
</Content>
151152
</ScrollToBottom>
152153
)}
153-
{!hasMessages && !isShared && (
154-
<ChatIntro introMessages={introMessages} onSubmit={onSubmit} />
155-
)}
156154
{!sticky && hasMessages && (
157155
<Button
158156
className="w-10 h-10 rounded-full p-2 absolute bottom-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-input.tsx

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
'use client';
22

3-
import { StopCircle } from 'lucide-react';
3+
import { SendHorizonal, StopCircle } from 'lucide-react';
44
import { useTranslations } from 'next-intl';
5-
import { SyntheticEvent } from 'react';
6-
import { BsStars } from 'react-icons/bs';
5+
import { SyntheticEvent, useState } from 'react';
76

87
import { Button, Textarea } from '@/components/ui';
8+
import { LIMIT_CHAT_INPUT } from '@/constants/chat';
99
import { cn } from '@/lib/utils';
1010

1111
type ChatInputProps = {
@@ -25,21 +25,28 @@ export const ChatInput = ({
2525
}: ChatInputProps) => {
2626
const t = useTranslations('chat.input');
2727

28+
const [inputLength, setInputLength] = useState(0);
29+
2830
return (
29-
<div className="w-full relative">
30-
<div className="flex flex-1 w-full flex-shrink-0 items-center justify-center">
31-
<div className="flex w-full h-full flex-col pb-2">
31+
<div className="w-full h-full relative flex items-end">
32+
<div className="flex flex-1 w-full flex-shrink-0">
33+
<div className="flex w-full h-full flex-col pb-2 px-4">
3234
<form
33-
className="mx-auto flex flex-row gap-3 lg:max-w-2xl xl:max-w-3xl w-full h-full px-4 relative"
35+
className={cn(
36+
'mx-auto flex flex-col lg:max-w-2xl xl:max-w-4xl w-full h-full border rounded-sm z-10 focus-within:border-b-indigo-500 focus-within:border-b-2 transition-colors duration-200 ease-in-out',
37+
inputLength >= LIMIT_CHAT_INPUT && 'focus-within:border-b-red-600',
38+
)}
3439
onSubmit={onSubmit}
3540
>
3641
<Textarea
37-
className="resize-none flex-1 pr-16 overflow-auto z-10"
42+
className="resize-none overflow-auto z-10 border-none"
3843
disabled={isSubmitting}
44+
maxLength={LIMIT_CHAT_INPUT}
3945
placeholder={t('enterMessage')}
4046
value={currenMessage}
4147
onChange={(event) => {
4248
setCurrentMessage(event.target.value);
49+
setInputLength(event.target.value.length);
4350
}}
4451
onKeyDown={(event) => {
4552
if (event.key == 'Enter' && !event.shiftKey && !isSubmitting) {
@@ -48,24 +55,24 @@ export const ChatInput = ({
4855
}
4956
}}
5057
/>
51-
<Button
52-
className={cn(
53-
'absolute bottom-3 right-7 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white hover:text-white font-medium z-10 px-2',
54-
isSubmitting && 'w-12',
55-
)}
56-
disabled={!currenMessage && !isSubmitting}
57-
type={isSubmitting ? 'button' : 'submit'}
58-
variant="outline"
59-
onClick={isSubmitting ? onAbortGenerating : () => {}}
60-
>
61-
{isSubmitting && <StopCircle className="w-4 h-4" />}
62-
{!isSubmitting && (
63-
<>
64-
<BsStars className="mr-1" />
65-
{t('ask')}
66-
</>
67-
)}
68-
</Button>
58+
<div className="flex bg-background justify-between px-2 pb-4 pt-2 items-end">
59+
<div className="text-xs text-muted-foreground">
60+
{inputLength} / {LIMIT_CHAT_INPUT}
61+
</div>
62+
<Button
63+
className={cn(
64+
'bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white hover:text-white font-medium z-10 px-2 text-sm',
65+
isSubmitting && 'w-12',
66+
)}
67+
disabled={!currenMessage && !isSubmitting}
68+
type={isSubmitting ? 'button' : 'submit'}
69+
variant="outline"
70+
onClick={isSubmitting ? onAbortGenerating : () => {}}
71+
>
72+
{isSubmitting && <StopCircle className="w-4 h-4 mx-2" />}
73+
{!isSubmitting && <SendHorizonal className="w-4 h-4 mx-2" />}
74+
</Button>
75+
</div>
6976
</form>
7077
<div className="p-2 text-center text-xs text-muted-foreground z-10">{t('footer')}</div>
7178
</div>

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-intro.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ export const ChatIntro = ({ introMessages, onSubmit }: ChatIntroProps) => {
2727
};
2828

2929
return (
30-
<div className="h-full flex flex-col justify-end">
31-
<div className="mx-auto grid m:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-2 lg:max-w-2xl xl:max-w-3xl w-full pb-6 px-4">
30+
<div className="h-full flex flex-col justify-center">
31+
<div className="mx-auto grid m:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2 gap-2 lg:max-w-2xl xl:max-w-4xl w-full pb-6 px-4">
3232
{introMessages.slice(0, 2).map((message) => {
3333
const { head, tail } = mapQuestion(message);
3434

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-shared-top-bar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const ChatSharedTopBar = ({ expiredAt, title }: ChatSharedTopBarProps) =>
1515

1616
return (
1717
<div className={'w-full h-[75px]'}>
18-
<div className="flex flex-1 flex-col text-base md:px-5 lg:px-1 xl:px-5 mx-auto md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] pt-4 px-4">
18+
<div className="flex flex-1 flex-col text-base md:px-5 lg:px-1 xl:px-5 mx-auto md:max-w-3xl lg:max-w-[40rem] xl:max-w-4xl pt-4 px-4">
1919
<div className="font-medium">{title}</div>
2020
{expiredAt && (
2121
<div className="text-xs text-muted-foreground">

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat-top-bar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export const ChatTopBar = ({
8080

8181
return (
8282
<div className={cn('w-full h-[75px]', !messages.length && 'h-full')}>
83-
<div className="flex flex-1 flex-col text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem] pt-4 px-4">
83+
<div className="flex flex-1 flex-col text-base md:px-5 lg:px-1 xl:px-5 mx-auto gap-3 md:max-w-3xl lg:max-w-[40rem] xl:max-w-4xl pt-4 px-4">
8484
<div className="flex items-center justify-between w-full gap-x-2">
8585
<Popover open={open} onOpenChange={setOpen}>
8686
<PopoverTrigger className={cn(isEmbed && 'flex-1')} asChild>

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-main/chat.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const Chat = ({ conversations = [], initialData, isEmbed, isShared }: Cha
189189
return (
190190
<div className="flex h-full w-full">
191191
<div className="flex h-full w-full flex-col overflow-hidden bg-background outline-none">
192-
<div className="flex h-full w-full flex-col justify-between">
192+
<div className="flex h-full w-full flex-col">
193193
{isShared && (
194194
<ChatSharedTopBar
195195
expiredAt={conversations?.[0]?.shared?.expiredAt}

‎app/(chat)/(routes)/chat/[[...slug]]/_components/chat-sidebar/chat-sidebar-items.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const ChatSideBarItems = ({ conversations }: ChatSideBarItemsProps) => {
4040
setIsFetching,
4141
} = useChatStore();
4242

43+
const [clientConversations, setClientConversations] = useState(conversations);
4344
const [editTitleId, setEditTitleId] = useState('');
4445
const [isReordering, setIsReordering] = useState(false);
4546
const [actionMenuOpen, setActionMenuOpen] = useState(false);
@@ -49,6 +50,10 @@ export const ChatSideBarItems = ({ conversations }: ChatSideBarItemsProps) => {
4950
(conversation) => conversation.id === conversationId,
5051
);
5152

53+
useEffect(() => {
54+
setClientConversations(conversations);
55+
}, [conversations]);
56+
5257
useEffect(() => {
5358
document.body.style.removeProperty('pointer-events');
5459
}, [open]);
@@ -115,10 +120,7 @@ export const ChatSideBarItems = ({ conversations }: ChatSideBarItemsProps) => {
115120
return;
116121
}
117122

118-
const copyConversations = conversations.map((conversation) => ({
119-
id: conversation.id,
120-
position: conversation.position,
121-
}));
123+
const copyConversations = Array.from(conversations);
122124
const [reorderedItem] = copyConversations.splice(result.source.index, 1);
123125
copyConversations.splice(result.destination.index, 0, reorderedItem);
124126

@@ -127,6 +129,8 @@ export const ChatSideBarItems = ({ conversations }: ChatSideBarItemsProps) => {
127129

128130
const updatedConversations = copyConversations.slice(startIndex, endIndex + 1);
129131

132+
setClientConversations(copyConversations);
133+
130134
const bulkUpdateData = updatedConversations.map((conversation) => ({
131135
id: conversation.id,
132136
position: copyConversations.findIndex((item) => item.id === conversation.id),
@@ -149,7 +153,7 @@ export const ChatSideBarItems = ({ conversations }: ChatSideBarItemsProps) => {
149153
<Droppable droppableId="conversations">
150154
{(provided) => (
151155
<div {...provided.droppableProps} ref={provided.innerRef}>
152-
{conversations.map((conversation, index) => {
156+
{clientConversations.map((conversation, index) => {
153157
const isActive = conversationId === conversation.id;
154158
const isShared = conversation.shared.isShared;
155159

‎components/chat/chat.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import { ArrowRightToLine, SquareArrowOutUpRight } from 'lucide-react';
3+
import { SquareArrowOutUpRight, X } from 'lucide-react';
44
import Image from 'next/image';
55
import Link from 'next/link';
66
import { useState } from 'react';
@@ -35,7 +35,7 @@ export const Chat = () => {
3535
<div className="fixed pt-4 px-4 flex gap-x-1">
3636
<SheetClose asChild>
3737
<Button className="w-full" variant="outline">
38-
<ArrowRightToLine className="h-4 w-4" />
38+
<X className="h-4 w-4" />
3939
</Button>
4040
</SheetClose>
4141
<Link href={absoluteUrl('/chat')} target="_blank">

‎components/common/currency-input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const CurrencyInput = ({
2525
}: CurrencyInputProps) => {
2626
return (
2727
<Input
28-
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
28+
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
2929
disabled={disabled}
3030
id={id}
3131
intlConfig={intlConfig}

‎components/common/markdown-text.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const MarkdownText = ({ className, text }: MarkdownTextProps) => {
1616
return (
1717
<div
1818
className={cn(
19-
'text-sm prose dark:prose-invert prose-a:text-accent-primary prose-a:no-underline hover:prose-a:underline prose-pre:bg-transparent',
19+
'text-sm prose prose-sm !max-w-none dark:prose-invert prose-a:text-accent-primary prose-a:no-underline hover:prose-a:underline prose-pre:bg-transparent',
2020
className,
2121
)}
2222
>

‎components/loaders/chat-skeleton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { Skeleton } from '../ui/skeleton';
44

55
export const ChatSkeleton = () => (
6-
<div className="mx-auto flex flex-row gap-3 lg:max-w-2xl xl:max-w-3xl w-full h-full px-4">
6+
<div className="mx-auto flex flex-row gap-3 lg:max-w-2xl xl:max-w-4xl w-full h-full px-4">
77
<div className="w-full h-full px-2 pt-6 pb-4 flex flex-col mx-auto justify-between">
88
<div className="flex mb-10 justify-between space-x-2">
99
<Skeleton className="h-8 w-[140px]" />

‎components/modals/chat-conversation-modal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ export const ChatConversationModal = ({
8989

9090
if (
9191
initialData?.shared.isShared !== watchIsShared ||
92-
initialData.shared.isOnlyAuth !== watchIsOnlyAuth
92+
initialData?.shared.isOnlyAuth !== watchIsOnlyAuth
9393
) {
9494
router.refresh();
9595
}

‎components/ui/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { BiLoaderAlt } from 'react-icons/bi';
66
import { cn } from '@/lib/utils';
77

88
const buttonVariants = cva(
9-
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9+
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
1010
{
1111
variants: {
1212
variant: {

‎components/ui/input.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
1010
<input
1111
type={type}
1212
className={cn(
13-
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
13+
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
1414
className,
1515
)}
1616
ref={ref}

‎components/ui/switch.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
1111
>(({ className, ...props }, ref) => (
1212
<SwitchPrimitives.Root
1313
className={cn(
14-
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
14+
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
1515
className,
1616
)}
1717
{...props}

‎components/ui/tabs.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
2929
<TabsPrimitive.Trigger
3030
ref={ref}
3131
className={cn(
32-
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
32+
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
3333
className,
3434
)}
3535
{...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
4444
<TabsPrimitive.Content
4545
ref={ref}
4646
className={cn(
47-
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
47+
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2',
4848
className,
4949
)}
5050
{...props}

‎components/ui/textarea.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
99
return (
1010
<textarea
1111
className={cn(
12-
'flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
12+
'flex min-h-[100px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
1313
className,
1414
)}
1515
ref={ref}

‎constants/chat.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export enum CONVERSATION_ACTION {
66
}
77

88
export const LIMIT_CONVERSATIONS = 10;
9+
export const LIMIT_CHAT_INPUT = 8000;

‎hoc/with-company-label.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { NextPage } from 'next';
2+
import Link from 'next/link';
23
import { getTranslations } from 'next-intl/server';
34

4-
import { Logo } from '@/components/common/logo';
5-
65
const withCompanyLabel =
76
<T extends object>(WrappedComponent: NextPage<T>) =>
87
// eslint-disable-next-line react/display-name
@@ -12,15 +11,14 @@ const withCompanyLabel =
1211
return (
1312
<>
1413
<WrappedComponent {...props} />
15-
<div className="absolute flex justify-center items-center mb-8 bottom-0 gap-x-1 w-full text-sm text-muted-foreground">
16-
{t('poweredBy')}
17-
<div className="font-semibold text-neutral-700 dark:text-neutral-300 flex items-center gap-x-1">
18-
<div className="h-4 w-4">
19-
<Logo onlyLogoIcon isLoader />
14+
<Link href="/" target="_blank">
15+
<div className="absolute flex justify-center items-center mb-8 bottom-0 gap-x-1 w-full text-xs text-muted-foreground">
16+
{t('poweredBy')}
17+
<div className="font-semibold text-neutral-700 dark:text-neutral-300 flex items-center gap-x-1">
18+
<span>{t('name')}</span>
2019
</div>
21-
<span>{t('name')}</span>
2220
</div>
23-
</div>
21+
</Link>
2422
</>
2523
);
2624
};

0 commit comments

Comments
 (0)