From 12f6b4e15ecee49120f6ec17d13abb1cf91faecc Mon Sep 17 00:00:00 2001 From: czhen <56986964+shczhen@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:54:18 +0800 Subject: [PATCH] refine header --- demo/src/app/layout.tsx | 11 +- demo/src/components/Icon/index.tsx | 16 +++ demo/src/components/Layout/Header.tsx | 9 +- .../components/Layout/HeaderComponents.tsx | 71 ++++++---- demo/tailwind.config.js | 123 +++++++++--------- 5 files changed, 142 insertions(+), 88 deletions(-) diff --git a/demo/src/app/layout.tsx b/demo/src/app/layout.tsx index b50f5576..178eeabd 100644 --- a/demo/src/app/layout.tsx +++ b/demo/src/app/layout.tsx @@ -2,6 +2,15 @@ import { StoreProvider } from "@/store" import type { Metadata, Viewport } from "next" import "./global.css" import { Toaster } from "@/components/ui/sonner" +import { Roboto } from "next/font/google" +import { cn } from "@/lib/utils" + +const roboto = Roboto({ + subsets: ["latin"], + weight: ["400", "700"], + variable: "--font-roboto", + display: "swap", +}) export const metadata: Metadata = { title: "TEN Agent", @@ -29,7 +38,7 @@ export default function RootLayout({ }>) { return ( - + {/* ) { + return ( + + + + ) +} + export const GitHubIcon = (props: React.SVGProps) => { return ( -
+
+ {/* */}

TEN Agent

- diff --git a/demo/src/components/Layout/HeaderComponents.tsx b/demo/src/components/Layout/HeaderComponents.tsx index 31baa6f6..ce46e439 100644 --- a/demo/src/components/Layout/HeaderComponents.tsx +++ b/demo/src/components/Layout/HeaderComponents.tsx @@ -13,14 +13,19 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover" -import { InfoIcon, GitHubIcon, PaletteIcon } from "@/components/Icon" +import { Button } from "@/components/ui/button" +import { GitHubIcon, PaletteIcon } from "@/components/Icon" +import { MessagesSquareIcon, MessageSquareOffIcon } from "lucide-react" import { useAppSelector, useAppDispatch, GITHUB_URL, COLOR_LIST, + getRandomUserId, + getRandomChannel, + genRandomString, } from "@/common" -import { setThemeColor } from "@/store/reducers/global" +import { setThemeColor, setOptions } from "@/store/reducers/global" import { cn } from "@/lib/utils" import { HexColorPicker } from "react-colorful" import dynamic from "next/dynamic" @@ -28,46 +33,61 @@ import dynamic from "next/dynamic" import styles from "./Header.module.css" export function HeaderRoomInfo() { + const dispatch = useAppDispatch() + const options = useAppSelector((state) => state.global.options) const { channel, userId } = options const roomConnected = useAppSelector((state) => state.global.roomConnected) const agentConnected = useAppSelector((state) => state.global.agentConnected) - const roomConnectedText = React.useMemo(() => { - return roomConnected ? "TRUE" : "FALSE" - }, [roomConnected]) - - const agentConnectedText = React.useMemo(() => { - return agentConnected ? "TRUE" : "FALSE" - }, [agentConnected]) + const handleRegenerateChannelAndUserId = () => { + const newOptions = { + userName: genRandomString(8), + channel: getRandomChannel(), + userId: getRandomUserId(), + } + dispatch(setOptions(newOptions)) + } return ( <> - - - Channel Name:{" "} - + {channel ? ( + + ) : ( + + )} {channel} - + - + - + - + @@ -81,12 +101,16 @@ export function HeaderRoomInfo() { - - + + - - + +
INFO + +
Room:ChannelName {channel}
Participant:UserID {userId}
Room connected:{roomConnectedText}Room Status + {roomConnected ? "Connected" : "Disconnected"} +
Agent connected:{agentConnectedText}Agent Status + {agentConnected ? "Connected" : "Disconnected"} +
@@ -104,8 +128,9 @@ export function HeaderActions() { GitHub - - + + {/* + */}
) } diff --git a/demo/tailwind.config.js b/demo/tailwind.config.js index cd5427f0..fe9112cb 100644 --- a/demo/tailwind.config.js +++ b/demo/tailwind.config.js @@ -1,64 +1,67 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - darkMode: ["class"], - content: [ - "./app/**/*.{js,ts,jsx,tsx,mdx}", - "./pages/**/*.{js,ts,jsx,tsx,mdx}", - "./components/**/*.{js,ts,jsx,tsx,mdx}", + darkMode: ["class"], + content: [ + "./app/**/*.{js,ts,jsx,tsx,mdx}", + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", - // Or if using `src` directory: - "./src/**/*.{js,ts,jsx,tsx,mdx}", - ], - theme: { - extend: { - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - }, - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - } - } - } + // Or if using `src` directory: + "./src/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + 1: "hsl(var(--chart-1))", + 2: "hsl(var(--chart-2))", + 3: "hsl(var(--chart-3))", + 4: "hsl(var(--chart-4))", + 5: "hsl(var(--chart-5))", + }, + }, + fontFamily: { + roboto: "var(--font-roboto)", + }, }, - plugins: [require("tailwindcss-animate")], -}; + }, + plugins: [require("tailwindcss-animate")], +}