Skip to content

Commit

Permalink
Merge pull request #2311 from gluestack/feat/modal
Browse files Browse the repository at this point in the history
Feat/modal
  • Loading branch information
Viraj-10 authored Jul 16, 2024
2 parents 4d25996 + 471af7b commit e6271fb
Show file tree
Hide file tree
Showing 6 changed files with 543 additions and 177 deletions.
12 changes: 12 additions & 0 deletions example/storybook-nativewind/public/images/gpay.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions example/storybook-nativewind/public/images/master_card.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions example/storybook-nativewind/public/images/visa.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 7 additions & 10 deletions example/storybook-nativewind/src/components/Modal/Modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Heading } from '@/components/ui/heading';
import { Icon, CloseIcon } from '@/components/ui/icon';
import { Text } from '@/components/ui/text';

const ModalBasic = () => {
const ModalBasic = ({ ...props }: any) => {
const [showModal, setShowModal] = useState(false);

return (
Expand All @@ -26,17 +26,20 @@ const ModalBasic = () => {
onClose={() => {
setShowModal(false);
}}
{...props}
>
<ModalBackdrop />
<ModalContent>
<ModalHeader>
<Heading size="lg">Engage with Modals</Heading>
<Heading size="md" className="text-typography-950">
Invite your team
</Heading>
<ModalCloseButton>
<Icon as={CloseIcon} />
<Icon as={CloseIcon} className="stroke-background-500" />
</ModalCloseButton>
</ModalHeader>
<ModalBody>
<Text>
<Text size="sm" className="text-typography-500">
Elevate user interactions with our versatile modals. Seamlessly
integrate notifications, forms, and media displays. Make an impact
effortlessly.
Expand All @@ -45,19 +48,14 @@ const ModalBasic = () => {
<ModalFooter>
<Button
variant="outline"
size="sm"
action="secondary"
className="mr-3"
onPress={() => {
setShowModal(false);
}}
>
<ButtonText>Cancel</ButtonText>
</Button>
<Button
size="sm"
action="positive"
className="border-0"
onPress={() => {
setShowModal(false);
}}
Expand All @@ -83,5 +81,4 @@ export {
ModalFooter,
Button,
ButtonText,
Text,
};
Loading

0 comments on commit e6271fb

Please sign in to comment.