123 lines
3.4 KiB
TypeScript
123 lines
3.4 KiB
TypeScript
import { useMemo, useState } from 'react';
|
|
import { ScrollView, StyleSheet, View } from 'react-native';
|
|
|
|
import {
|
|
CategoryTabs,
|
|
CommunityGrid,
|
|
FeatureCarousel,
|
|
Header,
|
|
PageLayout,
|
|
SectionHeader,
|
|
StatusBarSpacer,
|
|
type CommunityItem,
|
|
type FeatureItem,
|
|
} from '@/components/bestai';
|
|
|
|
const categories = [
|
|
{ id: 'visual-effects', label: 'Visual Effects' },
|
|
{ id: 'higgsfield-soul', label: 'Higgsfield Soul' },
|
|
{ id: 'higgsfield-apps', label: 'Higgsfield Apps' },
|
|
{ id: 'king', label: 'King' },
|
|
];
|
|
|
|
const baseFeatureItems: FeatureItem[] = [
|
|
{
|
|
id: 'sketch-video',
|
|
title: 'UNLIMITED SKETCH TO VIDEO',
|
|
subtitle: 'Bring your imagination to life with Sora 2',
|
|
image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80',
|
|
},
|
|
{
|
|
id: 'portrait-video',
|
|
title: 'UNLIMITED PORTRAIT TO VIDEO',
|
|
subtitle: 'Transform portraits into motion-driven stories',
|
|
image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
|
|
},
|
|
{
|
|
id: 'water-simulation',
|
|
title: 'FLUID SIMULATION PACK',
|
|
subtitle: 'Realistic water physics for cinematic scenes',
|
|
image: 'https://images.unsplash.com/photo-1505744386214-51dba16a26fc?auto=format&fit=crop&w=800&q=80',
|
|
},
|
|
];
|
|
|
|
const baseCommunityItems: CommunityItem[] = [
|
|
{
|
|
id: 'community-1',
|
|
chip: '64/10',
|
|
title: 'OBJECTS AROUND',
|
|
image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
|
|
actionLabel: 'Generate',
|
|
},
|
|
{
|
|
id: 'community-2',
|
|
chip: '64/10',
|
|
title: 'OBJECTS AROUND',
|
|
image: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=800&q=80',
|
|
actionLabel: 'Generate',
|
|
},
|
|
{
|
|
id: 'community-3',
|
|
chip: '64/10',
|
|
title: 'OBJECTS AROUND',
|
|
image: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&q=80',
|
|
actionLabel: 'Generate',
|
|
},
|
|
{
|
|
id: 'community-4',
|
|
chip: '64/10',
|
|
title: 'OBJECTS AROUND',
|
|
image: 'https://images.unsplash.com/photo-1531259683007-016a7b628fc4?auto=format&fit=crop&w=800&q=80',
|
|
actionLabel: 'Generate',
|
|
},
|
|
];
|
|
|
|
export default function ExploreScreen() {
|
|
const [activeCategory, setActiveCategory] = useState(categories[0]?.id ?? 'visual-effects');
|
|
|
|
const featureItems = useMemo(() => {
|
|
return baseFeatureItems.map((item, index) => ({
|
|
...item,
|
|
id: `${activeCategory}-${index}`,
|
|
}));
|
|
}, [activeCategory]);
|
|
|
|
const communityItems = useMemo(() => {
|
|
return baseCommunityItems.map((item, index) => ({
|
|
...item,
|
|
id: `${activeCategory}-${index}`,
|
|
}));
|
|
}, [activeCategory]);
|
|
|
|
return (
|
|
<PageLayout backgroundColor="#050505">
|
|
<ScrollView
|
|
style={styles.scroll}
|
|
contentContainerStyle={styles.contentContainer}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
<StatusBarSpacer />
|
|
<Header />
|
|
<CategoryTabs categories={categories} activeId={activeCategory} onChange={setActiveCategory} />
|
|
<FeatureCarousel items={featureItems} />
|
|
<SectionHeader title="WAN 2.5 COMMUNITY" />
|
|
<CommunityGrid items={communityItems} />
|
|
<View style={styles.bottomSpacer} />
|
|
</ScrollView>
|
|
</PageLayout>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
scroll: {
|
|
flex: 1,
|
|
},
|
|
contentContainer: {
|
|
paddingTop: 16,
|
|
paddingBottom: 48,
|
|
},
|
|
bottomSpacer: {
|
|
height: 32,
|
|
},
|
|
});
|