feat: studio - example project tabs (#27262)

* example project tabs

* imports and alignment changes

* tabs alignment to the left

apps/studio/components/interfaces/Home/Home.constants.ts

@@ -50,48 +50,77 @@ export const EXAMPLE_PROJECTS = [
     title: 'Svelte kanban board',
     description: 'A Trello clone using Supabase as the storage system.',
     url: 'https://github.com/joshnuss/supabase-kanban',
+    type: 'app',
   },
   {
     framework: 'nextjs',
     title: 'Next.js Realtime chat app',
     description: 'Next.js Slack clone app using Supabase realtime subscriptions',
     url: 'https://github.com/supabase/supabase/tree/master/examples/slack-clone/nextjs-slack-clone',
+    type: 'app',
   },
   {
     framework: 'nextjs',
     title: 'Next.js Subscription and Auth',
     description: 'The all-in-one starter kit for high-performance SaaS applications.',
     url: 'https://github.com/vercel/nextjs-subscription-payments',
+    type: 'app',
   },
   {
     framework: 'Expo',
     title: 'Expo Starter',
     description: 'Template bottom tabs with auth flow (Typescript)',
     url: 'https://github.com/codingki/react-native-expo-template/tree/master/template-typescript-bottom-tabs-supabase-auth-flow',
+    type: 'mobile',
   },
   {
     framework: 'NestJS',
     title: 'NestJS example',
     description: 'NestJS example using Supabase Auth',
     url: 'https://github.com/hiro1107/nestjs-supabase-auth',
+    type: 'app',
   },
   {
     framework: 'React',
     title: 'React realtime chat app',
     description: 'Example app of real-time chat using supabase realtime api',
     url: 'https://github.com/shwosner/realtime-chat-supabase-react',
+    type: 'app',
   },
   {
     framework: 'nextjs',
     title: 'Next.js todo list app',
     description: 'Next.js todo list example',
     url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list',
+    type: 'app',
   },
   {
     framework: 'Svelte',
     title: 'Svelte todo list app',
     description: 'Sveltejs todo with TailwindCSS and Snowpack',
     url: 'https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list',
+    type: 'app',
+  },
+  {
+    framework: 'Flutter',
+    title: 'Flutter chat app',
+    description: 'A Flutter chat app built with supabase-flutter',
+    url: 'https://github.com/supabase-community/flutter-chat',
+    type: 'mobile',
+  },
+  {
+    framework: 'Swift',
+    title: 'Swift user management app',
+    description: 'Swift user management app using supabase-swift',
+    url: 'https://github.com/supabase/supabase-swift/tree/main/Examples/UserManagement',
+    type: 'mobile',
+  },
+  {
+    framework: 'Swift',
+    title: 'Swift Slack Clone',
+    description: 'Swift Slack clone app using supabase-swift',
+    url: 'https://github.com/supabase/supabase-swift/tree/main/Examples/SlackClone',
+    type: 'mobile',
   },
   {
     framework: 'Flutter',

apps/studio/pages/project/[ref]/index.tsx

@@ -13,6 +13,7 @@ import { useSelectedProject } from 'hooks/misc/useSelectedProject'
 import { IS_PLATFORM, PROJECT_STATUS } from 'lib/constants'
 import { useAppStateSnapshot } from 'state/app-state'
 import type { NextPageWithLayout } from 'types'
+import { Tabs_Shadcn_, TabsContent_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
 
 const Home: NextPageWithLayout = () => {
   const project = useSelectedProject()
@@ -70,10 +71,31 @@ const Home: NextPageWithLayout = () => {
             <div className="mx-6">
               <h4 className="text-lg">Example projects</h4>
             </div>
-            <div className="grid gap-8 mx-6 md:grid-cols-2 lg:grid-cols-3">
-              {EXAMPLE_PROJECTS.sort((a, b) => a.title.localeCompare(b.title)).map((project) => (
-                <ExampleProject key={project.url} {...project} />
-              ))}
+            <div className="flex justify-center mx-6">
+              <Tabs_Shadcn_ defaultValue="app">
+                <TabsList_Shadcn_ className="flex gap-4">
+                  <TabsTrigger_Shadcn_ value="app">App Frameworks</TabsTrigger_Shadcn_>
+                  <TabsTrigger_Shadcn_ value="mobile">Mobile Framework</TabsTrigger_Shadcn_>
+                </TabsList_Shadcn_>
+                <TabsContent_Shadcn_ value="app">
+                  <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                    {EXAMPLE_PROJECTS.filter((project) => project.type === 'app')
+                      .sort((a, b) => a.title.localeCompare(b.title))
+                      .map((project) => (
+                        <ExampleProject key={project.url} {...project} />
+                      ))}
+                  </div>
+                </TabsContent_Shadcn_>
+                <TabsContent_Shadcn_ value="mobile">
+                  <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+                    {EXAMPLE_PROJECTS.filter((project) => project.type === 'mobile')
+                      .sort((a, b) => a.title.localeCompare(b.title))
+                      .map((project) => (
+                        <ExampleProject key={project.url} {...project} />
+                      ))}
+                  </div>
+                </TabsContent_Shadcn_>
+              </Tabs_Shadcn_>
             </div>
           </div>
         </>