jan/web/containers/Toast/index.tsx
Faisal Amir 2394c13065
ui: standalone UIKit and refactor (#557)
* Eslint import order

* Initial Uikit

* Rename file with camelCase

* Remove unused code

* Remove unused code

* Set position traficlight mac

* Grouping Ribbon, Topbar and Bottombar as layout

* Added image brand

* Moving feature toggle into context folder

* Fix active state of setting menu

* Cleanup downloadModel atom helper

* Cleanup useGetConfigureModel

* Added wave animation

* Create useMainViewState intead of import helper atom

* Remove unused code

* Take a back switch ui

* Toggle using switch component

* Add dynamic primary color

* Cleanup import

* Added uikit scroll area

* Add best practice form

* Added toaster container

* Fix loader container

* Add hooks useDownloadState

* Added tooltip on ribbon menu

* Added case user multiple download model

* Adjust input style with bigger ring

* Restyle my model screen

* Replace useStartStop model with useActiveModel

* Import icon using Icon name

* Fix missing login loading start and stop model

* WIP integrate with cmdk

* Move layout search bar on middle of app

* Added function cancel download

* Cleanup model explore

* Cleanup unused code

* Move app version in bototmbar or footer

* WIP chat screen

* WIP chat screen

* Cleanup style and remove unsed code

* Added command for showing downloaded model

* Fix missing keyframe loader dot animation

* Conditional loader of plugin setting

* WIP history list message

* chore: rebase main

* Adding script ui into root package

* Fix different version react hooks form

* Add close toaster

* Added status model active or not on list of command

* Conditional showing info if user don't have a model

* Disabled toolbar chat when user not yet have convo

* chore: fix state

* fix: get resource atom

* Fix conditional bottom bar

* fix: model download state

* Fix font

* Improve icon my model

* Add toaster delete chat

* Remove test classname

* Fix scroll chat body

* Fix scrolling chat body

* chore: add message update

* Add uikit into depedencies on root package

* Update chat flow

* Fix hot reload ui changes

* Increate background color chat screen light mode

* Added visual conversation active state

* Added build:uikit on gh actions

* chore: attempt to fix CI

* fix: deps

* fix: tests

* chore: attempt to fix CI

---------

Co-authored-by: Louis <louis@jan.ai>
2023-11-07 21:27:11 +07:00

53 lines
1.4 KiB
TypeScript

import toast from 'react-hot-toast'
import { XIcon } from 'lucide-react'
import { twMerge } from 'tailwind-merge'
type Props = {
title?: string
description?: string
type?: 'default' | 'error' | 'success'
}
export function toaster(props: Props) {
const { title, description, type = 'default' } = props
return toast.custom(
(t) => {
return (
<div
className={twMerge(
'pointer-events-auto relative flex min-w-[200px] max-w-[350px] gap-x-4 rounded-lg border border-border bg-background px-4 py-3',
t.visible ? 'animate-enter' : 'animate-leave',
type === 'success' && 'bg-primary text-primary-foreground'
)}
>
<div>
<h1
className={twMerge(
'font-medium',
type === 'success' && 'font-medium text-primary-foreground'
)}
>
{title}
</h1>
<p
className={twMerge(
'mt-1 text-muted-foreground',
type === 'success' && 'text-primary-foreground/80'
)}
>
{description}
</p>
</div>
<XIcon
size={24}
className="absolute right-2 top-2 w-4 cursor-pointer text-muted-foreground"
onClick={() => toast.dismiss(t.id)}
/>
</div>
)
},
{ id: 'toast', duration: 3000 }
)
}