Skip to content

fix: images #20

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

Merged
merged 1 commit into from
Jun 5, 2024
Merged

fix: images #20

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
1 change: 0 additions & 1 deletion universal/apps/expo-app/app/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const index = () => {
return (
<SafeAreaView>
<VStack className="m-2" space="xl">
<Heading>Auth Screen</Heading>
<Button
onPress={() => {
router.push("auth/splash-screen");
Expand Down
1 change: 0 additions & 1 deletion universal/apps/next/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ const Page = () => {

return (
<VStack className="m-2" space="xl">
<Heading>Auth Screens</Heading>
<Button
onPress={() => {
router.push("auth/splash-screen");
Expand Down
11 changes: 2 additions & 9 deletions universal/packages/components/ui/image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
"use client";
import React from "react";
import { createImage } from "@gluestack-ui/image";
import { Platform } from "react-native";
import UnitoolsImage from "@unitools/image";
import { tva } from "@gluestack-ui/nativewind-utils/tva";
import type { VariantProps } from "@gluestack-ui/nativewind-utils";
Expand All @@ -23,7 +21,7 @@ const imageStyle = tva({
},
});

const UIImage = createImage({ Root: UnitoolsImage });
const UIImage = UnitoolsImage;
cssInterop(
UIImage,
//@ts-ignore
Expand All @@ -39,14 +37,9 @@ const Image = ({
}: { className?: any } & ImageProps) => {
return (
<UIImage
// @ts-ignore
className={imageStyle({ size, class: className })}
{...props}
//@ts-ignore
style={
Platform.OS === "web"
? { height: "revert-layer", width: "revert-layer" }
: undefined
}
/>
);
};
Expand Down
86 changes: 13 additions & 73 deletions universal/packages/screens/auth/create-password/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import { useState } from "react";
import {
Avatar,
AvatarFallbackText,
AvatarGroup,
AvatarImage,
} from "@/components/ui/avatar";
import { SafeAreaView } from "@/components/ui/safe-area-view";

import { Toast, ToastTitle, useToast } from "@/components/ui/toast";
import { HStack } from "@/components/ui/hstack";
import { VStack } from "@/components/ui/vstack";
Expand All @@ -30,6 +23,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle } from "lucide-react-native";
import { Pressable } from "@/components/ui/pressable";
import useRouter from "@unitools/router";
import { Image } from "@/components/ui/image";

const createPasswordSchema = z.object({
password: z
Expand All @@ -56,82 +50,28 @@ const createPasswordSchema = z.object({

type CreatePasswordSchemaType = z.infer<typeof createPasswordSchema>;

const ProfileAvatars = [
require("@/assets/auth/image.png"),
require("@/assets/auth/image1.png"),
require("@/assets/auth/image2.png"),
require("@/assets/auth/image3.png"),
];
type AuthLayoutProps = {
children: React.ReactNode;
};
const formDetails = {
heading: " gluestack-ui",
badge: "Pro",
subHeading: "Start making your dreams come true",
description:
"Create an account and discover the worlds best UI component framework.",
avatarNumber: "+ 2",
subDescription: "Join 10,000+ users",
license: " © 2023 gluestack UI. All rights reserved.",
};

const AuthLayout = (props: AuthLayoutProps) => {
return (
<SafeAreaView className="w-full h-full">
<HStack className="w-full h-full bg-background-0">
<VStack
className="w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] justify-between p-7"
className="relative w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] items-center justify-center p-7"
space="md"
>
<VStack space="md" className="justify-center flex-1">
<Heading
className="md:w-[98%] text-typography-50 font-bold"
size="4xl"
>
{formDetails.subHeading}
</Heading>
<Text size="md" className="text-typography-50 leading-7">
{formDetails.description}
</Text>
<HStack className="items-center">
<HStack className="justify-center items-center">
{/* @ts-ignore */}
<AvatarGroup>
{ProfileAvatars.slice(0, 2).map((avatar, index) => {
return (
<Avatar className="flex lg:hidden" key={index} size="md">
<AvatarImage
source={avatar}
className="border-2 border-primary-500"
/>
</Avatar>
);
})}
{ProfileAvatars.map((avatar, index) => {
return (
<Avatar className="hidden lg:flex" key={index} size="md">
<AvatarImage
source={avatar}
className="border-2 border-primary-500"
/>
</Avatar>
);
})}
<Avatar className="flex lg:hidden" size="md">
<AvatarFallbackText>
{formDetails.avatarNumber}
</AvatarFallbackText>
</Avatar>
</AvatarGroup>
</HStack>
<Text className="leading-7 text-typography-50 ml-4">
{formDetails.subDescription}
</Text>
</HStack>
</VStack>
<Heading className="text-xs font-bold tracking-[0.2px] text-typography-200">
{formDetails.license}
</Heading>
<Image
source={require("@/assets/auth/radialGradient.png")}
className="h-full w-full absolute inset-0 -z-10"
alt="Radial Gradient"
/>
<Image
source={require("@/assets/auth/logo.png")}
className="h-40 w-40"
alt="Gluestack Logo"
/>
</VStack>

<VStack className="md:items-center md:justify-center w-full md:max-w-[440px] p-9 md:gap-10 gap-16 md:m-auto md:w-1/2">
Expand Down
85 changes: 13 additions & 72 deletions universal/packages/screens/auth/forgot-password/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
import {
Avatar,
AvatarFallbackText,
AvatarGroup,
AvatarImage,
} from "@/components/ui/avatar";
import { Toast, ToastTitle, useToast } from "@/components/ui/toast";
import { HStack } from "@/components/ui/hstack";
import { VStack } from "@/components/ui/vstack";
Expand All @@ -29,89 +23,36 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { AlertTriangle } from "lucide-react-native";
import useRouter from "@unitools/router";
import { Pressable } from "@/components/ui/pressable";
import { Image } from "@/components/ui/image";

const forgotPasswordSchema = z.object({
email: z.string().min(1, "Email is required").email(),
});

type forgotPasswordSchemaType = z.infer<typeof forgotPasswordSchema>;

const ProfileAvatars = [
require("@/assets/auth/image.png"),
require("@/assets/auth/image1.png"),
require("@/assets/auth/image2.png"),
require("@/assets/auth/image3.png"),
];
type AuthLayoutProps = {
children: React.ReactNode;
};
const formDetails = {
heading: " gluestack-ui",
badge: "Pro",
subHeading: "Start making your dreams come true",
description:
"Create an account and discover the worlds best UI component framework.",
avatarNumber: "+ 2",
subDescription: "Join 10,000+ users",
license: " © 2023 gluestack UI. All rights reserved.",
};

const AuthLayout = (props: AuthLayoutProps) => {
return (
<SafeAreaView className="w-full h-full">
<HStack className="w-full h-full bg-background-0">
<VStack
className="w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] justify-between p-7"
className="relative w-0 hidden md:flex md:h-full bg-primary-500 md:min-w-[50%] items-center justify-center p-7"
space="md"
>
<VStack space="md" className="justify-center flex-1">
<Heading
className="md:w-[98%] text-typography-50 font-bold"
size="4xl"
>
{formDetails.subHeading}
</Heading>
<Text size="md" className="text-typography-50 leading-7">
{formDetails.description}
</Text>
<HStack className="items-center">
<HStack className="justify-center items-center">
{/* @ts-ignore */}
<AvatarGroup>
{ProfileAvatars.slice(0, 2).map((avatar, index) => {
return (
<Avatar className="flex lg:hidden" key={index} size="md">
<AvatarImage
source={avatar}
className="border-2 border-primary-500"
/>
</Avatar>
);
})}
{ProfileAvatars.map((avatar, index) => {
return (
<Avatar className="hidden lg:flex" key={index} size="md">
<AvatarImage
source={avatar}
className="border-2 border-primary-500"
/>
</Avatar>
);
})}
<Avatar className="flex lg:hidden" size="md">
<AvatarFallbackText>
{formDetails.avatarNumber}
</AvatarFallbackText>
</Avatar>
</AvatarGroup>
</HStack>
<Text className="leading-7 text-typography-50 ml-4">
{formDetails.subDescription}
</Text>
</HStack>
</VStack>
<Heading className="text-xs font-bold tracking-[0.2px] text-typography-200">
{formDetails.license}
</Heading>
<Image
source={require("@/assets/auth/radialGradient.png")}
className="h-full w-full absolute inset-0 -z-10"
alt="Radial Gradient"
/>
<Image
source={require("@/assets/auth/logo.png")}
className="h-40 w-40"
alt="Gluestack Logo"
/>
</VStack>

<VStack className="md:items-center md:justify-center w-full md:max-w-[440px] p-9 md:gap-10 gap-16 md:m-auto md:w-1/2">
Expand Down
Loading