This repository has been archived by the owner on Jan 5, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 398
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #529 from openchatai/docs/update-docs
Update the Docs to include the latest api changes.
- Loading branch information
Showing
5 changed files
with
118 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| // Callouts (Alerts, Notes, Warning,Danger, Success, Info) | ||
| import { cn } from "@/lib/utils"; | ||
| import { cva } from "class-variance-authority"; | ||
| import React, { forwardRef } from "react"; | ||
|
|
||
| import { | ||
| AlertCircle, | ||
| AlertTriangle, | ||
| CheckCircle, | ||
| Info, | ||
| XCircle, | ||
| XOctagon, | ||
| } from 'lucide-react' | ||
|
|
||
| type CalloutType = "alert" | "note" | "warning" | "danger" | "success" | "info"; | ||
|
|
||
| type CalloutProps = { | ||
| type: CalloutType; | ||
| } & React.HTMLAttributes<HTMLDivElement>; | ||
|
|
||
| function getIcon(type: CalloutType) { | ||
| switch (type) { | ||
| case "alert": | ||
| return AlertCircle | ||
| case "note": | ||
| return Info | ||
| case "warning": | ||
| return AlertTriangle | ||
| case "danger": | ||
| return XOctagon | ||
| case "success": | ||
| return CheckCircle | ||
| case "info": | ||
| return Info | ||
| default: | ||
| return XCircle | ||
| } | ||
| } | ||
|
|
||
| const alertVariants = cva("rounded-lg p-2", { | ||
| variants: { | ||
| type: { | ||
| alert: "bg-blue-100 border-blue-500 [&>p]:text-blue-700 [&>span]:text-blue-500", | ||
| note: "bg-blue-100 border-blue-500 [&>p]:text-blue-700 [&>span]:text-blue-500", | ||
| warning: "bg-yellow-100 border-yellow-500 [&>p]:text-yellow-700 [&>span]:text-yellow-500", | ||
| danger: "bg-red-100 border-red-500 [&>p]:text-red-700 [&>span]:text-red-500", | ||
| success: "bg-green-100 border-green-500 [&>p]:text-green-700 [&>span]:text-green-500", | ||
| info: "bg-gray-100 border-gray-500 [&>p]:text-gray-700 [&>span]:text-gray-500", | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| const Alert = forwardRef<HTMLDivElement, CalloutProps>(({ className, children, type, ...oprops }, ref) => { | ||
| const Icon = getIcon(type); | ||
| return <div ref={ref} className={cn(alertVariants({ type }), className)} {...oprops}> | ||
| <span> | ||
| {<Icon className="size-4" />} | ||
| </span> | ||
| <p className=""> | ||
| {children} | ||
| </p> | ||
| </div> | ||
| }); | ||
| Alert.displayName = "Alert"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| title: "Styling the widget" | ||
| description: "few notes on how to style the widget." | ||
| --- | ||
| The widget is styled using tailwindcss. | ||
| so it is hard to overwrite the styles of let's say the basic elements such as buttons, inputs, etc. | ||
| but when it comes to placing the widget we provided an easy way to manage this via `containerProps` prop(if you are using the standalone) or option if you are using the pre-built script. | ||
|
|
||
| ## The Default Widget Container Styles | ||
| the widget is fluid by default and it will take the full width of the parent container. | ||
|
|
||
| ## containerProps | ||
| `containerProps` is an object that you can pass to the widget to style the container of the widget. | ||
| it can accept any valid html attributes such as `className`, `id`, `style`, etc. |