diff --git a/src/components/fonts/FontSizeComponent.tsx b/src/components/fonts/FontSizeComponent.tsx index 15555e5ff..8146a0066 100644 --- a/src/components/fonts/FontSizeComponent.tsx +++ b/src/components/fonts/FontSizeComponent.tsx @@ -9,8 +9,8 @@ const FontSizeComponent = ({ name, value }: any) => { diff --git a/src/new-components/BannerGluestack/images.jsx b/src/new-components/BannerGluestack/images.jsx new file mode 100644 index 000000000..115b6b4ff --- /dev/null +++ b/src/new-components/BannerGluestack/images.jsx @@ -0,0 +1,274 @@ +import React from "react"; + +export function GluestackLogo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export function GluestackDarkTextLogo() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export function Warning() { + return ( + + + + + + ); +} diff --git a/src/new-components/BannerGluestack/index.jsx b/src/new-components/BannerGluestack/index.jsx new file mode 100644 index 000000000..3144f57ac --- /dev/null +++ b/src/new-components/BannerGluestack/index.jsx @@ -0,0 +1,108 @@ +import React from "react"; +import { GluestackDarkTextLogo, GluestackLogo, Warning } from "./images"; +import { Box, HStack, Link, Text, useColorMode } from "native-base"; + +export function BannerGluestack() { + const { colorMode } = useColorMode(); + return ( + + + + + + NativeBase is moving to + + + + {colorMode === "dark" ? ( + + ) : ( + + )} + + + + + IMPORTANT: This library is no longer maintained! The successor of this + library is gluestack-ui, which is a{" "} + + ground-up rewrite + {" "} + of NativeBase, this prioritizes performance and is focused on + improving developer experience.{" "} + + Know more + + + + + ); +} diff --git a/src/new-components/MainContent.tsx b/src/new-components/MainContent.tsx index 7b2e82e40..6be104cf9 100644 --- a/src/new-components/MainContent.tsx +++ b/src/new-components/MainContent.tsx @@ -38,6 +38,7 @@ import { Admonition, } from "./markdown-components"; import { AppContext } from "../AppContext"; +import { BannerGluestack } from "./BannerGluestack"; import * as docComponents from "../components"; import { isLatestVersionSlug } from "../utils"; import { ScrollContext } from "./ScrollContext"; @@ -50,6 +51,7 @@ export default function MainContent(props: any) { <> + {props.showToc && ( diff --git a/src/new-components/markdown-components/Heading2.tsx b/src/new-components/markdown-components/Heading2.tsx index 1bf51fe50..04fdd876b 100644 --- a/src/new-components/markdown-components/Heading2.tsx +++ b/src/new-components/markdown-components/Heading2.tsx @@ -1,28 +1,28 @@ -import React from "react"; -import { Heading, HStack, Icon, Pressable, Link } from "native-base"; -import { getHeadingMeta } from "../../utils"; -import { Fontisto } from "@expo/vector-icons"; +import React from 'react'; +import { Heading, HStack, Icon, Pressable, Link } from 'native-base'; +import { getHeadingMeta } from '../../utils'; +import { Fontisto } from '@expo/vector-icons'; export const Heading2 = ({ children }: any) => { const [content, id] = getHeadingMeta(children); return ( - + {({ isHovered }) => { return ( - + {content} {isHovered && ( - - + + )}