movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 14:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use svg in brandpill (might need some adjusting, but looks fine)

Browse Source
This commit is contained in:
Adrian Castro
2024-04-02 00:21:53 +02:00
parent 32ce520fc0
commit e45a668c38
3 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/expo/modules/check-ios-certificate/index.ts
View File

@@ -1,5 +1,3 @@
// Import the native module. On web, it will be resolved to CheckIosCertificate.web.ts
// and on native platforms to CheckIosCertificate.ts
import CheckIosCertificateModule from "./src/CheckIosCertificateModule"; import CheckIosCertificateModule from "./src/CheckIosCertificateModule";
interface CheckIosCertificateModule { interface CheckIosCertificateModule {

13
apps/expo/src/components/BrandPill.tsx
View File

@@ -1,8 +1,9 @@
import { Image, Text, View } from "tamagui"; import { Text, useTheme, View } from "tamagui";
import Icon from "../../assets/images/icon-transparent.png"; import { MovieWebSvg } from "./Icon";
export function BrandPill() { export function BrandPill() {
const theme = useTheme();
return ( return (
<View <View
flexDirection="row" flexDirection="row"
@@ -19,8 +20,12 @@ export function BrandPill() {
scale: 1.05, scale: 1.05,
}} }}
> >
<Image source={Icon} height={20} width={20} /> <MovieWebSvg
<Text fontSize="$4" fontWeight="$bold" paddingRight={5}> fillColor={theme.tabBarIconFocused.val}
width={12}
height={12}
/>
<Text fontSize="$4" fontWeight="$bold" paddingRight={5} paddingLeft={3}>
movie-web movie-web
</Text> </Text>
</View> </View>

17
apps/expo/src/components/Icon.tsx
View File

@@ -1,12 +1,25 @@
import React from "react"; import React from "react";
import Svg, { G, Path } from "react-native-svg"; import Svg, { G, Path } from "react-native-svg";
export const MovieWebSvg = ({ fillColor }: { fillColor?: string }) => { export const MovieWebSvg = ({
fillColor,
height = 24,
width = 24,
}: {
fillColor?: string;
height?: number;
width?: number;
}) => {
const svgPath = const svgPath =
"M18.186,4.5V6.241H16.445V4.5H9.482V6.241H7.741V4.5H6V20.168H7.741V18.427H9.482v1.741h6.964V18.427h1.741v1.741h1.741V4.5Zm-8.7,12.186H7.741V14.945H9.482Zm0-3.482H7.741V11.464H9.482Zm0-3.482H7.741V7.982H9.482Zm8.7,6.964H16.445V14.945h1.741Zm0-3.482H16.445V11.464h1.741Zm0-3.482H16.445V7.982h1.741Z"; "M18.186,4.5V6.241H16.445V4.5H9.482V6.241H7.741V4.5H6V20.168H7.741V18.427H9.482v1.741h6.964V18.427h1.741v1.741h1.741V4.5Zm-8.7,12.186H7.741V14.945H9.482Zm0-3.482H7.741V11.464H9.482Zm0-3.482H7.741V7.982H9.482Zm8.7,6.964H16.445V14.945h1.741Zm0-3.482H16.445V11.464h1.741Zm0-3.482H16.445V7.982h1.741Z";
return ( return (
<Svg width="24" height="24" viewBox="0 0 20.927 20.927" fill={fillColor}> <Svg
width={width}
height={height}
viewBox="0 0 20.927 20.927"
fill={fillColor}
>
<G transform="translate(10.018 -7.425) rotate(45)"> <G transform="translate(10.018 -7.425) rotate(45)">
<Path d={svgPath} /> <Path d={svgPath} />
</G> </G>