-
Notifications
You must be signed in to change notification settings - Fork 327
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 #5699 from LedgerHQ/feat/llm-flexible-content-cards
Feat/llm flexible content cards
- Loading branch information
Showing
41 changed files
with
1,307 additions
and
221 deletions.
There are no files selected for viewing
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
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
55 changes: 55 additions & 0 deletions
55
apps/ledger-live-mobile/src/contentCards/cards/horizontal/elements.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,55 @@ | ||
| import { Flex, Icons, Text } from "@ledgerhq/native-ui"; | ||
| import React from "react"; | ||
| import { Image as NativeImage, Pressable } from "react-native"; | ||
| import { useTheme } from "styled-components/native"; | ||
| import { ButtonAction } from "~/contentCards/cards/types"; | ||
|
|
||
| export const Image = ({ uri }: { uri: string }) => { | ||
| return ( | ||
| <Flex width={40} height={40}> | ||
| <NativeImage source={{ uri }} borderRadius={9999} style={{ width: "100%", height: "100%" }} /> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export const Close = ({ onPress }: { onPress: ButtonAction }) => { | ||
| return ( | ||
| <Pressable onPress={onPress} hitSlop={11}> | ||
| <Icons.Close size="XS" /> | ||
| </Pressable> | ||
| ); | ||
| }; | ||
|
|
||
| type LabelProps = { | ||
| label: string; | ||
| }; | ||
|
|
||
| export const Tag = ({ label }: LabelProps) => { | ||
| const { colors } = useTheme(); | ||
|
|
||
| return ( | ||
| <Flex bg={colors.primary.c80} borderRadius={"4px"} height={"18px"} justifyContent="center"> | ||
| <Text variant="small" fontWeight="bold" px={"6px"} color={colors.neutral.c00}> | ||
| {label} | ||
| </Text> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export const Title = ({ label }: LabelProps) => { | ||
| return ( | ||
| <Text variant="body" fontWeight="medium" numberOfLines={1}> | ||
| {label} | ||
| </Text> | ||
| ); | ||
| }; | ||
|
|
||
| export const Subtitle = ({ label }: LabelProps) => { | ||
| const { colors } = useTheme(); | ||
|
|
||
| return ( | ||
| <Text variant="paragraph" fontWeight="medium" color={colors.neutral.c70} numberOfLines={1}> | ||
| {label} | ||
| </Text> | ||
| ); | ||
| }; |
57 changes: 57 additions & 0 deletions
57
apps/ledger-live-mobile/src/contentCards/cards/horizontal/index.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,57 @@ | ||
| import { Flex } from "@ledgerhq/native-ui"; | ||
| import React, { useEffect } from "react"; | ||
| import { TouchableOpacity } from "react-native"; | ||
| import { useTheme } from "styled-components/native"; | ||
| import { Close, Image, Subtitle, Tag, Title } from "~/contentCards/cards/horizontal/elements"; | ||
| import { ContentCardBuilder } from "~/contentCards/cards/utils"; | ||
|
|
||
| type Props = { | ||
| title: string; | ||
| description: string; | ||
| image: string; | ||
| tag?: string; | ||
| }; | ||
|
|
||
| const HorizontalCard = ContentCardBuilder<Props>(({ title, description, image, tag, metadata }) => { | ||
| const { colors, space } = useTheme(); | ||
|
|
||
| const isDismissable = !!metadata.actions?.onDismiss; | ||
| const isTag = !!tag; | ||
|
|
||
| useEffect(() => metadata.actions?.onView?.()); | ||
|
|
||
| return ( | ||
| <TouchableOpacity onPress={metadata.actions?.onClick} key={metadata.id}> | ||
| <Flex | ||
| bg={colors.opacityDefault.c05} | ||
| p="13px" | ||
| borderRadius="12px" | ||
| flexDirection="row" | ||
| justifyContent="space-between" | ||
| alignItems="center" | ||
| columnGap={13} | ||
| > | ||
| {image ? <Image uri={image} /> : null} | ||
|
|
||
| <Flex flex={1} rowGap={space[2]}> | ||
| <Flex flexDirection="row" justifyContent="space-between" columnGap={space[3]}> | ||
| <Flex overflow={"hidden"} flex={1}> | ||
| <Title label={title} /> | ||
| </Flex> | ||
|
|
||
| <Flex alignSelf="center" height="16px"> | ||
| {isDismissable ? ( | ||
| <Close onPress={metadata.actions?.onDismiss} /> | ||
| ) : ( | ||
| isTag && <Tag label={tag} /> | ||
| )} | ||
| </Flex> | ||
| </Flex> | ||
| {description ? <Subtitle label={description} /> : null} | ||
| </Flex> | ||
| </Flex> | ||
| </TouchableOpacity> | ||
| ); | ||
| }); | ||
|
|
||
| export default HorizontalCard; |
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,26 @@ | ||
| import { ComponentProps } from "react"; | ||
| import { TouchableOpacity } from "react-native-gesture-handler"; | ||
|
|
||
| export type ButtonAction = ComponentProps<typeof TouchableOpacity>["onPress"]; | ||
|
|
||
| export type ContentCardProps = { | ||
| metadata: ContentCardMetadata; | ||
| }; | ||
|
|
||
| export type ContentCardMetadata = { | ||
| id: string; | ||
|
|
||
| actions?: { | ||
| onView?: () => void; | ||
| onClick?: ButtonAction; | ||
| onDismiss?: ButtonAction; | ||
| }; | ||
| }; | ||
|
|
||
| /** | ||
| * Defines a content card item. | ||
| */ | ||
| export interface ContentCardItem<P extends ContentCardProps = ContentCardProps> { | ||
| component: React.FC<P & ContentCardProps>; | ||
| props: P & ContentCardProps; | ||
| } |
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,19 @@ | ||
| import React from "react"; | ||
| import { ContentCardProps, ContentCardItem } from "~/contentCards/cards/types"; | ||
|
|
||
| export const ContentCardBuilder = | ||
| <P extends object>(ContentCardComponent: React.FC<P & ContentCardProps>) => | ||
| (props: P & ContentCardProps) => <ContentCardComponent {...props} />; | ||
|
|
||
| /** | ||
| * Util function to create a content card item with proper typings that will be used in a layout. | ||
| */ | ||
| export const contentCardItem = <P extends ContentCardProps>( | ||
| component: React.FC<P>, | ||
| props: ContentCardItem<P>["props"], | ||
| ) => { | ||
| return { | ||
| component, | ||
| props, | ||
| } as ContentCardItem<P>; | ||
| }; |
Oops, something went wrong.
973275eThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
web-tools – ./apps/web-tools
ledger-live-tools.vercel.app
live.ledger.tools
web-tools-git-develop-ledgerhq.vercel.app
ledger-live.vercel.app
web-tools-ledgerhq.vercel.app