Skip to content

Commit

Permalink
Finish properties
Browse files Browse the repository at this point in the history
  • Loading branch information
adityapawar1 committed Dec 7, 2024
1 parent d9bc505 commit cb73b51
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 44 deletions.
124 changes: 90 additions & 34 deletions src/components/TreeDisplay/TreeDisplay.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { Text, TextInput, View } from 'react-native';
import Lightbulb from '@/icons/Lightbulb';
import SvgLocationPin from '@/icons/Location';
import SvgNuts from '@/icons/Nuts';
import SvgPaintbucket from '@/icons/Paintbucket';
import SvgRuler from '@/icons/Ruler';
import SvgTree from '@/icons/Tree';
import SvgWarning2 from '@/icons/Warning2';
import { Tree } from '@/types/tree';
import styles from './styles';

Expand All @@ -9,46 +14,97 @@ type TreeDisplayProps = {
};
export default function TreeDisplay({ treeData }: TreeDisplayProps) {
return (
<View>
<View style={styles.main}>
<Text style={styles.text}>{treeData.species?.description}</Text>
<View style={styles.main}>
<Text style={styles.text}>{treeData.species?.description}</Text>

<View style={styles.funFactHeader}>
<Lightbulb />
<Text style={styles.funFact}>Fun Fact</Text>
<View style={styles.funFactHeader}>
<Lightbulb />
<Text style={styles.funFact}>Fun Fact</Text>
</View>

<TextInput
style={styles.textInput}
value={treeData.species?.fun_fact ?? ''}
editable={false}
multiline
numberOfLines={4}
/>

<View style={styles.separator}></View>

<Text style={styles.header}>Location</Text>
<View style={styles.locations}>
<View style={styles.locationEntry}>
<SvgLocationPin />
<Text style={styles.propertyText}>
Bank #{treeData.bank} {' '}|{' '} Row #{treeData.row}
{/* TODO: Needs to support range of rows */}
</Text>
</View>
</View>

<TextInput
style={styles.textInput}
value={treeData.species?.fun_fact ?? ''}
editable={false}
multiline
numberOfLines={4}
/>

<View style={styles.separator}></View>

<Text style={styles.header}>Location</Text>
<View style={styles.locations}>
<View style={styles.locationEntry}>
<SvgLocationPin />
<Text style={styles.text}>
Bank #{treeData.bank} {' '} | {' '} Row #{treeData.row}
{/* TODO: Needs to support range of rows */}
<Text style={styles.header}>Properties</Text>
<View style={styles.properties}>
{treeData.species?.height_ft && (
<View style={styles.property}>
<SvgRuler />
<Text style={styles.propertyText}>
{treeData.species?.height_ft}ft
</Text>
</View>
</View>
)}

<Text style={styles.header}>Properties</Text>
<View style={styles.properties}>
<Text style={styles.text}>{treeData.species?.height_ft}ft</Text>
<Text style={styles.text}>
{treeData.species?.has_nuts ? 'Has nuts' : 'No nuts'}
</Text>
<Text style={styles.text}>{treeData.species?.height_ft}</Text>
<Text style={styles.text}>{treeData.species?.height_ft}</Text>
<Text style={styles.text}>{treeData.species?.height_ft}</Text>
</View>
{treeData.species?.has_nuts !== null && (
<View style={styles.property}>
<SvgNuts />
<Text style={styles.propertyText}>
{treeData.species?.has_nuts ? 'Has nuts' : 'No nuts'}
</Text>
</View>
)}

{treeData.species?.tree_shape && (
<View style={styles.property}>
<SvgTree />
<Text style={styles.propertyText}>
{treeData.species?.tree_shape}
</Text>
</View>
)}

{treeData.species?.utility_friendly && (
<View style={styles.property}>
<SvgWarning2 />
<Text style={styles.propertyText}>Utility Friendly</Text>
</View>
)}

{treeData.species?.flower_color && (
<View style={styles.property}>
<SvgPaintbucket />
<Text style={styles.propertyText}>
{treeData.species?.flower_color}
</Text>
</View>
)}

{treeData.species?.has_nuts && (
<View style={styles.property}>
<SvgNuts />
<Text style={styles.propertyText}>
{treeData.species?.has_nuts ? 'Has nuts' : 'No nuts'}
</Text>
</View>
)}

{treeData.species?.has_nuts && (
<View style={styles.property}>
<SvgNuts />
<Text style={styles.propertyText}>
{treeData.species?.has_nuts ? 'Has nuts' : 'No nuts'}
</Text>
</View>
)}
</View>
</View>
);
Expand Down
15 changes: 14 additions & 1 deletion src/components/TreeDisplay/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export default StyleSheet.create({
flexDirection: 'column',
marginTop: 25,
gap: 25,
paddingBottom: 25,
},
text: {
fontSize: 14,
Expand Down Expand Up @@ -46,9 +47,21 @@ export default StyleSheet.create({
},
properties: {
flexWrap: 'wrap',
alignItems: 'center',
flexDirection: 'row',
},
property: {
marginTop: 15,
width: '50%',
flexDirection: 'row',
gap: 30,
gap: 10,
alignItems: 'center',
},
propertyText: {
fontSize: 16,
color: colors.gray3,
},

funFactHeader: {
flexDirection: 'row',
gap: 10,
Expand Down
21 changes: 21 additions & 0 deletions src/icons/Ruler.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import * as React from 'react';
import Svg, { G, Path } from 'react-native-svg';

const SvgRuler = props => (
<Svg
xmlns="http://www.w3.org/2000/svg"
width={40}
height={39}
fill="none"
{...props}
>
<G fill="#446127">
<Path
d="m20.964 29.422 8.269-14.02c.98-1.662.4-3.779-1.298-4.738L23.843 8.35c-1.698-.96-3.86-.393-4.84 1.27l-8.27 14.02c-.98 1.661-.4 3.778 1.297 4.738l4.092 2.312c1.699.96 3.861.393 4.842-1.27"
opacity={0.4}
/>
<Path d="m18.855 9.871 5.115 2.891c.42.237.566.774.324 1.185a.903.903 0 0 1-1.21.317l-5.115-2.89zM11.767 21.888l3.887 2.197c.42.237.567.774.325 1.184a.903.903 0 0 1-1.21.318L10.88 23.39zM14.153 17.842l5.102 2.937c.42.237.556.768.314 1.179l-.006.01c-.242.41-.785.544-1.215.301l-5.08-2.925zM16.492 13.877l2.66 1.503c.42.237.566.774.324 1.185a.903.903 0 0 1-1.21.317l-2.66-1.503z" />
</G>
</Svg>
);
export default SvgRuler;
18 changes: 9 additions & 9 deletions src/types/species.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ export type Species = {
image_link: string;
description: string;
fun_fact: string;
height_ft: number;
ca_native: boolean;
fall_color: boolean;
utility_friendly: boolean;
root_damage_potential: string;
tree_shape: string;
flower_color: string;
fruit_type: string;
has_nuts: boolean;
height_ft?: number;
ca_native?: boolean;
fall_color?: boolean;
utility_friendly?: boolean;
root_damage_potential?: string;
tree_shape?: string;
flower_color?: string;
fruit_type?: string;
has_nuts?: boolean;
};

0 comments on commit cb73b51

Please sign in to comment.