rn-vs-lb 1.0.64 → 1.0.66

package/components/Chat/InputMessage.stories.tsx

@@ -8,7 +8,7 @@ import InputMessage, { ImageAsset } from './InputMessage';
 type Props = React.ComponentProps<typeof InputMessage>;
 
 const meta: Meta<Props> = {
-  title: 'Chat/InputMessage',
+  title: 'Features/Chat/InputMessage',
   component: InputMessage,
   decorators: [
     (Story) => (
@@ -87,18 +87,21 @@ const Template: StoryFn<Props> = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   placeholder: 'Message',
+  editingLabel: 'Editing message',
   maxImages: 1,
 };
 
 export const AttachmentsDisabled = Template.bind({});
 AttachmentsDisabled.args = {
   placeholder: 'No attachments allowed',
+  editingLabel: 'Editing message',
   enableImageAttachment: false,
 };
 
 export const WithAttachments = Template.bind({});
 WithAttachments.args = {
   placeholder: 'Attach up to 2 images',
+  editingLabel: 'Editing message',
   maxImages: 2,
 };
 WithAttachments.render = (args) => {
@@ -118,6 +121,7 @@ WithAttachments.render = (args) => {
         return imgs;
       }}
       onMaxImagesExceeded={(max) => Alert.alert('Max images exceeded', `Allowed: ${max}`)}
+      editingLabel="Editing message"
     />
   );
 };
@@ -137,6 +141,8 @@ export const ReplyMode: StoryFn = () => {
       onCancelReply={replyCancelHandler}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -152,6 +158,8 @@ export const EditMode: StoryFn = () => {
       onCancelEdit={editCancelHandler}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -176,6 +184,8 @@ export const SendingControlled: StoryFn = () => {
       maxImages={1}
       onTyping={typingHandler}
       onStopTyping={stopTypingHandler}
+      placeholder="Message"
+      editingLabel="Editing message"
     />
   );
 };
@@ -200,6 +210,7 @@ export const ManyInputsDemo: StoryFn = () => {
           placeholder={`Message #${idx + 1}`}
           onTyping={() => logEvent(`typing-${idx}`)}
           onStopTyping={() => logEvent(`stop-typing-${idx}`)}
+          editingLabel="Editing message"
         />
       ))}
     </ScrollView>

package/components/Chat/InputMessage.tsx

