@campxdev/react-native-blueprint 0.1.17 → 0.1.19

package/src/components/DataDisplay/Greeting/Greeting.tsx

@@ -1,18 +1,17 @@
 // @ts-nocheck
 import * as React from 'react';
-import {
-  Pressable as RNPressable,
-  StyleSheet,
-  View as RNView,
-} from 'react-native';
+import { Pressable as RNPressable, View as RNView } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
 import { cssInterop } from 'nativewind';
 import { Calendar } from 'lucide-react-native';
 import { cn } from '../../../lib/utils';
 import { Text } from '../../Input/Text/Text';
 import { Icon } from '../../ui/Icon';
+import { Button } from '../../Input/Button/Button';
 
 cssInterop(RNView, { className: 'style' });
 cssInterop(RNPressable, { className: 'style' });
+cssInterop(LinearGradient, { className: 'style' });
 
 const View = RNView as React.ComponentType<
   React.ComponentProps<typeof RNView> & { className?: string }
@@ -31,7 +30,9 @@ export interface GreetingProps {
   greetingText?: string;
   /** Subtitle/secondary text below greeting */
   subtitle?: string;
-  /** Whether to show the schedule/calendar button */
+  /** CTA (Call-to-Action) layout style */
+  ctaLayout?: 'icon' | 'none' | 'floating' | 'ai summary';
+  /** Whether to show the schedule/calendar button - deprecated, use ctaLayout instead */
   showScheduleButton?: boolean;
   /** Callback when schedule button is pressed */
   onSchedulePress?: () => void;
@@ -77,7 +78,8 @@ export function Greeting({
   userName = 'Marshall',
   greetingText = 'Good Morning',
   subtitle = 'You have 3 Classes today',
-  showScheduleButton = true,
+  ctaLayout = 'icon',
+  showScheduleButton,
   onSchedulePress,
   showNextUp = true,
   nextUpTitle = 'Digital Logic Design',
@@ -85,16 +87,51 @@ export function Greeting({
   className,
   testID,
 }: GreetingProps) {
+  // Handle backwards compatibility: showScheduleButton prop takes precedence if explicitly set
+  const effectiveCtaLayout =
+    showScheduleButton !== undefined
+      ? showScheduleButton
+        ? 'icon'
+        : 'none'
+      : ctaLayout;
+
+  const isAiSummary = effectiveCtaLayout === 'ai summary';
+  const isFloating = effectiveCtaLayout === 'floating';
+  const isIconOrFloatingOrNoneOrAiSummary = [
+    'icon',
+    'floating',
+    'none',
+    'ai summary',
+  ].includes(effectiveCtaLayout);
+  const isNone = effectiveCtaLayout === 'none';
+
   return (
     <View
       testID={testID}
       className={cn(
-        'w-full max-w-[400px] flex-col gap-4 items-start justify-end rounded-lg border border-border-default bg-surface-default px-3 py-4',
+        'w-full max-w-[400px] flex-col items-start justify-end bg-surface-default',
+        // Base styling based on ctaLayout
+        isAiSummary
+          ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
+          : isFloating
+            ? 'gap-4 rounded-3xl border border-border-default px-0 pt-4 pb-0 overflow-hidden'
+            : isNone
+              ? 'gap-4 rounded-3xl border border-border-default px-0 py-4'
+              : 'gap-4 rounded-3xl border border-border-default px-0 py-4',
         className
       )}
     >
       {/* Header Section: Greeting + Schedule Button */}
-      <View className="w-full flex-row items-center justify-between">
+      <View
+        className={cn(
+          'w-full flex-row items-center',
+          isFloating || isAiSummary
+            ? 'justify-between px-3'
+            : isNone
+              ? 'px-3'
+              : 'px-3'
+        )}
+      >
         {/* Header Content: Title and Subtitle */}
         <View className="flex-1 flex-col gap-1">
           <Text className="font-semibold text-base text-text-primary">
@@ -105,22 +142,32 @@ export function Greeting({
           </Text>
         </View>
 
-        {/* Schedule Button with Calendar Icon */}
-        {showScheduleButton && (
+        {/* Schedule Button with Calendar Icon - Icon Layout */}
+        {effectiveCtaLayout === 'icon' && (
+          <Pressable
+            onPress={onSchedulePress}
+            hitSlop={12}
+            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
+          >
+            <Icon as={Calendar} size={16} color="white" />
+          </Pressable>
+        )}
+
+        {/* Calendar Icon for AI Summary and Floating layouts */}
+        {isAiSummary && (
           <Pressable
             onPress={onSchedulePress}
             hitSlop={12}
-            className="ml-3 flex-row items-center justify-center rounded-lg bg-highlight-purple p-3"
-            style={styles.scheduleButton}
+            className="ml-3 flex-row items-center justify-center rounded-lg p-3 bg-highlight-purple"
           >
             <Icon as={Calendar} size={16} color="white" />
           </Pressable>
         )}
       </View>
 
-      {/* Next Up Section */}
-      {showNextUp && (
-        <View className="w-full flex-col gap-1">
+      {/* Next Up Section - For icon, none, floating, and ai summary layouts */}
+      {isIconOrFloatingOrNoneOrAiSummary && showNextUp && (
+        <View className="w-full flex-col gap-1 px-3">
           <Text className="font-medium text-xs text-text-secondary">
             Next up
           </Text>
@@ -137,18 +184,52 @@ export function Greeting({
           </View>
         </View>
       )}
+
+      {/* AI Summary Button - Purple to Red Gradient - Full Width */}
+      {isAiSummary && (
+        <LinearGradient
+          colors={['#573dab', '#f2353c']}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 0 }}
+          className="w-full items-center justify-center"
+          style={{
+            paddingVertical: 8,
+            borderBottomLeftRadius: 20,
+            borderBottomRightRadius: 20,
+          }}
+        >
+          <Pressable
+            onPress={onSchedulePress}
+            className="w-full items-center justify-center"
+            style={{ paddingVertical: 0 }}
+          >
+            <Text className="font-semibold text-sm text-white">
+              AI Summary for Today
+            </Text>
+          </Pressable>
+        </LinearGradient>
+      )}
+
+      {/* Floating Button - Full width at bottom - Card color (white) */}
+      {isFloating && (
+        <View
+          className="w-full bg-surface-default"
+          style={{ borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}
+        >
+          <Button
+            variant="outline"
+            size="default"
+            showRightIcon
+            rightIcon={Calendar}
+            onPress={onSchedulePress}
+            style={{ width: '100%' }}
+          >
+            View Schedule
+          </Button>
+        </View>
+      )}
     </View>
   );
 }
 
 Greeting.displayName = 'Greeting';
-
-const styles = StyleSheet.create({
-  scheduleButton: {
-    shadowColor: '#573dab',
-    shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.5,
-    shadowRadius: 12,
-    elevation: 8,
-  },
-});

package/src/components/ui/index.ts

@@ -19,6 +19,7 @@ export * from '../Layout/Bottomsheet/Bottom-Sheet';
 export * from '../Input/Button/Button';
 export * from '../DataDisplay/Card/Card';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/FeedCard/FeedCard';
 export * from '../DataDisplay/Greeting/Greeting';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
 export * from '../DataDisplay/DataCard/DataCard';