mirror of
https://git.mirrors.martin98.com/https://github.com/bytedance/deer-flow
synced 2025-08-20 00:49:05 +08:00
feat: Add ThemeProviderWrapper for theme management
This commit is contained in:
Shi Tianxin
parent
834d5221ca
commit
6b45e17714
29
web/src/app/_components/theme-provider-wrapper.tsx
Normal file
29
web/src/app/_components/theme-provider-wrapper.tsx
Normal file
@ -0,0 +1,29 @@
|
||||
// Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
"use client";
|
||||
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { ThemeProvider } from "~/components/theme-provider";
|
||||
|
||||
export function ThemeProviderWrapper({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const pathname = usePathname();
|
||||
const isChatPage = pathname?.startsWith("/chat");
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme={"dark"}
|
||||
enableSystem={isChatPage}
|
||||
forcedTheme={isChatPage ? undefined : "dark"}
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@ -6,7 +6,7 @@ import "~/styles/globals.css";
|
||||
import { type Metadata } from "next";
|
||||
import { Geist } from "next/font/google";
|
||||
|
||||
import { ThemeProvider } from "~/components/theme-provider";
|
||||
import { ThemeProviderWrapper } from "~/app/_components/theme-provider-wrapper";
|
||||
import { TooltipProvider } from "~/components/ui/tooltip";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
@ -27,13 +27,9 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" className={`${geist.variable}`} suppressHydrationWarning>
|
||||
<body className="bg-app h-screen w-screen overscroll-none">
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
disableTransitionOnChange
|
||||
>
|
||||
<ThemeProviderWrapper>
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</ThemeProvider>
|
||||
</ThemeProviderWrapper>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -27,13 +27,11 @@ import { BentoGrid } from "~/components/magicui/bento-grid";
|
||||
import { FlickeringGrid } from "~/components/magicui/flickering-grid";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
import { ThemeToggle } from "./_components/theme-toggle";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="flex w-screen flex-col items-center">
|
||||
<div className="dark flex flex-col items-center overflow-x-hidden">
|
||||
<Header />
|
||||
<main className="container flex w-screen flex-col items-center justify-center gap-56">
|
||||
<main className="container flex flex-col items-center justify-center gap-56">
|
||||
<Jumbotron />
|
||||
<CaseStudySection />
|
||||
<CoreFeatureSection />
|
||||
@ -46,7 +44,7 @@ export default function HomePage() {
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-screen flex-col items-center backdrop-blur-lg">
|
||||
<header className="supports-backdrop-blur:bg-background/80 bg-background/40 sticky top-0 left-0 z-40 flex h-15 w-full flex-col items-center backdrop-blur-lg">
|
||||
<div className="container flex h-15 items-center justify-between">
|
||||
<div className="text-xl font-medium">
|
||||
<span className="mr-1">🦌</span>
|
||||
@ -59,7 +57,6 @@ function Header() {
|
||||
Star on GitHub
|
||||
</Link>
|
||||
</Button>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
|
||||
@ -69,7 +66,7 @@ function Header() {
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer className="container mt-32 flex w-screen flex-col items-center justify-center">
|
||||
<footer className="container mt-32 flex flex-col items-center justify-center">
|
||||
<hr className="from-border/0 via-border/70 to-border/0 m-0 h-px w-full border-none bg-gradient-to-r" />
|
||||
<div className="text-muted-foreground container flex h-20 flex-col items-center justify-center text-sm">
|
||||
<p className="font-serif text-xl">
|
||||
@ -103,7 +100,7 @@ function SectionHeader({
|
||||
|
||||
function Jumbotron() {
|
||||
return (
|
||||
<section className="relative flex h-[95vh] w-screen flex-col items-center justify-center pb-15">
|
||||
<section className="relative flex h-[95vh] flex-col items-center justify-center pb-15">
|
||||
<FlickeringGrid
|
||||
id="deer-hero-bg"
|
||||
className={`absolute inset-0 z-0 [mask-image:radial-gradient(800px_circle_at_center,white,transparent)]`}
|
||||
@ -123,22 +120,18 @@ function Jumbotron() {
|
||||
flickerChance={0.12}
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col items-center justify-center gap-12">
|
||||
<h1 className="text-6xl font-bold">
|
||||
<h1 className="text-center text-6xl font-bold">
|
||||
<span className="bg-gradient-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-transparent">
|
||||
Deep Research{" "}
|
||||
</span>
|
||||
<AuroraText>at Your Fingertips</AuroraText>
|
||||
</h1>
|
||||
<p className="text-center text-2xl opacity-75">
|
||||
<p className="max-w-3xl text-center text-2xl opacity-75">
|
||||
Discover the revolutionary Multi-Agent Research Assistant that
|
||||
empowers you to dive
|
||||
<br />
|
||||
deeper and wider into any subject. Equipped with the powerful tools
|
||||
like search
|
||||
<br />
|
||||
engines, crawlers, Python, and MCP services, DeerFlow provides instant
|
||||
<br />
|
||||
insights, in-depth reports and even captivating podcasts.
|
||||
empowers you to dive deeper and wider into any subject. Equipped with
|
||||
the powerful tools like search engines, crawlers, Python, and MCP
|
||||
services, DeerFlow provides instant insights, in-depth reports and
|
||||
even captivating podcasts.
|
||||
</p>
|
||||
<div className="flex gap-6">
|
||||
<Button className="w-42 text-lg" size="lg" asChild>
|
||||
@ -219,9 +212,12 @@ function CaseStudySection() {
|
||||
title="Case Studies"
|
||||
description="See DeerFlow in action through replays."
|
||||
/>
|
||||
<div className="container flex flex-wrap">
|
||||
<div className="flex w-full flex-wrap">
|
||||
{caseStudies.map((caseStudy) => (
|
||||
<div key={caseStudy.title} className="w-[25%] p-2">
|
||||
<div
|
||||
key={caseStudy.title}
|
||||
className="w-full p-2 sm:w-1/2 md:w-1/3 lg:w-[25%]"
|
||||
>
|
||||
<BentoCard
|
||||
{...{
|
||||
Icon: caseStudy.icon,
|
||||
@ -322,12 +318,12 @@ const features = [
|
||||
|
||||
function CoreFeatureSection() {
|
||||
return (
|
||||
<section className="relative container flex flex-col content-around items-center justify-center">
|
||||
<section className="relative flex w-full flex-col content-around items-center justify-center">
|
||||
<SectionHeader
|
||||
title="Core Features"
|
||||
description="Find out what makes DeerFlow effective."
|
||||
/>
|
||||
<BentoGrid className="h-[75vh] lg:grid-rows-3">
|
||||
<BentoGrid className="h-[75vh] w-full lg:grid-rows-3">
|
||||
{features.map((feature) => (
|
||||
<BentoCard key={feature.name} {...feature} />
|
||||
))}
|
||||
@ -338,7 +334,7 @@ function CoreFeatureSection() {
|
||||
|
||||
function JoinCommunitySection() {
|
||||
return (
|
||||
<section className="container flex flex-col items-center justify-center pb-12">
|
||||
<section className="flex w-full flex-col items-center justify-center pb-12">
|
||||
<SectionHeader
|
||||
title={
|
||||
<AuroraText colors={["#60A5FA", "#A5FA60", "#A560FA"]}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user