Switching between collection with Appwrite and Next.js

Question

Good evening all,

I have run into a problem I can`t seem to figure out. I am currently creating a team product dashboard that lets you create new tasks, sort them into three groups(new, inprogress, done) and lets you drag and drop(using beautful dnd). I am using appwrite to create the tasks and add to the collection...

The problem is I would like to implement a feature where I can create a new project(collection) and be able to switch between the two. Currently I have my Cards component that stores the different tasks within and that is placed in the page layout for the given projects.

NEXT_PUBLIC_APPWRITE_PROJECT_ID=653cd5bc3d.....
NEXT_PUBLIC_DATABASE_ID=653cd5f50a7....
NEXT_PUBLIC_TODOS_COLLECTION_ID=......

NEXT_PUBLIC2_TODOS_COLLECTION_ID=653e70....

so I would like to be able switch between PUBLIC AND PUBLIC2...so far I tried passing it as a prop with not much luck. created a database.config.ts file

export const projectConfig: Record<string, any> = {
    gameApp: {
        projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID as string,
        databaseId: process.env.NEXT_PUBLIC_DATABASE_ID as string,
        todosCollectionId: process.env.NEXT_PUBLIC_TODOS_COLLECTION_ID as string,
    },
    otherProject: {
        projectId: process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID as string,
        databaseId: process.env.NEXT_PUBLIC_DATABASE_ID as string,
        todosCollectionId: process.env.NEXT_PUBLIC2_TODOS_COLLECTION_ID as string,
    },
};

then tried passing these as props, but not much luck...it just gives me the default collection

I do apologise if I described the problem poorly, still rather new to this whole coding!

any advice would be much appreciated