be-components 6.1.0 → 6.1.2

package/src/BetMatch/index.tsx

@@ -1,25 +1,38 @@
 import React, { useEffect, useState } from 'react';
-import { Text, View } from "../Components/Themed";
+import { Button, Text, View } from "../Components/Themed";
 import { MyOrdersHelpers } from '../MarketComponents/components/MyOrderList/api';
-import type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, OrderProps, PlayerFilterProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
+import type { AthleteProps, EventProps, LeagueProps, MarketProps, MatchProps, MyPlayerProps, OrderProps, PlayerFilterProps, PlayerPremiumItem, PremiumItemProps, PublicPlayerProps, TeamProps, TournamentProps } from '../types';
 import { BetMatchApi } from './api';
-import { ActivityIndicator, FlatList } from 'react-native';
+import { ActivityIndicator, FlatList, Modal, StyleSheet, TouchableWithoutFeedback } from 'react-native';
 import BetMatchCardSmall from './components/BetMatchCardSmall';
 import { SocialOrderHelpers } from '../SocialComponents/api';
 import moment from 'moment-mini';
 import { useColors } from '../constants/useColors';
 import BetMatchCard from './components/BetMatchCard';
+import Pagination from '../Components/Pagination';
 
 type BetMatchProps = {
     player_filter_id:string,
     style?:any,
-    player_id:string
+    mode:'desktop'|'mobile',
+    me?:MyPlayerProps,
+    insets?:{ top:number, bottom:number, right?:number, left?:number }
+    show_grades?:boolean,
+    show_external_prices?:boolean,
+    onViewPremium?:() => void,
+    callback_order?: { result: 'success'|'cancel', order_id:string },
+    onPurchasePremium:(ppi:PlayerPremiumItem) => void,
+    player_premium_items?:PlayerPremiumItem[],
+    premium_items?:PremiumItemProps[],
+    onViewPlayer:(player:PublicPlayerProps) => void,
+    onSelectGrade:(order:OrderProps) => void,
+    onOrder:(order:OrderProps) => void
 }
 const sections = ['filter','orders', 'bet']
