mirror of
https://gitea.tendokyu.moe/ppc/amnet.git
synced 2026-09-22 22:28:22 +03:00
add placeholder for "no cards"
This commit is contained in:
@@ -1,11 +1,14 @@
|
||||
import * as Clipboard from 'expo-clipboard';
|
||||
import {useCallback, useMemo} from "react";
|
||||
import {FlatList, View} from "react-native";
|
||||
import React, {useCallback, useMemo} from "react";
|
||||
|
||||
import {AMCard} from "../models/AMCard";
|
||||
import {AimeCard} from "../components/AimeCard";
|
||||
import RealmContext from "../models/RealmContext";
|
||||
import ContextMenu from "react-native-context-menu-view";
|
||||
import {EmptyStatePlaceholder} from "../components/EmptyStatePlaceholder";
|
||||
import {CreditCard, Plus} from "lucide-react-native";
|
||||
import {Button, useTheme} from "react-native-paper";
|
||||
|
||||
const {useQuery, useRealm} = RealmContext;
|
||||
|
||||
@@ -37,9 +40,20 @@ function CardEntry(props: { card: AMCard }) {
|
||||
);
|
||||
}
|
||||
|
||||
export default function CardManager() {
|
||||
export default function CardManager({navigation}) {
|
||||
const query = useQuery(AMCard);
|
||||
const cards = useMemo(() => query.sorted("added", true), [query]);
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
if (!cards.length) {
|
||||
return (
|
||||
<View style={{flex: 1, gap: 10, justifyContent: "center", alignItems: "center"}}>
|
||||
<EmptyStatePlaceholder message="No cards added yet" icon={<CreditCard color="gray"/>}/>
|
||||
<Button mode="text" onPress={() => navigation.navigate('add-card')} icon={() => <Plus size={18} color={theme.colors.primary}/>}>Add Card</Button>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<FlatList contentInsetAdjustmentBehavior="always"
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import {View} from "react-native";
|
||||
import {Paragraph} from "react-native-paper";
|
||||
|
||||
export function EmptyStatePlaceholder(props: { message: string, icon: React.ReactNode }) {
|
||||
return (
|
||||
<View style={{display: "flex", gap: 5, alignItems: "center"}}>
|
||||
{props.icon}
|
||||
<Paragraph style={{color: "gray", fontSize: 14}}>
|
||||
{props.message}
|
||||
</Paragraph>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user