Breadcrumb

1import * as React from "react";
2import { View, Text, Pressable, GestureResponderEvent } from "react-native";
3import { Feather } from "@expo/vector-icons";
4import { cn } from "@/lib/utils";
5 
6const Breadcrumb = React.forwardRef<
7  View,
8  React.ComponentPropsWithoutRef<typeof View> & {
9    separator?: React.ReactNode;
10  }
11>(({ style, separator, ...props }, ref) => (
12  <View
13    ref={ref}
14    accessibilityRole="header"
15    accessibilityLabel="breadcrumb"
16    style={style}
17    {...props}
18  />
19));
20 
21Breadcrumb.displayName = "Breadcrumb";
22 
23const BreadcrumbList = React.forwardRef<
24  View,
25  React.ComponentPropsWithoutRef<typeof View>
26>(({ className, style, ...props }, ref) => (
27  <View
28    ref={ref}
29    style={style}
30    className={cn("flex-row flex-wrap items-center gap-2 md:gap-3", className)}
31    {...props}
32  />
33));
34 
35BreadcrumbList.displayName = "BreadcrumbList";
36 
37const BreadcrumbItem = React.forwardRef<
38  View,
39  React.ComponentPropsWithoutRef<typeof View>
40>(({ className, style, ...props }, ref) => (
41  <View
42    ref={ref}
43    style={style}
44    className={cn("flex-row items-center gap-2", className)}
45    {...props}
46  />
47));
48 
49BreadcrumbItem.displayName = "BreadcrumbItem";
50 
51interface BreadcrumbLinkProps
52  extends React.ComponentPropsWithoutRef<typeof Pressable> {
53  asChild?: boolean;
54  href?: string;
55  active?: boolean;
56}
57 
58const BreadcrumbLink = React.forwardRef<View, BreadcrumbLinkProps>(
59  (
60    { asChild, className, style, href, active, onPress, children, ...props },
61    ref
62  ) => {
63    const handlePress = (e: GestureResponderEvent) => {
64      if (href) {
65        console.log(`Navigation to: ${href}`);
66      }
67      if (onPress) {
68        onPress(e);
69      }
70    };
71 
72    return (
73      <Pressable
74        ref={ref}
75        style={style}
76        className={cn(
77          "py-2 active:opacity-70",
78          active ? "text-foreground font-medium" : "text-muted-foreground",
79          className
80        )}
81        onPress={handlePress}
82        {...props}
83      >
84        {typeof children === "string" ? (
85          <Text
86            className={cn(
87              active ? "text-foreground font-medium" : "text-muted-foreground",
88              "text-base"
89            )}
90          >
91            {children}
92          </Text>
93        ) : (
94          children
95        )}
96      </Pressable>
97    );
98  }
99);
100 
101BreadcrumbLink.displayName = "BreadcrumbLink";
102 
103const BreadcrumbPage = React.forwardRef<
104  Text,
105  React.ComponentPropsWithoutRef<typeof Text>
106// … truncated