-const BetMatch = ({ player_filter_id }:BetMatchProps) => {
+const BetMatch = ({ me, player_filter_id, mode, insets, player_premium_items, premium_items, callback_order, onViewPlayer, onSelectGrade, onOrder, onPurchasePremium, onViewPremium }:BetMatchProps) => {
     const Colors = useColors();
-    const [ module_size, setModuleSize ] = useState({ width:0, height:0 });
-    const [ viewing_order_id, setViewingOrderId ] = useState<string|undefined>(undefined);
+    
+    const [ viewing_order_index, setViewingOrderIndex ] = useState<number>(-1);
     const [ static_data, setStaticData ] = useState<{
         static_loading:boolean,
         leagues:LeagueProps[],
@@ -31,12 +44,13 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
     const [ filter_data, setFilterData ] = useState<{
         loading:boolean,
         player_filter?:PlayerFilterProps,
+        action_loading:boolean,
         orders:OrderProps[],
     }>({
-        loading:false, orders:[]
+        loading:false, orders:[], action_loading:false
     });
-    const { loading, player_filter, orders } = filter_data;
-    const viewing_order = orders.find(o => o.order_id == viewing_order_id);
+    const { loading, player_filter, orders, action_loading } = filter_data;
+    const viewing_order = orders[viewing_order_index];
     const [ contest_data, setContestData ] = useState<{
         contest_loading:boolean,
         players:PublicPlayerProps[],
@@ -48,7 +62,7 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
     }>({
         contest_loading: false, players: [], events: [], tournaments: [], matches: [], teams:[], athletes: []
     });
-    const { players, events, tournaments, matches, teams, athletes } = contest_data;
+    const { contest_loading, players, events, tournaments, matches, teams, athletes } = contest_data;
     
     useEffect(() => {
         BetMatchApi.setEnvironment()
@@ -56,6 +70,18 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         getStaticData();
     },[player_filter_id]);
 
+    useEffect(() => {
+        if(!callback_order){ return }
+        //filter out the order!
+        setTimeout(() => {
+            if(callback_order.result == 'success'){
+                setFilterData({ ...filter_data, orders: orders.filter(o => o.order_id != callback_order.order_id), action_loading: false })
+            } else {
+                setFilterData({ ...filter_data, action_loading: false })
+            }
+        }, 500);
+    },[callback_order])
+
     const runFilter = async(id:string) => {
         setFilterData({ ...filter_data, loading: true });
         const pf = await BetMatchApi.getPlayerFilterById(id);
@@ -93,6 +119,7 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         const tms = await BetMatchApi.getTeamsByIds(team_ids);
         setContestData({
             ...contest_data,
+            contest_loading: false,
             players: plyers,
             events: evs,
             tournaments: tourns,
@@ -102,6 +129,25 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         })
     }
 
+    const handleReject = async(order:OrderProps) => {
+        setFilterData({ ...filter_data, action_loading: true });
+        await BetMatchApi.saveBetMatchResponse({
+            order_id: order.order_id,
+            response:'decline',
+            be_type: 'market',
+            bet_match_response_id:'',
+            player_id: '',
+            create_datetime:'', last_update_datetime:''
+        })
+        setTimeout(() => {
+            setFilterData({
+                ...filter_data,
+                orders: orders.filter(o => o.order_id != order.order_id)
+            })
+        }, 250);
+    }
+
+
     const renderOrders = (data:{ item:OrderProps, index:number }) => {
         const player = players.find(p => p.player_id == data.item.player_id);
         if(!player){ return <></> }
@@ -116,7 +162,7 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
                     time_detail={time}
                     league={league}
                     order={data.item}
-                    onOrder={(order) => setViewingOrderId(order.order_id)}
+                    onOrder={() => setViewingOrderIndex(data.index)}
                 />
             </View>
         )
@@ -126,7 +172,6 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
         switch(data.item){
             case 'filter':
                 if(!player_filter){ return <></> }
-                if(viewing_order){ return <></> }
                 return (
                     <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
                         <View transparent style={{ flex:1, marginRight:10 }}>
@@ -140,53 +185,105 @@ const BetMatch = ({ player_filter_id }:BetMatchProps) => {
                     </View>
                 )
             case 'orders':
-                if(viewing_order){ return <></> }
                 return (
-                    <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
-                        {orders.map((item, index) => {
-                            return renderOrders({ item, index })
-                        })}
-                    </View>
-                )
-            case 'bet':
-                if(!viewing_order){ return <></> }
-                const player = players.find(p => p.player_id == viewing_order.player_id);
-                if(!player){ return <></> }
-                const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
-                return (
-                    <View style={{ flex:1, padding:20 }}>
-                        <BetMatchCard
-                            player={player}
-                            height={module_size.height - 60}
-                            order={viewing_order}
-                            team={team}
-                            athlete={athlete}
-                            league={league}
-                            time_detail={time}
-                            contest_title={title}
-                            onOrder={(order) => console.log(order)}
-                        />
+                    <View>
+                        {loading || contest_loading ?
+                        <View transparent style={{ justifyContent:'center', alignItems:'center', padding:50 }}>
+                            <ActivityIndicator size='large' color={Colors.text.h1} />
+                            <Text theme='h1' color={Colors.text.h1} style={{ marginTop:10 }}>Running Your Filter...</Text>
+                        </View>
+                        :<></>}
+                         <View style={{ flexDirection:'row', flexWrap:'wrap' }}>
+                            {orders.map((item, index) => {
+                                return renderOrders({ item, index })
+                            })}
+                        </View>
                     </View>
                 )
+
             default: return <></>
         }
     }
+    const viewing_player = players.find(p => p.player_id == viewing_order?.player_id);
+    const { team, athlete, league, title, time } = SocialOrderHelpers.getContestDetails(viewing_order, events, tournaments, matches, athletes, teams, leagues)
     return (
-        <View style={{ flex:1 }} onLayout={(ev) => {
-            const { width, height } = ev.nativeEvent.layout;
-            setModuleSize({ width, height })
-        }}>
-            {loading ?
-            <ActivityIndicator size='large' color={Colors.text.h1} />
-            :<></>}
+        <View style={{ flex:1 }}>
             <FlatList
                 data={sections}
                 key={'filter_sections'}
                 keyExtractor={item => item}
                 renderItem={renderSections}
             />
+            <Modal
+                style={styles.modalContainer}
+                animationType={mode=='desktop' ? 'fade' : 'slide'}
+                transparent
+                visible={viewing_order ? true : false}
+            >
+                <TouchableWithoutFeedback style={{ flex:1 }} onPress={() => setViewingOrderIndex(-1)}>
+                    <View type="blur" style={mode=='desktop' ? styles.desktopContainer : { ...styles.viewContainer }}>
+                        <TouchableWithoutFeedback>
+                            <View transparent style={mode=='desktop' ?{ width:500, maxHeight:750, borderRadius:22 }:{ flex:1, paddingTop:insets?.top ?? 0, paddingBottom:insets?.bottom ?? 0 }}>
+                                {viewing_order ?
+                                <View transparent style={{ padding:10, paddingRight:20, paddingLeft:20, flex:1 }}>
+                                    <BetMatchCard
+                                        player={viewing_player}
+                                        order={viewing_order}
+                                        team={team}
+                                        player_premium_items={player_premium_items}
+                                        premium_items={premium_items}
+                                        me={me}
+                                        athlete={athlete}
+                                        league={league}
+                                        action_loading={action_loading}
+                                        time_detail={time}
+                                        contest_title={title}
+                                        onViewPlayer={onViewPlayer}
+                                        onPurchasePremium={onPurchasePremium}
+                                        onViewPremium={onViewPremium}
+                                        onSelectGrade={onSelectGrade}
+                                        onOrder={(order) => {
+                                            setFilterData({ ...filter_data, action_loading: true });
+                                            onOrder(order);
+                                        }}
+                                        onReject={(order) => handleReject(order)}
+                                    />
+                                </View>
+                                :<></>}
+                                <View type='footer' style={{ flexDirection:'row', alignItems:'center', padding:5, paddingBottom: (insets?.bottom ?? 0) + 5, borderRadius:8 }}>
+                                    <Button
+                                        float
+                                        title='X'
+                                        title_color={Colors.text.error}
+                                        style={{ borderRadius:100, height:35, width:35, padding:0, justifyContent:'center', alignItems:'center' }}
+                                        onPress={() => {
+                                            if(action_loading){ setFilterData({ ...filter_data, action_loading: false }) }
+                                            setViewingOrderIndex(-1)
+                                        }}
+                                    />
+                                    <View transparent style={{ flex:1 }}>
+                                        <Pagination
+                                            pages={orders.length}
+                                            onSelectPage={(page) => setViewingOrderIndex(page)}
+                                            onNext={() => setViewingOrderIndex(viewing_order_index + 1)}
+                                            onPrevious={() => setViewingOrderIndex(viewing_order_index - 1)}
+                                            offset={viewing_order_index}
+                                        />
+                                    </View>
+                                </View>
+                            </View>
+                        </TouchableWithoutFeedback>
+                    </View>
+                </TouchableWithoutFeedback>
+            </Modal>
         </View>
     )
 }
 
+const styles = StyleSheet.create({
+    modalContainer: { flex:1 },
+    viewContainer: { flex:1, justifyContent:'flex-end' },
+    desktopContainer:{ flex:1, justifyContent:'center', alignItems:'center' }
+})
+
 export default BetMatch

package/src/Components/AthleteLozenge.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import type { AthleteProps, LeagueProps } from '../types'
+import { Button, Text, View } from './Themed'
+import { useColors } from '../constants/useColors'
+import { AthleteImage } from './Jerseys'
+
+
+type AthleteLozengeProps = {
+    leagues:LeagueProps[],
+    athlete: AthleteProps,
+    is_active?:boolean,
+    abbr_only?:boolean,
+    text_size?:number,
+    onSelect: (athlete:AthleteProps) => void
+}
+export const AthleteLozenge = ({ leagues, athlete, text_size, is_active, abbr_only, onSelect }:AthleteLozengeProps) => {
+    const Colors = useColors();
+    const league = leagues.find(l => l.league_id == athlete.league_id);
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(athlete)
+    }
+    
+    return (
+        <Button float 
+            style={{ flexGrow:1, flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderRadius:100, padding:0, borderColor:is_active ? Colors.text.success : Colors.borders.light }} onPress={() => handleSelect()}>
+            {abbr_only ?
+            <View transparent style={{ padding:10 }}>
+                <Text size={text_size??16}  theme='h2' color={is_active ? Colors.text.success : undefined}>{athlete.position}: {athlete.abbr_name}</Text>
+            </View>
+            :
+            <View transparent style={{ flexDirection:'row', padding:2 }}>
+                <AthleteImage
+                    athlete={athlete}
+                    league={league}
+                    size={(text_size ?? 16) * 2}
+                    number_size={8}
+                    
+                />
+                <View transparent style={{marginLeft:10, marginRight:10}}>
+                    <Text size={text_size??16} theme='h2' color={is_active ? Colors.text.success : undefined}>{athlete.abbr_name}</Text>
+                    {athlete.team ?
+                    <Text style={{ marginTop:3 }} size={10} color={is_active ? Colors.text.success : undefined}>{league?`${league.league_name}: `:''}{athlete.team.abbr}</Text>
+                    :<></>}
+                </View>
+            </View>
+            }
+        </Button>
+    )
+}
+
+export default AthleteLozenge

package/src/Components/AutoScrollFlatList.tsx

@@ -7,6 +7,7 @@ import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
   Platform,
+  Dimensions,
 } from 'react-native';
 
 type AutoScrollingFlatListProps<T> = {
@@ -38,7 +39,7 @@ const AutoScrollingFlatList = <T,>({
   const scrollStartTime = useRef<number | null>(null);
 
   const [ready, setReady] = useState(false);
-  const [isPaused, setIsPaused] = useState(false); // replaces isHovered
+  const [isPaused, setIsPaused] = useState(false);
   const [containerSize, setContainerSize] = useState(0);
 
   const handleLayout = (e: LayoutChangeEvent) => {
@@ -53,40 +54,34 @@ const AutoScrollingFlatList = <T,>({
       ? e.nativeEvent.layout.width
       : e.nativeEvent.layout.height;
 
+    if(size == 0){ return }
     itemSizes.current[index] = size;
-
-    const allMeasured =
-      itemSizes.current.length === data.length &&
-      itemSizes.current.every((v) => typeof v === 'number');
-
+    const allMeasured = itemSizes.current.length === data.length && itemSizes.current.every((v): v is number => typeof v === 'number');
     if (allMeasured && !ready) {
       totalSize.current = itemSizes.current
         .filter((v): v is number => typeof v === 'number')
         .reduce((acc, val) => acc + val, 0);
       setReady(true);
     }
+      
   };
 
   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     const currentOffset = horizontal
       ? e.nativeEvent.contentOffset.x
       : e.nativeEvent.contentOffset.y;
-
     offset.current = currentOffset;
   };
 
   useEffect(() => {
-    const isWeb = Platform.OS === 'web';
-
-    if (!ready || (isWeb && isPaused) || speed <= 0 || containerSize === 0) return;
-
+    if (!ready || isPaused || speed <= 0 || containerSize === 0) return;
+    if(totalSize.current == 0){ return }
     const frameInterval = 16;
     const pixelsPerFrame = (speed * frameInterval) / 1000;
     scrollStartTime.current = Date.now();
 
     scrollTimer.current = setInterval(() => {
       offset.current += pixelsPerFrame;
-
       const maxOffset = totalSize.current - containerSize;
       const now = Date.now();
       const reachedEnd = offset.current >= maxOffset;
@@ -114,6 +109,13 @@ const AutoScrollingFlatList = <T,>({
     };
   }, [ready, speed, isPaused, containerSize, onCompleteScroll, minDuration]);
 
+  // Kick off scroll once ready
+  useEffect(() => {
+    if (ready && !isPaused && speed > 0 && containerSize > 0) {
+      listRef.current?.scrollToOffset({ offset: offset.current, animated: false });
+    }
+  }, [ready, isPaused, speed, containerSize]);
+
   // Reset state/refs on resetKey change
   useEffect(() => {
     if (scrollTimer.current) clearInterval(scrollTimer.current);
@@ -125,6 +127,20 @@ const AutoScrollingFlatList = <T,>({
     setIsPaused(false);
   }, [resetKey]);
 
+  // Ensure auto-scroll works after first mobile touch
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+
+    const unlock = () => {
+      setIsPaused(false);
+    };
+
+    document.addEventListener('touchstart', unlock, { once: true });
+    return () => {
+      document.removeEventListener('touchstart', unlock);
+    };
+  }, []);
+
   const wrappedRenderItem = ({ item, index }: { item: T; index: number }) => (
     <View onLayout={(e) => updateItemLayout(index, e)} style={{ flexShrink: 0 }}>
       {renderItem({ item, index })}
@@ -136,19 +152,36 @@ const AutoScrollingFlatList = <T,>({
       ? {
           onMouseEnter: () => setIsPaused(true),
           onMouseLeave: () => setIsPaused(false),
-          onTouchStart: () => setIsPaused(true),   // pause on mobile tap
+          onTouchStart: () => {
+            if (scrollStartTime.current !== null) {
+              setIsPaused(true);
+            }
+          },
           onTouchEnd: () => setIsPaused(false),
         }
       : {
-          onTouchStart: () => setIsPaused(true),
+          onTouchStart: () => {
+            if (scrollStartTime.current !== null) {
+              setIsPaused(true);
+            }
+          },
           onTouchEnd: () => setIsPaused(false),
         };
 
+  const windowSize = Dimensions.get('window');
+
   return (
     <View
       {...(wrapperProps as any)}
       onLayout={handleLayout}
-      style={[{ overflow: 'hidden' }, style]}
+      style={[
+        {
+          overflow: 'hidden', flex:1,
+          height: horizontal ? '100%' : windowSize.height,
+          width: horizontal ? windowSize.width : '100%',
+        },
+        style,
+      ]}
     >
       <FlatList
         ref={listRef}
@@ -157,6 +190,8 @@ const AutoScrollingFlatList = <T,>({
         keyExtractor={(_, i) => i.toString()}
         horizontal={horizontal}
         scrollEnabled={true}
+        initialNumToRender={data.length}
+        //removeClippedSubviews={true}
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}

package/src/Components/Icons.tsx

@@ -1550,6 +1550,11 @@ const LocationIcon = ({ color, size }:IconProps) => {
     )
 }
 
+//Premium!!
+
+
+
+
 export default {
     SearchIcon,
     LiquidityIcon,

package/src/Components/Jerseys.tsx

@@ -24,15 +24,15 @@ const AthleteImage = ({ athlete, size, number_size, league }:AthleteImageProps)
         }
         switch(league.league_name){
             case 'UFC':
-                return <MMAJersey /> 
+                return <MMAJersey size={size} /> 
             case 'BOXING':
-                return <MMAJersey />
+                return <MMAJersey size={size} />
             case 'MLB':
-                return <MLBJersey jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
+                return <MLBJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
             case 'PGA':
                 return <PGAJersey size={size}/>
             case 'NHL':
-                return <NHLJersey jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
+                return <NHLJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint}/>
             case 'NBA':
                 return <NBAJersey size={size} jersey_fill={athlete.team?.primary_color ?? Colors.brand.midnight} stripe_fill={athlete.team?.secondary_color ?? Colors.brand.mint} />
             case 'HORSE':
@@ -151,9 +151,12 @@ const NBAJersey = ({ jersey_fill, stripe_fill, size }:{ size?:number, jersey_fil
     )
 }
 
-const MMAJersey = () => {
+const MMAJersey = ({size}:{size?:number}) => {
+    const ratio = 0.78
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="39px" height="50px" viewBox="0 0 39 50">
+        <Svg  width={`${width}px`} height={`${height}px`} viewBox="0 0 39 50">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="MMA_Glove" fillRule="nonzero">
                     <Polygon id="Path" fill="#002A51" points="14.5902716 37.2615039 21.5487452 37.2615039 31.5375218 37.2615039 34.0066576 37.7104377 35.2973423 39.3378227 35.7462761 41.8630752 35.7462761 45.5667789 35.2973423 47.3063973 34.2311245 48.8215488 32.323156 49.5510662 15.9931896 49.5510662 13.5240538 48.372615 12.2894859 46.0718294 12.0089023 42.3681257 12.7384197 39.2255892"></Polygon>
@@ -211,9 +214,12 @@ const Horse = ({ size }:{size?:number}) => {
 }
 
 
-const NHLJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fill:string }) => {
+const NHLJersey = ({ jersey_fill, stripe_fill, size }:{ jersey_fill:string, stripe_fill:string, size?:number }) => {
+    const ratio = 0.882
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="45px" height="51px" viewBox="0 0 45 51">
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 45 51">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="HockeyJerseyTemplate-1" transform="translate(1.000000, -0.000000)">
                     <Path d="M21.8934492,50.1075287 C29.7517492,50.1075287 33.7066492,46.6889287 33.7066492,46.6889287 C33.3190492,41.6757287 33.2352492,36.4133287 33.2352492,36.4133287 C33.8640492,39.2624287 36.6538492,46.4634287 36.6538492,46.4634287 C40.0629492,46.4927287 43.7955492,45.5499287 43.7955492,45.5499287 C43.7955492,44.3025287 41.4281492,20.0472287 39.4436492,12.6199287 C37.4590492,5.19268874 35.9657492,4.03390874 34.8069492,3.42485874 C33.6481492,2.81500874 26.2738492,0.185014644 26.2738492,0.185014644 L26.3577492,0.185014644 C26.3577492,0.185014644 21.4987492,1.60244874 17.4386492,0.185014644 L17.5225492,0.185014644 C17.5225492,0.185014644 10.1482492,2.81500874 8.9886592,3.42405874 C7.8290892,4.03311874 6.3365092,5.19268874 4.3519492,12.6191287 C2.3673892,20.0464287 0,44.3017287 0,45.5499287 C0,45.5499287 3.7334092,46.4927287 7.1417292,46.4634287 C7.1417292,46.4634287 9.9314992,39.2624287 10.5603492,36.4133287 C10.5603492,36.4133287 10.3538492,42.5631287 10.0889492,46.6889287 C10.0889492,46.6889287 14.0350492,50.1075287 21.8934492,50.1075287 Z" id="Path" fill={jersey_fill} fillRule="nonzero"></Path>
@@ -235,9 +241,12 @@ const NHLJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fil
 }
 
 
-const MLBJersey = ({ jersey_fill, stripe_fill }:{ jersey_fill:string, stripe_fill:string }) => {
+const MLBJersey = ({ jersey_fill, stripe_fill, size }:{ jersey_fill:string, stripe_fill:string, size?:number }) => {
+    const ratio = 0.857
+    const height = size ?? 40
+    const width = height * ratio
     return (
-        <Svg width="42px" height="49px" viewBox="0 0 42 49">
+        <Svg width={`${width}px`} height={`${height}px`} viewBox="0 0 42 49">
             <G id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                 <G id="Baseball" transform="translate(1.000000, 0.000000)">
                     <Path d="M3.44369,25.7043763 L0,17.6691763 L1.1479,17.2386763 L9.18316,14.2254763 L13.40966,13.1688763 L16.18536,12.3883763 C18.36636,14.2256763 21.23606,15.3735763 23.99096,12.3887763 L26.97556,13.0775763 L31.56706,14.2254763 L39.02846,17.2386763 L40.17636,17.6691763 L36.73266,25.7043763 L35.43216,25.5418763 L32.14106,25.1304763 L33.19456,41.9868763 L33.28896,43.4967763 C31.94976,43.8793763 29.15656,44.8742763 28.69736,45.7925763 C28.23816,46.7108763 23.91446,47.7056763 21.80996,48.0883763 L18.94026,48.0883763 C17.21846,48.0883763 12.62686,46.9404763 11.47896,45.7925763 C10.56066,44.8742763 8.41786,43.8793763 7.46136,43.4967763 L7.51506,41.7754763 L8.03526,25.1304763 L4.7442,25.5418763 L3.44369,25.7043763 Z" id="Path" fill={jersey_fill} fillRule="nonzero"></Path>

package/src/Components/LeagueLozenge.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Image, type ViewStyle } from "react-native"
+import type { LeagueProps } from '../types'
+import { Button, Text } from './Themed'
+import { useColors } from '../constants/useColors'
+
+
+type LeagueLozengeProps = {
+    league: LeagueProps,
+    is_active?:boolean,
+    text_size?:number,
+    style?:ViewStyle,
+    onSelect: (league:LeagueProps) => void
+}
+export const LeagueLozenge = ({ league, style, is_active, text_size, onSelect }:LeagueLozengeProps) => {
+    const Colors = useColors();
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(league)
+    }
+    
+    return (
+        <Button float style={{ flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderColor:is_active?Colors.text.success: Colors.borders.light, borderRadius:100, padding:10, paddingRight:text_size??20, paddingLeft:text_size??20, ...style }} onPress={() => handleSelect()}>
+            {league.league_image ?
+            <Image
+                source={{ uri: league.league_image }}
+                style={{ height:18, width:18, marginRight:5 }}
+                resizeMode='cover'
+            />
+            :<></>}
+            <Text size={text_size??16} color={is_active ? Colors.text.success : undefined} theme='h2'>{league.league_name}</Text>
+        </Button>
+    )
+}
+
+export default LeagueLozenge

package/src/Components/MarketLozenge.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, Text } from './Themed'
+import { useColors } from '../constants/useColors'
+import type { MarketProps } from '../types'
+import type { ViewStyle } from 'react-native'
+
+type MarketLozengeProps = {
+    market: MarketProps,
+    text_size?:number,
+    is_active?:boolean,
+    style?:ViewStyle,
+    onSelect: (market:MarketProps) => void
+}
+export const MarketLozenge = ({ style, market, text_size, is_active, onSelect }:MarketLozengeProps) => {
+    const Colors = useColors();
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(market)
+    }
+    
+    return (
+        <Button float style={{ flexDirection:'row', alignItems:'center', margin:4, borderWidth:1, borderColor:is_active?Colors.text.success: Colors.borders.light, borderRadius:100, padding:10, paddingRight:text_size??20, paddingLeft:text_size??20, ...style }} onPress={() => handleSelect()}>
+
+            <Text size={text_size??16} color={is_active ? Colors.text.success : undefined} theme='h2'>{market.stat_label?market.stat_label:market.type}</Text>
+        </Button>
+    )
+}
+
+export default MarketLozenge

package/src/Components/PlayerLozenge.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Button, Text, View } from './Themed'
+import { useColors } from '../constants/useColors'
+import type { PublicPlayerProps } from '../types'
+import { Image } from 'react-native'
+
+type PlayerLozengeProps = {
+    player: PublicPlayerProps,
+    is_active?:boolean,
+    hide_name?:boolean,
+    onSelect: (player:PublicPlayerProps) => void
+}
+export const PlayerLozenge = ({ player, hide_name, is_active, onSelect }:PlayerLozengeProps) => {
+    const Colors = useColors();
+    
+    const handleSelect = () => {
+        if(!onSelect){ return }
+        onSelect(player)
+    }
+    
+    return (
+        <Button float style={{ flexGrow:!hide_name ?1 : undefined,flexDirection:'row', alignItems:'center', margin:4, borderColor:is_active?Colors.text.success:Colors.borders.light, borderWidth:1, padding:2, borderRadius:100 }} onPress={() => handleSelect()}>
+            <Image
+                source={{ uri: player.profile_pic && player.profile_pic != '' ? player.profile_pic : 'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
+                style={{ height:36, width:36, borderRadius:100 }}
+                resizeMode='cover'
+            />
+            {!hide_name ?
+            <View transparent style={{ flexGrow:1, padding:10 }}>
+                <Text theme='h2' color={is_active ? Colors.text.success: undefined}>@{player.username}</Text>
+            </View>
+            :<></>}
+        </Button>
+    )
+}
+
+export default PlayerLozenge