github/self
1
1
Fork 0
mirror of https://github.com/selfxyz/self.git synced 2026-04-05 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Aaron DeRuvo
2025-01-27 11:43:29 +01:00
committed by Aaron DeRuvo
parent a1baac7198
commit f49da05dd6
5 changed files with 90 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
app/src/components/buttons/AbstractButton.tsx
View File

@@ -1,15 +1,14 @@
import React from 'react';
import { Text, StyleSheet, Pressable, PressableProps } from 'react-native';
import { Text, StyleSheet, Pressable, PressableProps, ViewStyle } from 'react-native';
import { black, slate200, slate300, white } from '../../utils/colors';
export interface ButtonProps extends PressableProps {
children: React.ReactNode
children: React.ReactNode;
}
interface AbstractButtonProps extends ButtonProps {
bgColor: string
color: string
bgColor: string;
color: string;
}
/*
@@ -18,38 +17,49 @@ interface AbstractButtonProps extends ButtonProps {
@dev If the button isnt filling the space check that its parent is 100% width
*/
export default function AbstractButton({children, bgColor, color, ...pressable}: AbstractButtonProps) {
const isDisabled = pressable.disabled;
const backgroundColor = isDisabled ? white : bgColor;
const textColor = isDisabled ? slate300 : color;
const borderColor = isDisabled ? slate200 : backgroundColor;
return (
<Pressable {...pressable} style={[styles.container, {backgroundColor, borderColor: borderColor, borderWidth: 4}]}>
<Text style={[styles.text, {color: textColor}]}>
{children}
</Text>
</Pressable>
);
export default function AbstractButton({
children,
bgColor,
color,
style,
...pressable
}: AbstractButtonProps) {
const isDisabled = pressable.disabled;
const backgroundColor = isDisabled ? white : bgColor;
const textColor = isDisabled ? slate300 : color;
const borderColor = isDisabled ? slate200 : backgroundColor;
return (
<Pressable
{...pressable}
style={[
styles.container,
{ backgroundColor, borderColor: borderColor, borderWidth: 4 },
style as ViewStyle,
]}
>
<Text style={[styles.text, { color: textColor }]}>{children}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
container: {
position: 'relative',
justifyContent: 'center',
flexDirection: 'column',
flexGrow: 0,
flexShrink: 0,
backgroundColor: black,
width: '100%',
display: 'flex',
alignItems: 'center',
rowGap: 12,
padding: 16, // plus 4 of border = 20
borderRadius: 5,
},
text: {
fontFamily: 'Cochin',
textAlign: 'center',
fontSize: 18,
},
container: {
position: 'relative',
justifyContent: 'center',
flexDirection: 'column',
flexGrow: 0,
flexShrink: 0,
backgroundColor: black,
width: '100%',
display: 'flex',
alignItems: 'center',
rowGap: 12,
padding: 16, // plus 4 of border = 20
borderRadius: 5,
},
text: {
fontFamily: 'Cochin',
textAlign: 'center',
fontSize: 18,
},
});

22
app/src/components/buttons/PrimaryButton.tsx
View File

@@ -1,11 +1,13 @@
import { amber50, slate300, black, white } from "../../utils/colors";
import AbstractButton, {ButtonProps} from "./AbstractButton";
import { amber50, slate300, black, white } from '../../utils/colors';
import AbstractButton, { ButtonProps } from './AbstractButton';
export function PrimaryButton({children, ...props}: ButtonProps) {
const isDisabled = props.disabled
const bgColor = isDisabled ? white : black
const color = isDisabled ? slate300 : amber50
return (
<AbstractButton {...props} bgColor={bgColor} color={color}>{children}</AbstractButton>
);
}
export function PrimaryButton({ children, ...props }: ButtonProps) {
const isDisabled = props.disabled;
const bgColor = isDisabled ? white : black;
const color = isDisabled ? slate300 : amber50;
return (
<AbstractButton {...props} bgColor={bgColor} color={color}>
{children}
</AbstractButton>
);
}

17
app/src/components/buttons/SecondaryButton.tsx
View File

@@ -1,9 +1,10 @@
import { slate200, slate500 } from "../../utils/colors";
import AbstractButton, {ButtonProps} from "./AbstractButton";
import { slate200, slate500 } from '../../utils/colors';
import AbstractButton, { ButtonProps } from './AbstractButton';
export function SecondaryButton({children, ...props}: ButtonProps) {
return (
<AbstractButton {...props} bgColor={slate200} color={slate500}>{children}</AbstractButton>
);
}
export function SecondaryButton({ children, ...props }: ButtonProps) {
return (
<AbstractButton {...props} bgColor={slate200} color={slate500}>
{children}
</AbstractButton>
);
}

37
app/src/screens/DevPlayScreen.tsx
View File

@@ -1,24 +1,31 @@
import React from 'react';
import {PrimaryButton} from "../components/buttons/PrimaryButton"
import {SecondaryButton} from "../components/buttons/SecondaryButton"
import { PrimaryButton } from '../components/buttons/PrimaryButton';
import { SecondaryButton } from '../components/buttons/SecondaryButton';
import { Text, XStack, YStack } from 'tamagui';
import { View } from 'react-native';
import { componentBgColor } from '../utils/colors';
const DevPlayScreen = () => {
return (
<YStack ai="center" f={1} gap="$8" mt="$18" mb="$8">
<View style={{padding: 20, display: "flex", alignItems: "center", gap: 20, width: "100%", backgroundColor: componentBgColor}} >
<Text fontSize="$9">Hello PASSPORT</Text>
<PrimaryButton disabled>Primary Button Disabled</PrimaryButton>
<PrimaryButton>Primary Button</PrimaryButton>
<SecondaryButton>Secondary Button</SecondaryButton>
</View>
<XStack f={1} />
</YStack>
)
return (
<YStack ai="center" f={1} gap="$8" mt="$18" mb="$8">
<View
style={{
padding: 20,
display: 'flex',
alignItems: 'center',
gap: 20,
width: '100%',
backgroundColor: componentBgColor,
}}
>
<Text fontSize="$9">Hello PASSPORT</Text>
<PrimaryButton disabled>Primary Button Disabled</PrimaryButton>
<PrimaryButton>Primary Button</PrimaryButton>
<SecondaryButton>Secondary Button</SecondaryButton>
</View>
<XStack f={1} />
</YStack>
);
};
export default DevPlayScreen;

2
app/src/utils/colors.ts
View File

@@ -7,7 +7,7 @@ export const slate200 = '#E2E8F0';
export const slate300 = '#CBD5E1';
export const slate500 = '#64748B';
export const slate600 = '#475569';
export const slate800 = '#1E293B';
export const slate800 = '#1E293B';
export const sky500 = '#0EA5E9';
export const green500 = '#22C55E';
export const red500 = '#EF4444';