github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): home header component (#10930)

Browse Source
This commit is contained in:
Hiep Le 2025-09-12 00:10:58 +07:00 committed by GitHub
parent 0e20fc206b
commit c142cc27ff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 96 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/__tests__/components/features/home/home-header.test.tsx
View File

@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
import { Provider } from "react-redux";
import { setupStore } from "test-utils";
import { describe, expect, it, vi } from "vitest";
import { HomeHeader } from "#/components/features/home/home-header";
import { HomeHeader } from "#/components/features/home/home-header/home-header";
// Mock the translation function
vi.mock("react-i18next", async () => {

22
frontend/src/components/features/home/guide-message.tsx
View File

@ -1,22 +0,0 @@
import { useTranslation } from "react-i18next";
export function GuideMessage() {
const { t } = useTranslation();
return (
<div className="px-4 md:px-0 w-full flex items-center justify-center">
<div className="w-fit flex items-center justify-center gap-1 px-[15px] rounded-[12px] bg-[#454545] leading-5 text-white text-[15px] font-normal md:h-9.5 m-1">
<div className="pb-1 md:py-0">
<span className="">{t("HOME$GUIDE_MESSAGE_TITLE")} </span>
<a
href="https://docs.all-hands.dev/usage/getting-started"
target="_blank"
rel="noopener noreferrer"
>
<span className="underline">{t("COMMON$CLICK_HERE")}</span>
</a>
</div>
</div>
</div>
);
}

19
frontend/src/components/features/home/home-header.tsx
View File

@ -1,19 +0,0 @@
import { useTranslation } from "react-i18next";
import { GuideMessage } from "./guide-message";
export function HomeHeader() {
const { t } = useTranslation();
return (
<header className="flex flex-col items-center">
<GuideMessage />
<div className="mt-12 flex flex-col gap-4 items-center">
<div className="h-[80px] flex items-center">
<span className="text-[32px] text-white font-bold leading-5">
{t("HOME$LETS_START_BUILDING")}
</span>
</div>
</div>
</header>
);
}

18
frontend/src/components/features/home/home-header/guide-message.tsx Normal file
View File

@ -0,0 +1,18 @@
import { useTranslation } from "react-i18next";
export function GuideMessage() {
const { t } = useTranslation();
return (
<div className="w-fit flex flex-col md:flex-row items-start md:items-center justify-center gap-1 rounded-[12px] bg-[#454545] leading-5 text-white text-[15px] font-normal m-1 md:h-9.5 px-4 pb-1 md:px-[15px] md:py-0">
<span className="">{t("HOME$GUIDE_MESSAGE_TITLE")} </span>
<a
href="https://docs.all-hands.dev/usage/getting-started"
target="_blank"
rel="noopener noreferrer"
>
<span className="underline">{t("COMMON$CLICK_HERE")}</span>
</a>
</div>
);
}

12
frontend/src/components/features/home/home-header/home-header-title.tsx Normal file
View File

@ -0,0 +1,12 @@
import { useTranslation } from "react-i18next";
import { Typography } from "#/ui/typography";
export function HomeHeaderTitle() {
const { t } = useTranslation();
return (
<div className="h-[80px] flex items-center">
<Typography.H1>{t("HOME$LETS_START_BUILDING")}</Typography.H1>
</div>
);
}

11
frontend/src/components/features/home/home-header/home-header.tsx Normal file
View File

@ -0,0 +1,11 @@
import { GuideMessage } from "./guide-message";
import { HomeHeaderTitle } from "./home-header-title";
export function HomeHeader() {
return (
<header className="flex flex-col items-center gap-12">
<GuideMessage />
<HomeHeaderTitle />
</header>
);
}

2
frontend/src/routes/home.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { PrefetchPageLinks } from "react-router";
import { HomeHeader } from "#/components/features/home/home-header";
import { HomeHeader } from "#/components/features/home/home-header/home-header";
import { RepoConnector } from "#/components/features/home/repo-connector";
import { TaskSuggestions } from "#/components/features/home/tasks/task-suggestions";
import { GitRepository } from "#/types/git";

53
frontend/src/ui/typography.tsx Normal file
View File

@ -0,0 +1,53 @@
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "#/utils/utils";
const typographyVariants = cva("", {
variants: {
variant: {
h1: "text-[32px] text-white font-bold leading-5",
},
},
defaultVariants: {
variant: "h1",
},
});
interface TypographyProps extends VariantProps<typeof typographyVariants> {
className?: string;
testId?: string;
children: React.ReactNode;
}
export function Typography({
variant,
className,
testId,
children,
}: TypographyProps) {
const Tag = variant as keyof React.JSX.IntrinsicElements;
return (
<Tag
data-testid={testId}
className={cn(typographyVariants({ variant }), className)}
>
{children}
</Tag>
);
}
// Export individual heading components for convenience
export function H1({
className,
testId,
children,
}: Omit<TypographyProps, "variant">) {
return (
<Typography variant="h1" className={className} testId={testId}>
{children}
</Typography>
);
}
// Attach H1 to Typography for the expected API
Typography.H1 = H1;