added export functionality to github

mobile-magic/apps/frontend/app/layout.tsx

@@ -6,6 +6,7 @@ import { meta } from '@/lib/constants'
 import { Particles } from '@repo/ui/particles'
 import { SidebarProvider } from '@/components/ui/sidebar'
 import { AppSidebar } from "@/components/app-sidebar"
+import { Toaster } from 'sonner'
 
 import "./globals.css"
 
@@ -48,7 +49,7 @@ export default function RootLayout({
 						enableSystem
 						disableTransitionOnChange
 					>
-
+						<Toaster />
 						<SidebarProvider defaultOpen={false} className="relative">
 							<AppSidebar />
 							{children}
@@ -61,4 +62,3 @@ export default function RootLayout({
 }
 
 // grid px-4 grid-cols-[1fr_min(640px,100%)_1fr] xl:grid-cols-[1fr_minmax(auto,10rem)_min(640px,100%)_minmax(auto,10rem)_1fr] xl:gap-x-9 xl:px-0 [&>*]:col-start-2 xl:[&>*]:col-start-3
-

mobile-magic/apps/frontend/components/Appbar.tsx

@@ -13,14 +13,16 @@ import { containerVariants, itemVariants } from '@/lib/animation-variants'
 import { ThemeButton } from '@/components/theme-button' 
 
 export function Appbar() {
+  const repoUrl = `https://github.com/VarshanMaj1/mobile-magic`;
+
   return (
     <motion.div 
     	variants={containerVariants}
      	initial="hidden"
      	animate="visible"
     	className="flex items-center mt-4 justify-between"
     >
-      <Header />
+      <Header repoUrl={repoUrl} />
 
       <motion.div variants={itemVariants} className="flex gap-2 items-center justify-center">
 	<ThemeButton />
@@ -50,4 +52,3 @@ export function Appbar() {
     </motion.div>
   );
 }
-

mobile-magic/apps/frontend/components/ExportOptions.tsx

@@ -0,0 +1,78 @@
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { GitHubLogoIcon, FileIcon, DownloadIcon } from '@radix-ui/react-icons'
+import { toast } from 'sonner'
+
+interface ExportOptionsProps {
+  repoUrl?: string
+  onExport?: (type: 'github' | 'https' | 'ssh' | 'cli') => void
+}
+
+export const ExportOptions = ({ repoUrl, onExport }: ExportOptionsProps) => {
+  const handleCopy = (text: string, type: string) => {
+    navigator.clipboard.writeText(text)
+    toast.success(`Copied ${type} URL to clipboard`)
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 [&_svg:not([class*='size-'])]:size-5"
+        >
+          <DownloadIcon />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[300px]">
+        <div className="p-3">
+          <div className="flex items-center gap-2 mb-2">
+            <GitHubLogoIcon className="size-5" />
+            <span className="font-medium">Clone</span>
+          </div>
+          <div className="text-sm text-zinc-500 dark:text-zinc-400 mb-4">
+            Select a cloning method to get the project URL
+          </div>
+          <div className="space-y-2">
+            <DropdownMenuItem
+              className="flex items-center justify-between"
+              onClick={() => {
+                handleCopy(`${repoUrl || ''}`, 'HTTPS');
+                onExport?.('https');
+              }}
+            >
+              <span>HTTPS</span>
+              <FileIcon className="size-4" />
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="flex items-center justify-between"
+              onClick={() => {
+                handleCopy(`[email protected]:${repoUrl?.split('github.com/')[1]}`, 'SSH');
+                onExport?.('ssh');
+              }}
+            >
+              <span>SSH</span>
+              <FileIcon className="size-4" />
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              className="flex items-center justify-between"
+              onClick={() => {
+                handleCopy(`gh repo clone ${repoUrl?.split('github.com/')[1]}`, 'GitHub CLI');
+                onExport?.('cli');
+              }}
+            >
+              <span>GitHub CLI</span>
+              <FileIcon className="size-4" />
+            </DropdownMenuItem>
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

mobile-magic/apps/frontend/components/Header.tsx

@@ -4,12 +4,14 @@ import { cn } from '@/lib/utils'
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'motion/react'
-import { itemVariants } from '@/lib/animation-variants' 
+import { itemVariants } from '@/lib/animation-variants'
+import { ExportOptions } from './ExportOptions'
 
-export const Header = ({ children, className, onClick }: {
+export const Header = ({ children, className, onClick, repoUrl }: {
 	children?: React.ReactNode,
 	className?: string,
-	onClick?: () => void
+	onClick?: () => void,
+	repoUrl?: string
 }) => {
 	return (
 		<motion.header variants={itemVariants} className="flex items-center gap-2 bg-zinc-100 border dark:border-zinc-800 dark:hover:bg-zinc-600/10 dark:bg-zinc-900 px-4 py-2 rounded-3xl">
@@ -20,6 +22,8 @@ export const Header = ({ children, className, onClick }: {
 			<Link href="/">
 			   <Image src="/logo.svg" alt="logo" width={25} height={25} />
 			</Link>
+			<div className="flex-1" />
+			<ExportOptions repoUrl={repoUrl} />
 			{children && <Button
 				variant="link"
 				data-sidebar="trigger"

mobile-magic/apps/frontend/components/ui/dropdown-menu.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+}

mobile-magic/apps/frontend/package.json

@@ -14,6 +14,8 @@
     "@radix-ui/react-alert-dialog": "^1.1.6",
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
@@ -35,14 +37,14 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.2.1-canary.1",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }