Skip to content

Instantly share code, notes, and snippets.

@burakorkmez

burakorkmez/CategoryFilter.jsx

Last active June 26, 2025 11:02
Show Gist options
  • Save burakorkmez/11bc1e5939bcc8d0a4b2f6bf1c2c6a3d to your computer and use it in GitHub Desktop.
Save burakorkmez/11bc1e5939bcc8d0a4b2f6bf1c2c6a3d to your computer and use it in GitHub Desktop.
Download ZIP
REACT NATIVE -- Recipe Finder App
Raw
auth.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { height } = Dimensions.get("window");
export const authStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
keyboardView: {
flex: 1,
},
scrollContent: {
flexGrow: 1,
paddingHorizontal: 24,
paddingTop: 40,
},
imageContainer: {
height: height * 0.3,
marginBottom: 30,
justifyContent: "center",
alignItems: "center",
},
image: {
width: 320,
height: 320,
},
title: {
fontSize: 28,
fontWeight: "bold",
color: COLORS.text,
textAlign: "center",
marginBottom: 40,
},
subtitle: {
fontSize: 16,
color: COLORS.textLight,
textAlign: "center",
marginBottom: 30,
},
formContainer: {
flex: 1,
},
inputContainer: {
marginBottom: 20,
position: "relative",
},
textInput: {
fontSize: 16,
color: COLORS.text,
paddingVertical: 16,
paddingHorizontal: 20,
backgroundColor: COLORS.background,
borderRadius: 12,
borderWidth: 1,
borderColor: COLORS.border,
},
eyeButton: {
position: "absolute",
right: 16,
top: 16,
padding: 4,
},
authButton: {
backgroundColor: COLORS.primary,
paddingVertical: 18,
borderRadius: 12,
marginTop: 20,
marginBottom: 30,
},
buttonDisabled: {
opacity: 0.7,
},
buttonText: {
fontSize: 16,
fontWeight: "600",
color: COLORS.white,
textAlign: "center",
},
linkContainer: {
alignItems: "center",
paddingBottom: 20,
},
linkText: {
fontSize: 16,
color: COLORS.textLight,
},
link: {
color: COLORS.primary,
fontWeight: "600",
},
});
Raw
CategoryFilter.jsx
import { View, Text, TouchableOpacity, ScrollView } from "react-native";
import { Image } from "expo-image";
import { homeStyles } from "../assets/styles/home.styles";
export default function CategoryFilter({ categories, selectedCategory, onSelectCategory }) {
return (
<View style={homeStyles.categoryFilterContainer}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
contentContainerStyle={homeStyles.categoryFilterScrollContent}
>
{categories.map((category) => {
const isSelected = selectedCategory === category.name;
return (
<TouchableOpacity
key={category.id}
style={[homeStyles.categoryButton, isSelected && homeStyles.selectedCategory]}
onPress={() => onSelectCategory(category.name)}
activeOpacity={0.7}
>
<Image
source={{ uri: category.image }}
style={[homeStyles.categoryImage, isSelected && homeStyles.selectedCategoryImage]}
contentFit="cover"
transition={300}
/>
<Text
style={[homeStyles.categoryText, isSelected && homeStyles.selectedCategoryText]}
>
{category.name}
</Text>
</TouchableOpacity>
);
})}
</ScrollView>
</View>
);
}
Raw
colors.js
const coffeeTheme = {
primary: "#8B593E",
background: "#FFF8F3",
text: "#4A3428",
border: "#E5D3B7",
white: "#FFFFFF",
textLight: "#9A8478",
card: "#FFFFFF",
shadow: "#000000",
};
const forestTheme = {
primary: "#2E7D32",
background: "#E8F5E9",
text: "#1B5E20",
border: "#C8E6C9",
white: "#FFFFFF",
textLight: "#66BB6A",
card: "#FFFFFF",
shadow: "#000000",
};
const purpleTheme = {
primary: "#6A1B9A",
background: "#F3E5F5",
text: "#4A148C",
border: "#D1C4E9",
white: "#FFFFFF",
textLight: "#BA68C8",
card: "#FFFFFF",
shadow: "#000000",
};
const oceanTheme = {
primary: "#0277BD",
background: "#E1F5FE",
text: "#01579B",
border: "#B3E5FC",
white: "#FFFFFF",
textLight: "#4FC3F7",
card: "#FFFFFF",
shadow: "#000000",
};
const sunsetTheme = {
primary: "#FF7E67",
background: "#FFF3F0",
text: "#2C1810",
border: "#FFD5CC",
white: "#FFFFFF",
textLight: "#FFA494",
card: "#FFFFFF",
shadow: "#000000",
};
const mintTheme = {
primary: "#00B5B5",
background: "#E8F6F6",
text: "#006666",
border: "#B2E8E8",
white: "#FFFFFF",
textLight: "#66D9D9",
card: "#FFFFFF",
shadow: "#000000",
};
const midnightTheme = {
primary: "#2C3E50",
background: "#F4F6F7",
text: "#1A2530",
border: "#D5D8DC",
white: "#FFFFFF",
textLight: "#7F8C8D",
card: "#FFFFFF",
shadow: "#000000",
};
const roseGoldTheme = {
primary: "#E0BFB8",
background: "#FDF6F5",
text: "#4A3B38",
border: "#F2D9D5",
white: "#FFFFFF",
textLight: "#C9A9A6",
card: "#FFFFFF",
shadow: "#000000",
};
export const THEMES = {
coffee: coffeeTheme,
forest: forestTheme,
purple: purpleTheme,
ocean: oceanTheme,
sunset: sunsetTheme,
mint: mintTheme,
midnight: midnightTheme,
roseGold: roseGoldTheme,
};
// 👇 change this to switch theme
export const COLORS = THEMES.purple;
Raw
favorites.styles.js
import { StyleSheet } from "react-native";
import { COLORS } from "../../constants/colors";
export const favoritesStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
header: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 20,
paddingVertical: 16,
},
title: {
fontSize: 32,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
logoutButton: {
width: 40,
height: 40,
borderRadius: 20,
backgroundColor: COLORS.card,
justifyContent: "center",
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.1,
shadowRadius: 4,
elevation: 2,
},
statsContainer: {
flexDirection: "row",
paddingHorizontal: 16,
marginTop: 24,
gap: 12,
},
statCard: {
flex: 1,
backgroundColor: COLORS.card,
borderRadius: 16,
padding: 16,
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
statIcon: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
marginBottom: 8,
},
statValue: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
},
recipesSection: {
paddingHorizontal: 16,
marginTop: 24,
paddingBottom: 32,
},
recipesGrid: {
gap: 16,
},
row: {
justifyContent: "space-between",
},
emptyState: {
alignItems: "center",
paddingVertical: 64,
paddingHorizontal: 32,
},
emptyIconContainer: {
width: 120,
height: 120,
borderRadius: 60,
backgroundColor: COLORS.card,
justifyContent: "center",
alignItems: "center",
marginBottom: 24,
borderWidth: 2,
borderColor: COLORS.border,
borderStyle: "dashed",
},
emptyTitle: {
fontSize: 24,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 24,
},
exploreButton: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.primary,
paddingHorizontal: 24,
paddingVertical: 12,
borderRadius: 24,
gap: 8,
},
exploreButtonText: {
fontSize: 16,
fontWeight: "600",
color: COLORS.white,
},
});
Raw
home.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { width } = Dimensions.get("window");
const cardWidth = (width - 48) / 2;
export const homeStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
scrollContent: {
paddingBottom: 32,
},
welcomeSection: {
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom: 16,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
},
welcomeText: {
fontSize: 32,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
featuredSection: {
paddingHorizontal: 20,
marginBottom: 24,
},
featuredCard: {
borderRadius: 24,
overflow: "hidden",
backgroundColor: COLORS.card,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 12,
},
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 12,
},
featuredImageContainer: {
height: 240,
backgroundColor: COLORS.primary,
position: "relative",
},
featuredImage: {
width: "100%",
height: "100%",
},
featuredOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: "rgba(0,0,0,0.3)",
justifyContent: "space-between",
padding: 20,
},
featuredBadge: {
backgroundColor: COLORS.primary,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 20,
alignSelf: "flex-start",
},
featuredBadgeText: {
color: COLORS.white,
fontSize: 12,
fontWeight: "600",
},
featuredContent: {
justifyContent: "flex-end",
},
featuredTitle: {
fontSize: 24,
fontWeight: "800",
color: COLORS.white,
marginBottom: 12,
textShadowColor: "rgba(0,0,0,0.3)",
textShadowOffset: { width: 0, height: 2 },
textShadowRadius: 4,
},
featuredMeta: {
flexDirection: "row",
gap: 16,
},
metaItem: {
flexDirection: "row",
alignItems: "center",
gap: 4,
},
metaText: {
fontSize: 14,
color: COLORS.white,
fontWeight: "600",
},
recipesSection: {
paddingHorizontal: 20,
marginTop: 8,
},
sectionHeader: {
marginBottom: 16,
},
sectionTitle: {
fontSize: 22,
fontWeight: "800",
color: COLORS.text,
letterSpacing: -0.5,
},
recipesGrid: {
gap: 16,
},
row: {
justifyContent: "space-between",
gap: 16,
},
emptyState: {
alignItems: "center",
paddingVertical: 64,
paddingHorizontal: 32,
},
emptyTitle: {
fontSize: 20,
fontWeight: "700",
color: COLORS.text,
marginTop: 16,
marginBottom: 8,
},
emptyDescription: {
fontSize: 14,
color: COLORS.textLight,
textAlign: "center",
},
categoryFilterContainer: {
marginVertical: 16,
},
categoryFilterScrollContent: {
paddingHorizontal: 16,
gap: 12,
},
categoryButton: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: COLORS.card,
paddingVertical: 12,
paddingHorizontal: 16,
borderRadius: 20,
borderWidth: 1,
borderColor: COLORS.border,
minWidth: 80,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
selectedCategory: {
backgroundColor: COLORS.primary,
borderColor: COLORS.primary,
shadowOpacity: 0.15,
},
categoryImage: {
width: 40,
height: 40,
borderRadius: 20,
marginBottom: 4,
backgroundColor: COLORS.border,
},
selectedCategoryImage: {
borderWidth: 2,
borderColor: COLORS.white,
},
categoryText: {
fontSize: 12,
fontWeight: "600",
color: COLORS.text,
textAlign: "center",
},
selectedCategoryText: {
color: COLORS.white,
},
});
export const recipeCardStyles = StyleSheet.create({
container: {
width: cardWidth,
backgroundColor: COLORS.card,
borderRadius: 16,
marginBottom: 16,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
overflow: "hidden",
},
imageContainer: {
position: "relative",
height: 140,
},
image: {
width: "100%",
height: "100%",
backgroundColor: COLORS.border,
},
content: {
padding: 12,
},
title: {
fontSize: 15,
fontWeight: "700",
color: COLORS.text,
marginBottom: 4,
lineHeight: 20,
},
description: {
fontSize: 12,
color: COLORS.textLight,
marginBottom: 8,
lineHeight: 16,
},
footer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
timeContainer: {
flexDirection: "row",
alignItems: "center",
},
timeText: {
fontSize: 11,
color: COLORS.textLight,
marginLeft: 4,
fontWeight: "500",
},
servingsContainer: {
flexDirection: "row",
alignItems: "center",
},
servingsText: {
fontSize: 11,
color: COLORS.textLight,
marginLeft: 4,
fontWeight: "500",
},
});
Raw
LoadingSpinner.jsx
import { View, ActivityIndicator, Text, StyleSheet } from "react-native";
import { COLORS } from "../constants/colors";
export default function LoadingSpinner({ message = "Loading...", size = "large" }) {
return (
<View style={styles.container}>
<View style={styles.content}>
<ActivityIndicator size={size} color={COLORS.primary} />
<Text style={styles.message}>{message}</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 32,
},
content: {
alignItems: "center",
gap: 16,
},
message: {
fontSize: 16,
color: COLORS.textLight,
textAlign: "center",
},
});
Raw
NoFavoritesFound.jsx
import { useRouter } from "expo-router";
import { View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { COLORS } from "@/constants/colors";
import { favoritesStyles } from "@/assets/styles/favorites.styles";
function NoFavoritesFound() {
const router = useRouter();
return (
<View style={favoritesStyles.emptyState}>
<View style={favoritesStyles.emptyIconContainer}>
<Ionicons name="heart-outline" size={80} color={COLORS.textLight} />
</View>
<Text style={favoritesStyles.emptyTitle}>No favorites yet</Text>
<TouchableOpacity style={favoritesStyles.exploreButton} onPress={() => router.push("/")}>
<Ionicons name="search" size={18} color={COLORS.white} />
<Text style={favoritesStyles.exploreButtonText}>Explore Recipes</Text>
</TouchableOpacity>
</View>
);
}
export default NoFavoritesFound;
Raw
recipe-detail.styles.js
import { StyleSheet, Dimensions } from "react-native";
import { COLORS } from "../../constants/colors";
const { height } = Dimensions.get("window");
export const recipeDetailStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
headerContainer: {
height: height * 0.5,
position: "relative",
},
imageContainer: {
...StyleSheet.absoluteFillObject,
},
headerImage: {
width: "100%",
height: "120%",
},
gradientOverlay: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: "60%",
},
floatingButtons: {
position: "absolute",
top: 50,
left: 16,
right: 16,
flexDirection: "row",
justifyContent: "space-between",
},
floatingButton: {
width: 44,
height: 44,
borderRadius: 22,
backgroundColor: "rgba(0, 0, 0, 0.3)",
justifyContent: "center",
alignItems: "center",
backdropFilter: "blur(10px)",
},
titleSection: {
position: "absolute",
bottom: 30,
left: 16,
right: 16,
},
categoryBadge: {
alignSelf: "flex-start",
backgroundColor: COLORS.primary,
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 20,
marginBottom: 12,
},
categoryText: {
color: COLORS.white,
fontSize: 12,
fontWeight: "600",
textTransform: "uppercase",
letterSpacing: 1,
},
recipeTitle: {
fontSize: 32,
fontWeight: "bold",
color: COLORS.white,
marginBottom: 8,
textShadowColor: "rgba(0, 0, 0, 0.75)",
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 3,
},
locationRow: {
flexDirection: "row",
alignItems: "center",
gap: 6,
marginBottom: 10,
},
locationText: {
color: COLORS.white,
fontSize: 16,
fontWeight: "500",
textShadowColor: "rgba(0, 0, 0, 0.75)",
textShadowOffset: { width: 1, height: 1 },
textShadowRadius: 2,
},
contentSection: {
backgroundColor: COLORS.background,
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
marginTop: -30,
paddingTop: 30,
paddingHorizontal: 16,
paddingBottom: 40,
},
statsContainer: {
flexDirection: "row",
gap: 12,
marginBottom: 32,
},
statCard: {
flex: 1,
backgroundColor: COLORS.card,
borderRadius: 20,
padding: 20,
alignItems: "center",
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
statIconContainer: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
marginBottom: 12,
},
statValue: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
marginBottom: 4,
},
statLabel: {
fontSize: 12,
color: COLORS.textLight,
textAlign: "center",
fontWeight: "500",
},
sectionContainer: {
marginBottom: 32,
},
sectionTitleRow: {
flexDirection: "row",
alignItems: "center",
gap: 12,
flex: 1,
marginBottom: 16,
},
sectionIcon: {
width: 32,
height: 32,
borderRadius: 16,
justifyContent: "center",
alignItems: "center",
},
sectionTitle: {
fontSize: 22,
fontWeight: "bold",
color: COLORS.text,
flex: 1,
},
countBadge: {
backgroundColor: COLORS.primary + "20",
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 12,
},
countText: {
color: COLORS.primary,
fontSize: 12,
fontWeight: "600",
},
videoCard: {
height: 220,
borderRadius: 20,
overflow: "hidden",
backgroundColor: COLORS.card,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
},
webview: {
flex: 1,
},
ingredientsGrid: {
gap: 12,
},
ingredientCard: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.card,
padding: 16,
borderRadius: 16,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
gap: 12,
},
ingredientNumber: {
width: 28,
height: 28,
borderRadius: 14,
backgroundColor: COLORS.primary + "20",
justifyContent: "center",
alignItems: "center",
},
ingredientNumberText: {
color: COLORS.primary,
fontSize: 12,
fontWeight: "bold",
},
ingredientText: {
flex: 1,
fontSize: 16,
color: COLORS.text,
lineHeight: 22,
},
ingredientCheck: {
opacity: 0.5,
},
instructionsContainer: {
gap: 16,
},
instructionCard: {
flexDirection: "row",
backgroundColor: COLORS.card,
borderRadius: 20,
padding: 20,
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 4,
gap: 16,
},
stepIndicator: {
width: 40,
height: 40,
borderRadius: 20,
justifyContent: "center",
alignItems: "center",
},
stepNumber: {
color: COLORS.white,
fontSize: 16,
fontWeight: "bold",
},
instructionContent: {
flex: 1,
},
instructionText: {
fontSize: 16,
color: COLORS.text,
lineHeight: 24,
marginBottom: 12,
},
instructionFooter: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
stepLabel: {
fontSize: 12,
color: COLORS.textLight,
fontWeight: "500",
},
completeButton: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: COLORS.primary + "20",
justifyContent: "center",
alignItems: "center",
},
primaryButton: {
borderRadius: 16,
overflow: "hidden",
shadowColor: COLORS.shadow,
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.2,
shadowRadius: 8,
elevation: 4,
},
buttonGradient: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
paddingVertical: 16,
gap: 10,
},
buttonText: {
color: COLORS.white,
fontSize: 16,
fontWeight: "bold",
},
secondaryButton: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: COLORS.card,
paddingVertical: 16,
borderRadius: 16,
borderWidth: 2,
borderColor: COLORS.primary,
gap: 10,
},
secondaryButtonText: {
color: COLORS.primary,
fontSize: 16,
fontWeight: "bold",
},
errorContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
errorContent: {
alignItems: "center",
padding: 32,
},
errorTitle: {
fontSize: 28,
fontWeight: "bold",
color: COLORS.white,
marginTop: 20,
marginBottom: 12,
},
errorDescription: {
fontSize: 16,
color: COLORS.white,
textAlign: "center",
lineHeight: 22,
marginBottom: 32,
opacity: 0.9,
},
errorButton: {
backgroundColor: COLORS.white,
paddingHorizontal: 32,
paddingVertical: 16,
borderRadius: 25,
},
errorButtonText: {
color: COLORS.primary,
fontSize: 16,
fontWeight: "bold",
},
});
Raw
RecipeCard.jsx
import { View, Text, TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { useRouter } from "expo-router";
import { COLORS } from "../constants/colors";
import { recipeCardStyles } from "../assets/styles/home.styles";
export default function RecipeCard({ recipe }) {
const router = useRouter();
return (
<TouchableOpacity
style={recipeCardStyles.container}
onPress={() => router.push(`/recipe/${recipe.id}`)}
activeOpacity={0.8}
>
<View style={recipeCardStyles.imageContainer}>
<Image
source={{ uri: recipe.image }}
style={recipeCardStyles.image}
contentFit="cover"
transition={300}
/>
</View>
<View style={recipeCardStyles.content}>
<Text style={recipeCardStyles.title} numberOfLines={2}>
{recipe.title}
</Text>
{recipe.description && (
<Text style={recipeCardStyles.description} numberOfLines={2}>
{recipe.description}
</Text>
)}
<View style={recipeCardStyles.footer}>
{recipe.cookTime && (
<View style={recipeCardStyles.timeContainer}>
<Ionicons name="time-outline" size={14} color={COLORS.textLight} />
<Text style={recipeCardStyles.timeText}>{recipe.cookTime}</Text>
</View>
)}
{recipe.servings && (
<View style={recipeCardStyles.servingsContainer}>
<Ionicons name="people-outline" size={14} color={COLORS.textLight} />
<Text style={recipeCardStyles.servingsText}>{recipe.servings}</Text>
</View>
)}
</View>
</View>
</TouchableOpacity>
);
}
Raw
RecipeNotFound.jsx
import { Ionicons } from "@expo/vector-icons";
import { LinearGradient } from "expo-linear-gradient";
import { Text, TouchableOpacity, View } from "react-native";
import { recipeDetailStyles } from "../assets/styles/recipe-detail.styles";
import { COLORS } from "../constants/colors";
import { useRouter } from "expo-router";
const RecipeNotFound = () => {
const router = useRouter();
return (
<LinearGradient
colors={[COLORS.primary, COLORS.background]}
style={recipeDetailStyles.errorContainer}
>
<View style={recipeDetailStyles.errorContent}>
<Ionicons name="restaurant-outline" size={80} color={COLORS.white} />
<Text style={recipeDetailStyles.errorTitle}>Recipe not found</Text>
<Text style={recipeDetailStyles.errorDescription}>
Sorry, we couldn&apos;t find this recipe. Please try again.
</Text>
<TouchableOpacity style={recipeDetailStyles.errorButton} onPress={() => router.back()}>
<Text style={recipeDetailStyles.errorButtonText}>Go Back</Text>
</TouchableOpacity>
</View>
</LinearGradient>
);
};
export default RecipeNotFound;
Raw
search.styles.js
import { StyleSheet } from "react-native";
import { COLORS } from "../../constants/colors";
export const searchStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: COLORS.background,
},
searchSection: {
paddingHorizontal: 16,
paddingTop: 16,
},
searchContainer: {
flexDirection: "row",
alignItems: "center",
backgroundColor: COLORS.card,
borderRadius: 16,
paddingHorizontal: 16,
paddingVertical: 12,
borderWidth: 1,
borderColor: COLORS.border,
shadowColor: COLORS.shadow,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
searchIcon: {
marginRight: 12,
},
searchInput: {
flex: 1,
fontSize: 16,
color: COLORS.text,
},
clearButton: {
padding: 4,
},
quickFilters: {
marginTop: 20,
},
filterLabel: {
fontSize: 16,
fontWeight: "600",
color: COLORS.text,
marginBottom: 12,
},
filterButtons: {
flexDirection: "row",
gap: 12,
},
quickFilterButton: {
backgroundColor: COLORS.card,
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1,
borderColor: COLORS.border,
},
activeQuickFilter: {
backgroundColor: COLORS.primary,
borderColor: COLORS.primary,
},
quickFilterText: {
fontSize: 14,
fontWeight: "500",
color: COLORS.text,
},
activeQuickFilterText: {
color: COLORS.white,
},
resultsSection: {
flex: 1,
paddingHorizontal: 16,
marginTop: 8,
},
resultsHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 16,
marginTop: 16,
},
resultsTitle: {
fontSize: 18,
fontWeight: "bold",
color: COLORS.text,
flex: 1,
},
resultsCount: {
fontSize: 14,
color: COLORS.textLight,
fontWeight: "500",
},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
recipesGrid: {
gap: 16,
paddingBottom: 32,
},
row: {
justifyContent: "space-between",
},
emptyState: {
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingVertical: 64,
},
emptyTitle: {
fontSize: 20,
fontWeight: "bold",
color: COLORS.text,
marginTop: 16,
marginBottom: 8,
},
emptyDescription: {
fontSize: 14,
color: COLORS.textLight,
textAlign: "center",
lineHeight: 20,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy