Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: updated banner #453

Merged
merged 1 commit into from
Feb 23, 2024
Merged

feat: updated banner #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 88 additions & 44 deletions layouts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,7 @@ function Layout({
<Script
async
src="https://www.googletagmanager.com/gtag/js?id=G-DBP9QMTGR1"
>
</Script>
></Script>
<Script id="gTagScript">
{`
window.dataLayer = window.dataLayer || [];
Expand All @@ -196,23 +195,31 @@ function Layout({
<Modal.CloseButton />
<Modal.Body p="9">
<HStack mb="6" alignItems="center" justifyContent="flex">
<AlertIcon/>
<Heading fontSize='xl' textAlign="left" ml="1.5">
<AlertIcon />
<Heading fontSize="xl" textAlign="left" ml="1.5">
IMPORTANT MESSAGE
</Heading>
</HStack>
{/* @ts-ignore*/}
<Box gap={5}>
<Box flexDirection='row'>
<Icon size={18} color='black'>
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6"/>
<Path d="m21 3-9 9"/>
<Path d="M15 3h6v6"/>
<Box flexDirection="row">
<Icon size={18} color="black">
<Svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
<Path d="m21 3-9 9" />
<Path d="M15 3h6v6" />
</Svg>
</Icon>
<Box w='92%' maxW='100%' ml="2">
<Heading fontSize='md'>Upgrade to gluestack-ui</Heading>
<Box w="92%" maxW="100%" ml="2">
<Heading fontSize="md">Upgrade to gluestack-ui</Heading>

<Text
fontSize="sm"
textAlign="left"
Expand All @@ -221,35 +228,62 @@ function Layout({
color: "muted.200",
}}
>
If you are starting a new project with NativeBase, we recommend
using <Link href="https://gluestack.io/" fontWeight="bold">gluestack-ui</Link>
If you are starting a new project with NativeBase, we
recommend using{" "}
<Link href="https://gluestack.io/" fontWeight="bold">
gluestack-ui
</Link>
</Text>
<Text
fontSize="sm"
textAlign="left"
color="muted.800"
_dark={{
color: "muted.200",
}}
>
Please opt in to our enterprise plan (coming soon) for
priority support with NativeBase.
</Text>
</Box>
</Box>

<Divider thickness={1}/>
<Divider thickness={1} />

<Box flexDirection='row'>
<Icon size={18} color='black'>
<Svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<Path d="m21 16-4 4-4-4"/>
<Path d="M17 20V4"/>
<Path d="m3 8 4-4 4 4"/>
<Path d="M7 4v16"/>
<Box flexDirection="row">
<Icon size={18} color="black">
<Svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<Path d="m21 16-4 4-4-4" />
<Path d="M17 20V4" />
<Path d="m3 8 4-4 4 4" />
<Path d="M7 4v16" />
</Svg>
</Icon>
<Box w='93%' maxW='100%' ml="2">
<Heading fontSize='md'>Migrate to gluestack-ui</Heading>
<Box w="93%" maxW="100%" ml="2">
<Heading fontSize="md">Migrate to gluestack-ui</Heading>
<Text
fontSize="sm"
textAlign="left"
color="muted.800"
_dark={{
color: "muted.200",
}}
>
If you are working on a project with NativeBase, we
recommend using{" "}
<Link
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
fontWeight="bold"
>
If you are working on a project with NativeBase, we recommend
using <Link href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" fontWeight="bold">@gluestack-ui/themed-native-base</Link>
@gluestack-ui/themed-native-base
</Link>
</Text>
</Box>
</Box>
Expand Down Expand Up @@ -335,29 +369,39 @@ function Layout({
// maxW='1056'
fontSize="sm"
fontWeight="medium"
alignSelf='flex'
flexDirection='row'
alignSelf="flex"
flexDirection="row"
alignItems={{ md: "center" }}
justifyContent={{ md: "center" }}
width="100%"
>
<AlertIcon height={18} width={18}/>
<AlertIcon height={18} width={18} />
<Text ml="1">
If you are starting a new project, we recommend using {" "}
<a href="https://ui.gluestack.io/" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
gluestack-ui
</Text>
</a>
{". "}
For your existing projects, you can utilize{" "}
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
@gluestack-ui/themed-native-base
</Text>
</a>
{" "}
(beta).
Please opt in to our enterprise plan (coming soon) for
priority support with NativeBase. If you are starting a
new project, we recommend using{" "}
<a href="https://ui.gluestack.io/" target="_blank">
<Text
fontWeight="semibold"
textDecorationLine="underline"
>
gluestack-ui
</Text>
</a>
{". "}
For your existing projects, you can utilize{" "}
<a
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
target="_blank"
>
<Text
fontWeight="semibold"
textDecorationLine="underline"
>
@gluestack-ui/themed-native-base
</Text>
</a>{" "}
(beta).
</Text>
</Box>
</Stack>
Expand Down
36 changes: 25 additions & 11 deletions src/components/GettingStartedHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,29 @@ export function GettingStartedHero() {
NativeBase is a component library that enables devs to build
universal design systems. It is built on top of React Native,
allowing you to develop apps for Android, iOS and the Web.
<br/>
<br/>
<br />
<br />
Please opt in to our enterprise plan (coming soon) for priority
support with NativeBase.
<br />
IMPORTANT MESSAGE — If you are starting a new project with
NativeBase, we recommend using{" "}
<a href="https://ui.gluestack.io/" target="_blank">
<Text fontWeight="semibold" textDecorationLine="underline">
gluestack-ui
</Text>
</a>
{" "}
instead. However, if you are already working on a NativeBase project, we recommend using{" "}
<a href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui" target="_blank">
</a>{" "}
instead. However, if you are already working on a NativeBase
project, we recommend using{" "}
<a
href="https://gluestack.io/ui/docs/migration/native-base-to-gluestack-ui"
target="_blank"
>
<Text fontWeight="semibold" textDecorationLine="underline">
@gluestack-ui/themed-native-base
</Text>
</a>
{" "}
instead.
{" "}

</a>{" "}
instead.{" "}
<a
href="https://nativebase.io/blogs/road-ahead-with-gluestack-ui"
target="_blank"
Expand All @@ -60,6 +63,17 @@ export function GettingStartedHero() {
</a>
.
</Text>
<Text
fontSize="sm"
textAlign="left"
color="muted.800"
_dark={{
color: "muted.200",
}}
>
Please opt in to our enterprise plan (coming soon) for priority
support with NativeBase.
</Text>
<Stack direction={{ lg: "row" }} space="4">
<TileLink
title="Installation Guide"
Expand Down
Loading