-
-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3082 from KBVE/dev
Preparing Alpha Branch
- Loading branch information
Showing
10 changed files
with
376 additions
and
14 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
113 changes: 113 additions & 0 deletions
113
packages/expo-bbq/src/components/animation/LottieHero.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import React from 'react'; | ||
| import { Image, YStack, View, styled, H1 as TamaguiH1, H4 as TamaguiH4 } from 'tamagui'; | ||
| import { LottieAnimation } from './LottieAnimation'; | ||
|
|
||
| const StyledH1 = styled(TamaguiH1, { | ||
| textAlign: 'center', | ||
| color: 'white', | ||
| textShadowColor: 'black', | ||
| textShadowOffset: { width: -1, height: -1 }, | ||
| textShadowRadius: 2, | ||
| shadowOpacity: 1, | ||
| }); | ||
|
|
||
|
|
||
| const StyledH4 = styled(TamaguiH4, { | ||
| textAlign: 'center', | ||
| color: 'white', | ||
| textShadowColor: 'black', | ||
| textShadowOffset: { width: -1, height: -1 }, | ||
| textShadowRadius: 2, | ||
| shadowOpacity: 1, | ||
| }); | ||
|
|
||
| interface LottieHeroProps { | ||
| backgroundImage: any; | ||
| lottieJSON: any; | ||
| title: string; | ||
| description: string; | ||
| opacity?: number; // Optional opacity for the animation and image | ||
| children?: React.ReactNode; // Content (buttons or any elements) to be passed as children | ||
| } | ||
|
|
||
| export function LottieHero({ | ||
| backgroundImage, | ||
| lottieJSON, | ||
| title, | ||
| description, | ||
| opacity = 1.0, | ||
| children, | ||
| }: LottieHeroProps) { | ||
| return ( | ||
| <YStack | ||
| style={{ | ||
| width: '100%', | ||
| height: 750, | ||
| overflow: 'hidden', | ||
| position: 'relative', | ||
| }}> | ||
| {/* Background Image */} | ||
| <Image | ||
| source={backgroundImage} | ||
| style={{ | ||
| width: '100%', | ||
| height: '100%', | ||
| position: 'absolute', | ||
| opacity, | ||
| }} | ||
| objectFit="cover" | ||
| /> | ||
|
|
||
| {/* Lottie Animation */} | ||
| <View | ||
| style={{ | ||
| position: 'absolute', | ||
| width: '100%', | ||
| height: '100%', | ||
| opacity, | ||
| }}> | ||
| <LottieAnimation | ||
| lottieJSON={lottieJSON} | ||
| style={{ width: '100%', height: '100%' }} | ||
| /> | ||
| </View> | ||
|
|
||
| {/* Content Overlay */} | ||
| <YStack | ||
| gap={1} | ||
| style={{ | ||
| flex: 1, | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| padding: 20, | ||
| backgroundColor: 'rgba(0, 0, 0, 0.5)', | ||
| }}> | ||
| <StyledH1 | ||
| color="white" | ||
| style={{ | ||
| textAlign: 'center', | ||
| textShadowColor: 'black', | ||
| textShadowOffset: { width: -1, height: -1 }, | ||
| textShadowRadius: 2, | ||
| shadowOpacity: 1, | ||
| }}> | ||
| {title} | ||
| </StyledH1> | ||
| <StyledH4 | ||
| style={{ | ||
| color: 'white', | ||
| textAlign: 'center', | ||
| margin: '10px 0', | ||
| textShadowColor: 'black', | ||
| textShadowOffset: { width: -1, height: -1 }, | ||
| textShadowRadius: 2, | ||
| shadowOpacity: 1, | ||
| }}> | ||
| {description} | ||
| </StyledH4> | ||
| {/* Render any children passed into the component */} | ||
| {children} | ||
| </YStack> | ||
| </YStack> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import React, { ReactNode, useState } from 'react' | ||
| import { YStack, XStack, Text, Image, Input, Button, Avatar, Separator, PopoverProps } from 'tamagui' | ||
| import { Heart, MessageCircle, Bookmark, Share2, MoreVertical } from '@tamagui/lucide-icons' | ||
| import { Popover, Adapt } from 'tamagui' | ||
|
|
||
| interface PopoverDemoProps extends PopoverProps { | ||
| Icon?: any | ||
| Name?: string | ||
| shouldAdapt?: boolean | ||
| } | ||
|
|
||
| export function InstaCard() { | ||
| const [shouldAdapt, setShouldAdapt] = useState(true) | ||
|
|
||
| return ( | ||
| <YStack | ||
| width={400} | ||
| backgroundColor="$background" | ||
| borderRadius="$4" | ||
| shadowColor="$shadowColor" | ||
| shadowOffset={{ width: 0, height: 4 }} | ||
| shadowOpacity={0.1} | ||
| shadowRadius={20} | ||
| > | ||
| {/* Header */} | ||
| <XStack justifyContent="space-between" padding="$3"> | ||
| <XStack alignItems="center" space="$2"> | ||
| <Avatar circular size="$3"> | ||
| <Avatar.Image | ||
| source={{ uri: "https://source.unsplash.com/50x50/?portrait" }} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| </Avatar> | ||
| <YStack> | ||
| <Text fontWeight="600" fontSize="$2">leroy_jenkins72</Text> | ||
| <Text fontSize="$1" color="$gray10">Somewhere</Text> | ||
| </YStack> | ||
| </XStack> | ||
|
|
||
| {/* Popover Button */} | ||
| <PopoverDemo placement="bottom" Icon={MoreVertical} Name="options-popover" /> | ||
| </XStack> | ||
|
|
||
| {/* Image */} | ||
| <Image | ||
| source={{ uri: "https://source.unsplash.com/301x301/?random" }} | ||
| width="100%" | ||
| height={300} | ||
| borderRadius="$2" | ||
| /> | ||
|
|
||
| {/* Action Buttons */} | ||
| <XStack padding="$3" justifyContent="space-between" alignItems="center"> | ||
| <XStack space="$3"> | ||
| <PopoverDemo placement="bottom" Icon={Heart} Name="like-popover" /> | ||
| <PopoverDemo placement="bottom" Icon={MessageCircle} Name="comment-popover" /> | ||
| <PopoverDemo placement="bottom" Icon={Share2} Name="share-popover" /> | ||
| </XStack> | ||
| <PopoverDemo placement="bottom" Icon={Bookmark} Name="bookmark-popover" /> | ||
| </XStack> | ||
|
|
||
| {/* Likes Section */} | ||
| <XStack paddingHorizontal="$3" space="$2" alignItems="center"> | ||
| <Avatar circular size="$2"> | ||
| <Avatar.Image | ||
| source={{ uri: "https://source.unsplash.com/40x40/?portrait?1" }} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| </Avatar> | ||
| <Avatar circular size="$2"> | ||
| <Avatar.Image | ||
| source={{ uri: "https://source.unsplash.com/40x40/?portrait?2" }} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| </Avatar> | ||
| <Avatar circular size="$2"> | ||
| <Avatar.Image | ||
| source={{ uri: "https://source.unsplash.com/40x40/?portrait?3" }} | ||
| width="100%" | ||
| height="100%" | ||
| /> | ||
| </Avatar> | ||
| <Text fontSize="$2"> | ||
| Liked by <Text fontWeight="600">Mamba UI</Text> and <Text fontWeight="600">86 others</Text> | ||
| </Text> | ||
| </XStack> | ||
|
|
||
| {/* Caption */} | ||
| <YStack paddingHorizontal="$3" paddingVertical="$2"> | ||
| <Text fontSize="$2"> | ||
| <Text fontWeight="600">leroy_jenkins72 </Text> | ||
| Nemo ea quasi debitis impedit! | ||
| </Text> | ||
| </YStack> | ||
|
|
||
| {/* Comment Input */} | ||
| <Separator marginHorizontal="$3" /> | ||
| <Input margin="$3" placeholder="Add a comment..." /> | ||
| </YStack> | ||
| ) | ||
| } | ||
|
|
||
| // PopoverDemo component | ||
|
|
||
| function PopoverDemo({ Icon, Name, shouldAdapt = true, ...props }: PopoverDemoProps) { | ||
| return ( | ||
| <Popover size="$5" allowFlip {...props}> | ||
| <Popover.Trigger asChild> | ||
| <Button iconAfter={Icon} /> | ||
| </Popover.Trigger> | ||
|
|
||
| {shouldAdapt && ( | ||
| <Adapt platform="touch"> | ||
| <Popover.Sheet modal dismissOnSnapToBottom> | ||
| <Popover.Sheet.Frame padding="$4"> | ||
| <Adapt.Contents /> | ||
| </Popover.Sheet.Frame> | ||
| <Popover.Sheet.Overlay | ||
| animation="lazy" | ||
| enterStyle={{ opacity: 0 }} | ||
| exitStyle={{ opacity: 0 }} | ||
| /> | ||
| </Popover.Sheet> | ||
| </Adapt> | ||
| )} | ||
|
|
||
| <Popover.Content | ||
| borderWidth={1} | ||
| borderColor="$borderColor" | ||
| enterStyle={{ y: -10, opacity: 0 }} | ||
| exitStyle={{ y: -10, opacity: 0 }} | ||
| elevate | ||
| animation={['quick', { opacity: { overshootClamping: true } }]} | ||
| > | ||
| <Popover.Arrow borderWidth={1} borderColor="$borderColor" /> | ||
| <YStack gap="$3"> | ||
| <Text>{Name} content goes here.</Text> | ||
| <Popover.Close asChild> | ||
| <Button size="$3">Close</Button> | ||
| </Popover.Close> | ||
| </YStack> | ||
| </Popover.Content> | ||
| </Popover> | ||
| ) | ||
| } |
Oops, something went wrong.