mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-30 03:00:41 -04:00
## Changes 🏗️ https://github.com/user-attachments/assets/7e49ed5b-c818-4aa3-b5d6-4fa86fada7ee When the content of Summary + Outputs + Inputs is long enough, it will show in this new `<ScrollableTabs />` component, which auto-scrolls the content as you click on a tab. ## Checklist 📋 ### For code changes - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Run the app locally - [x] Check the new page with scrollable tabs
23 lines
703 B
TypeScript
23 lines
703 B
TypeScript
import * as React from "react";
|
|
import { createContext, useContext } from "react";
|
|
|
|
interface ScrollableTabsContextValue {
|
|
activeValue: string | null;
|
|
setActiveValue: React.Dispatch<React.SetStateAction<string | null>>;
|
|
registerContent: (value: string, element: HTMLElement | null) => void;
|
|
scrollToSection: (value: string) => void;
|
|
scrollContainer: HTMLElement | null;
|
|
}
|
|
|
|
export const ScrollableTabsContext = createContext<
|
|
ScrollableTabsContextValue | undefined
|
|
>(undefined);
|
|
|
|
export function useScrollableTabs() {
|
|
const context = useContext(ScrollableTabsContext);
|
|
if (!context) {
|
|
throw new Error("useScrollableTabs must be used within a ScrollableTabs");
|
|
}
|
|
return context;
|
|
}
|