@@ -33,7 +33,8 @@ interface InputMessageProps {
   onStopTyping?: () => void; // будет вызвано через ~2s тишины
 
   // Placeholder
-  placeholder?: string;
+  placeholder: string;
+  editingLabel: string;
 }
 
 export const InputMessage: FC<InputMessageProps> = ({
@@ -56,7 +57,8 @@ export const InputMessage: FC<InputMessageProps> = ({
   onTyping,
   onStopTyping,
 
-  placeholder = 'Message',
+  placeholder,
+  editingLabel,
 }) => {
   const { theme, typography } = useTheme();
   const styles = getStyles(theme);
@@ -119,7 +121,7 @@ export const InputMessage: FC<InputMessageProps> = ({
       {/* Edit */}
       {editMessage && (
         <View style={[styles.replyContainer, { borderLeftColor: theme.primaryLight }]}>
-          <Text style={styles.replyLabel}>Editing message</Text>
+          <Text style={styles.replyLabel}>{editingLabel}</Text>
           <View style={styles.replyContent}>
             <Text numberOfLines={1} style={styles.replyText}>
               {editMessage.content ?? ''}

package/components/Chat/MessageItem/MessageItem.stories.tsx

@@ -7,7 +7,7 @@ import MessageItem from './MessageItem';
 import { LinkPreviewData, MessageDTO, MessageItemProps } from './types';
 
 const meta: Meta<MessageItemProps> = {
-  title: 'Chat/MessageItem',
+  title: 'Features/Chat/MessageItem',
   component: MessageItem,
   decorators: [
     (Story) => (

package/components/Chat/PinnedMessagesBar/PinnedMessagesBar.stories.tsx

@@ -8,7 +8,7 @@ import { MessageDTO } from '../../../types/message';
 type Props = React.ComponentProps<typeof PinnedMessagesBar>;
 
 const meta: Meta<Props> = {
-  title: 'Chat/PinnedMessagesBar',
+  title: 'Features/Chat/PinnedMessagesBar',
   component: PinnedMessagesBar,
   decorators: [
     (Story) => (

package/components/Gallery/AiAgentGallery.stories.tsx

@@ -7,7 +7,7 @@ import { AiAgentGalleryView } from './AiAgentGallery.pure';
 type Props = React.ComponentProps<typeof AiAgentGalleryView>;
 
 const meta: Meta<Props> = {
-  title: 'Gallery/AiAgentGallery',
+  title: 'Features/Gallery/AiAgentGallery',
   component: AiAgentGalleryView,
   decorators: [
     (Story) => (

package/components/Gallery/ProfileMediaGallery.stories.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Meta, StoryFn } from "@storybook/react";
+import { View } from "react-native";
+import { ThemeProvider } from "../../theme";
+import { ProfileMediaGallery, ProfileMediaGalleryProps } from "./ProfileMediaGallery";
+
+const meta: Meta<typeof ProfileMediaGallery> = {
+  title: 'Features/Gallery/ProfileMediaGallery',
+  component: ProfileMediaGallery,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ padding: 24 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+const TABS: ProfileMediaGalleryProps["tabs"] = [
+  { key: "photos", label: "Photos", iconName: "collections" },
+  { key: "videos", label: "Videos", iconName: "videocam" },
+  { key: "music", label: "Music", iconName: "music-note" },
+  { key: "albums", label: "Albums", iconName: "photo-album" },
+];
+
+const Template: StoryFn<ProfileMediaGalleryProps> = (args) => (
+  <ProfileMediaGallery {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  tabs: TABS,
+  images: [
+    "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=600&q=60",
+    "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=600&q=60",
+  ],
+};
+
+export const ControlledTabs: StoryFn<ProfileMediaGalleryProps> = ({ ...rest }) => {
+  const [activeTabKey, setActiveTabKey] = useState(rest.activeTabKey ?? TABS[0].key);
+
+  return (
+    <ProfileMediaGallery
+      {...rest}
+      tabs={rest.tabs ?? TABS}
+      activeTabKey={activeTabKey}
+      onTabPress={(tab, index) => {
+        setActiveTabKey(tab.key);
+        rest.onTabPress?.(tab, index);
+      }}
+    />
+  );
+};
+
+ControlledTabs.args = {
+  tabs: TABS,
+  images: Default.args?.images ?? [],
+};

package/components/Gallery/ProfileMediaGallery.tsx

@@ -0,0 +1,239 @@
+import React, { useMemo, useState, useEffect } from "react";
+import {
+  Image,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  useWindowDimensions,
+} from "react-native";
+import { ThemeType, SizesType, TypographytType, useTheme } from "../../theme";
+import { GalleryModal } from "../Modals";
+import { ProfileMediaNavigationItem, ProfileMediaNavigationItemProps } from "./ProfileMediaNavigationItem";
+
+type TabItem = Omit<ProfileMediaNavigationItemProps, "isActive" | "onPress"> & {
+  key: string;
+};
+
+export type ProfileMediaGalleryProps = {
+  tabs: TabItem[];
+  activeTabKey?: string;
+  onTabPress?: (tab: TabItem, index: number) => void;
+  images: string[];
+  extraInfoLabel?: string;
+  extraInfoActionLabel?: string;
+  onExtraInfoPress?: () => void;
+  uploadButtonLabel?: string;
+  showAllButtonLabel?: string;
+  onUploadPress?: () => void;
+  onShowAllPress?: () => void;
+};
+
+const FALLBACK_IMAGES = [
+  "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1557862921-37829c790f19?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=600&q=60",
+  "https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=600&q=60",
+];
+
+export const ProfileMediaGallery: React.FC<ProfileMediaGalleryProps> = ({
+  tabs = [],
+  activeTabKey,
+  onTabPress,
+  images = [],
+  extraInfoLabel = "+14 photo tags",
+  extraInfoActionLabel = "View",
+  onExtraInfoPress,
+  uploadButtonLabel = "Upload photo",
+  showAllButtonLabel = "Show all",
+  onUploadPress,
+  onShowAllPress,
+}) => {
+  const { theme, sizes, typography } = useTheme();
+  const { width } = useWindowDimensions();
+  const styles = useMemo(() => getStyles(theme, sizes, typography), [theme, sizes, typography]);
+  const [internalActiveKey, setInternalActiveKey] = useState<string>(
+    activeTabKey ?? tabs[0]?.key ?? ""
+  );
+
+  useEffect(() => {
+    if (activeTabKey) {
+      setInternalActiveKey(activeTabKey);
+    }
+  }, [activeTabKey]);
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalInitialIndex, setModalInitialIndex] = useState(0);
+
+  const displayImages = images.length ? images.slice(0, 6) : FALLBACK_IMAGES;
+
+  const contentHorizontalPadding = (sizes.lg as number) * 2;
+  const gutter = (sizes.xs as number) * 2;
+  const imageSize = Math.max(
+    72,
+    Math.floor((width - contentHorizontalPadding - gutter * 2) / 3)
+  );
+
+  const handleTabPress = (tab: TabItem, index: number) => {
+    if (!activeTabKey) {
+      setInternalActiveKey(tab.key);
+    }
+    onTabPress?.(tab, index);
+  };
+
+  const handleOpenImage = (index: number) => {
+    setModalInitialIndex(index);
+    setModalVisible(true);
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.navigationContainer}
+      >
+        {tabs.map((tab, index) => (
+          <ProfileMediaNavigationItem
+            key={tab.key}
+            label={tab.label}
+            iconName={tab.iconName}
+            isActive={internalActiveKey === tab.key}
+            onPress={() => handleTabPress(tab, index)}
+          />
+        ))}
+      </ScrollView>
+
+      <View style={styles.galleryContainer}>
+        {displayImages.map((uri, index) => (
+          <Pressable
+            key={`${uri}-${index}`}
+            onPress={() => handleOpenImage(index)}
+            style={[styles.imageWrapper, { width: imageSize, height: imageSize }]}
+            android_ripple={{ color: "#00000022" }}
+          >
+            <Image
+              source={{ uri }}
+              style={styles.image}
+              resizeMode="cover"
+            />
+          </Pressable>
+        ))}
+      </View>
+
+      <View style={styles.infoRow}>
+        <Text style={styles.infoLabel}>{extraInfoLabel}</Text>
+        <Pressable onPress={onExtraInfoPress}>
+          <Text style={styles.infoLink}>{extraInfoActionLabel}</Text>
+        </Pressable>
+      </View>
+
+      <View style={styles.actionsRow}>
+        <Pressable
+          onPress={onUploadPress}
+          style={[styles.actionButton, styles.primaryActionButton]}
+        >
+          <Text style={[styles.actionButtonText, styles.primaryActionButtonText]}>
+            {uploadButtonLabel}
+          </Text>
+        </Pressable>
+        <Pressable
+          onPress={onShowAllPress}
+          style={[styles.actionButton, styles.secondaryActionButton]}
+        >
+          <Text style={[styles.actionButtonText, styles.secondaryActionButtonText]}>
+            {showAllButtonLabel}
+          </Text>
+        </Pressable>
+      </View>
+
+      <GalleryModal
+        visible={modalVisible}
+        images={displayImages}
+        initialIndex={modalInitialIndex}
+        onRequestClose={() => setModalVisible(false)}
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ThemeType, sizes: SizesType, typography: TypographytType) =>
+  StyleSheet.create({
+    wrapper: {
+      backgroundColor: theme.card,
+      borderRadius: sizes.radius_lg as number,
+      paddingVertical: sizes.lg as number,
+      paddingHorizontal: sizes.lg as number,
+    },
+    navigationContainer: {
+      paddingBottom: sizes.sm as number,
+    },
+    galleryContainer: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "space-between",
+    },
+    imageWrapper: {
+      borderRadius: sizes.radius_sm as number,
+      overflow: "hidden",
+      marginBottom: sizes.sm as number,
+      backgroundColor: theme.backgroundSecond,
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+    },
+    infoRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginTop: sizes.xs as number,
+      marginBottom: sizes.md as number,
+    },
+    infoLabel: {
+      ...(typography.bodySm as object),
+      color: theme.text,
+      fontWeight: "500",
+    },
+    infoLink: {
+      ...(typography.textLink as object),
+      fontWeight: "600",
+    },
+    actionsRow: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: sizes.xs as number,
+    },
+    actionButton: {
+      flex: 1,
+      borderRadius: sizes.radius_sm as number,
+      paddingVertical: sizes.sm as number,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    primaryActionButton: {
+      backgroundColor: theme.primary,
+      marginRight: sizes.sm as number,
+    },
+    secondaryActionButton: {
+      backgroundColor: theme.backgroundSecond,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    actionButtonText: {
+      ...(typography.bodySm as object),
+      fontWeight: "600",
+    },
+    primaryActionButtonText: {
+      color: theme.white,
+    },
+    secondaryActionButtonText: {
+      color: theme.text,
+    },
+  });
+
+export default ProfileMediaGallery;

package/components/Gallery/ProfileMediaNavigationItem.tsx

@@ -0,0 +1,73 @@
+import React, { memo, useMemo } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { MaterialIcons } from "@expo/vector-icons";
+import { ThemeType, SizesType, TypographytType, useTheme } from "../../theme";
+
+type IconName = React.ComponentProps<typeof MaterialIcons>["name"];
+
+export type ProfileMediaNavigationItemProps = {
+  label: string;
+  iconName?: IconName;
+  isActive?: boolean;
+  onPress?: () => void;
+};
+
+export const ProfileMediaNavigationItem = memo(
+  ({ label, iconName = "photo", isActive = false, onPress }: ProfileMediaNavigationItemProps) => {
+    const { theme, sizes, typography } = useTheme();
+
+    const styles = useMemo(() => getStyles(theme, sizes, typography), [theme, sizes, typography]);
+
+    return (
+      <Pressable
+        onPress={onPress}
+        style={[styles.container, isActive ? styles.containerActive : styles.containerInactive]}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isActive }}
+      >
+        {iconName ? (
+          <View style={styles.iconWrapper}>
+            <MaterialIcons
+              name={iconName}
+              size={20}
+              color={isActive ? theme.primary : theme.greyText}
+            />
+          </View>
+        ) : null}
+        <Text style={[styles.label, { color: isActive ? theme.primary : theme.greyText }]}>{label}</Text>
+      </Pressable>
+    );
+  }
+);
+
+ProfileMediaNavigationItem.displayName = "ProfileMediaNavigationItem";
+
+const getStyles = (theme: ThemeType, sizes: SizesType, typography: TypographytType) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: "center",
+      borderRadius: sizes.radius_sm as number,
+      paddingHorizontal: sizes.md as number,
+      paddingVertical: sizes.xs as number,
+      marginRight: sizes.sm as number,
+      borderWidth: 1,
+    },
+    containerActive: {
+      backgroundColor: theme.white,
+      borderColor: theme.primary,
+    },
+    containerInactive: {
+      backgroundColor: theme.backgroundSecond,
+      borderColor: theme.border,
+    },
+    iconWrapper: {
+      marginRight: sizes.xs as number,
+    },
+    label: {
+      ...(typography.bodySm as object),
+      fontWeight: "500",
+    },
+  });
+
+export default ProfileMediaNavigationItem;

package/components/Gallery/ProfileSelfiesGallery.pure.tsx

@@ -0,0 +1,97 @@
+import React, { memo, useMemo } from "react";
+import { Image, Pressable, StyleSheet, View, StyleProp, ViewStyle } from "react-native";
+import { GalleryModal } from "../Modals";
+import { ThemeType, SizesType, useTheme } from "../../theme";
+
+type BaseProps = {
+  photos: string[];
+  columns?: number;
+  itemSize: number;
+  gap?: number;
+  visible: boolean;
+  initialIndex: number;
+  onOpenAt: (index: number) => void;
+  onClose: () => void;
+};
+
+export type ProfileSelfiesGalleryViewProps = BaseProps & {
+  style?: StyleProp<ViewStyle>;
+};
+
+export const ProfileSelfiesGalleryView = memo(
+  ({
+    photos,
+    columns = 2,
+    itemSize,
+    gap,
+    visible,
+    initialIndex,
+    onOpenAt,
+    onClose,
+    style,
+  }: ProfileSelfiesGalleryViewProps) => {
+    const { theme, sizes } = useTheme();
+    const spacing = gap ?? ((sizes.sm as number) * 1.25);
+
+    const styles = useMemo(() => getStyles(theme, sizes, spacing), [theme, sizes, spacing]);
+
+    return (
+      <View style={[styles.wrapper, style]}>
+        <View style={styles.grid}>
+          {photos.map((photo, index) => {
+            const isLastInRow = (index + 1) % columns === 0;
+
+            return (
+              <Pressable
+                key={`${photo}-${index}`}
+                onPress={() => onOpenAt(index)}
+                android_ripple={{ color: "#00000022" }}
+                style={[
+                  styles.imageWrapper,
+                  { width: itemSize, height: itemSize, marginRight: isLastInRow ? 0 : spacing },
+                ]}
+              >
+                <Image source={{ uri: photo }} style={styles.image} resizeMode="cover" />
+              </Pressable>
+            );
+          })}
+        </View>
+
+        <GalleryModal
+          visible={visible}
+          images={photos}
+          initialIndex={initialIndex}
+          onRequestClose={onClose}
+        />
+      </View>
+    );
+  }
+);
+
+ProfileSelfiesGalleryView.displayName = "ProfileSelfiesGalleryView";
+
+const getStyles = (theme: ThemeType, sizes: SizesType, spacing: number) =>
+  StyleSheet.create({
+    wrapper: {
+      backgroundColor: theme.card,
+      borderRadius: (sizes.radius_lg as number) + 4,
+      padding: sizes.lg as number,
+    },
+    grid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      justifyContent: "flex-start",
+    },
+    imageWrapper: {
+      borderRadius: (sizes.radius_lg as number) + 2,
+      overflow: "hidden",
+      marginBottom: spacing,
+      backgroundColor: theme.backgroundSecond,
+    },
+    image: {
+      width: "100%",
+      height: "100%",
+    },
+  });
+
+export default ProfileSelfiesGalleryView;

package/components/Gallery/ProfileSelfiesGallery.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useMemo } from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { Dimensions, View } from 'react-native';
+import { ThemeProvider } from '../../theme';
+import { ProfileSelfiesGalleryView } from './ProfileSelfiesGallery.pure';
+
+type Props = React.ComponentProps<typeof ProfileSelfiesGalleryView>;
+
+const WINDOW_WIDTH = Dimensions.get('window').width;
+
+const meta: Meta<Props> = {
+  title: 'Features/Gallery/ProfileSelfiesGallery',
+  component: ProfileSelfiesGalleryView,
+  decorators: [
+    (Story) => (
+      <ThemeProvider>
+        <View style={{ paddingVertical: 24, paddingHorizontal: 16 }}>
+          <Story />
+        </View>
+      </ThemeProvider>
+    ),
+  ],
+  args: {
+    columns: 2,
+  },
+};
+
+export default meta;
+
+const Template: StoryFn<Props> = ({
+  visible: _visible,
+  initialIndex: _initialIndex,
+  onOpenAt: _onOpenAt,
+  onClose: _onClose,
+  itemSize: _itemSize,
+  ...rest
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [initialIndex, setInitialIndex] = useState(0);
+
+  const itemSize = useMemo(() => {
+    const decoratorPadding = 32; // paddingHorizontal from decorator View (16 * 2)
+    const wrapperPadding = 40; // padding from component wrapper (20 * 2)
+    const gap = rest.gap ?? 15; // default spacing from component
+    const columns = rest.columns ?? 2;
+
+    return Math.floor((WINDOW_WIDTH - decoratorPadding - wrapperPadding - gap * (columns - 1)) / columns);
+  }, [rest.columns, rest.gap]);
+
+  return (
+    <ProfileSelfiesGalleryView
+      {...rest}
+      itemSize={itemSize}
+      visible={visible}
+      initialIndex={initialIndex}
+      onOpenAt={(index) => {
+        setInitialIndex(index);
+        setVisible(true);
+      }}
+      onClose={() => setVisible(false)}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  photos: [
+    'https://images.unsplash.com/photo-1690733583113-10a2dbd4c3fb?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=800&q=80',
+  ],
+};
+
+export const WithCustomGap = Template.bind({});
+WithCustomGap.args = {
+  gap: 12,
+  photos: [
+    'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1531256456869-ce942a665e80?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
+    'https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?auto=format&fit=crop&w=800&q=80',
+  ],
+};