UI Components

import PostCard from "@/components/PostCard";
import { usePosts } from "@/store/usePosts";

function HomeScreen() {
  const [userId, setUserId] = useState("");
  const posts = usePosts((s) => s.posts);

  return (
    <LegendList
      data={posts}
      keyExtractor={(item) => item.$id}
      renderItem={({ item }) => (
        <PostCard userId={userId} post={item} />
      )}
    />
  );
}

import CommentCard from "@/components/CommentCard";

function PostDetailScreen() {
  const [userId, setUserId] = useState("");
  const [editingComment, setEditingComment] = useState<string | null>(null);

  const handleEdit = (commentId: string) => {
    setEditingComment(commentId);
    // Open edit modal
  };

  const handleDelete = async (commentId: string) => {
    // Delete comment logic
  };

  return (
    <CommentCard
      userId={userId}
      comment={comment}
      onEditPress={() => handleEdit(comment.$id)}
      onDeletePress={() => handleDelete(comment.$id)}
    />
  );
}

import MatchRoomCard from "@/components/MatchRoomCard";
import { useRooms } from "@/store/useRooms";

function RoomsScreen() {
  const rooms = useRooms((s) => s.rooms);

  return (
    <LegendList
      data={rooms}
      keyExtractor={(item) => item.$id}
      renderItem={({ item }) => <MatchRoomCard room={item} />}
    />
  );
}

import CreatePostModal from "@/components/CreatePostModal";

function HomeScreen() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <Pressable onPress={() => setIsVisible(true)}>
        <Ionicons name="add" size={24} color="white" />
      </Pressable>

      <CreatePostModal
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
      />
    </>
  );
}

import CreateRoomModal from "@/components/CreateRoomModal";

function RoomsScreen() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <>
      <Pressable onPress={() => setIsVisible(true)}>
        <Ionicons name="add" size={24} color="white" />
      </Pressable>

      <CreateRoomModal
        visible={isVisible}
        onClose={() => setIsVisible(false)}
      />
    </>
  );
}

import LeaderboardPodiumUser from "@/components/LeaderboardPodiumUser";

function LeaderboardScreen() {
  const topUsers = userStats.slice(0, 3);

  return (
    <View className="flex-row items-end justify-center gap-4">
      {/* 2nd place */}
      <LeaderboardPodiumUser userStat={topUsers[1]} rank={2} />
      
      {/* 1st place */}
      <LeaderboardPodiumUser userStat={topUsers[0]} rank={1} />
      
      {/* 3rd place */}
      <LeaderboardPodiumUser userStat={topUsers[2]} rank={3} />
    </View>
  );
}

import LeaderboardUserRow from "@/components/LeaderboardUserRow";

function LeaderboardScreen() {
  const remainingUsers = userStats.slice(3);

  return (
    <>
      {remainingUsers.map((user, index) => (
        <LeaderboardUserRow
          key={user.userId}
          user={user}
          rank={index}
        />
      ))}
    </>
  );
}

import FilterChip from "@/components/FilterChip";

function RoomsScreen() {
  const [selectedFilter, setSelectedFilter] = useState<"all" | "live" | "upcoming" | "finished">("all");

  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      {["all", "live", "upcoming", "finished"].map((label) => (
        <FilterChip
          key={label}
          label={label}
          selected={selectedFilter === label}
          onPress={() => setSelectedFilter(label as any)}
          width={label === "all" || label === "live" ? "20" : undefined}
        />
      ))}
    </ScrollView>
  );
}

import { EmptyState } from "@/components/EmptyState";

function HomeScreen() {
  const [isVisible, setIsVisible] = useState(false);
  const posts = usePosts((s) => s.posts);

  return (
    <LegendList
      data={posts}
      renderItem={({ item }) => <PostCard post={item} />}
      ListEmptyComponent={
        <EmptyState
          type="post"
          onPress={() => setIsVisible(true)}
        />
      }
    />
  );
}

import ProfileDrawer from "@/components/ProfileDrawer";
import { useUser } from "@/store/useUser";

function HomeScreen() {
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const searchQueryRef = useRef<TextInput>(null);
  const username = useUser((s) => s.username);

  return (
    <>
      {/* Overlay */}
      {isDrawerOpen && (
        <Pressable
          style={{ position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.4)" }}
          onPress={() => setIsDrawerOpen(false)}
        />
      )}

      {/* Drawer */}
      <ProfileDrawer
        username={username || ""}
        isDrawerOpen={isDrawerOpen}
        onClose={() => setIsDrawerOpen(false)}
        searchQueryRef={searchQueryRef}
      />
    </>
  );
}