├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── setup
    │   └── page.tsx
    ├── layout.tsx
    ├── globals.css
    └── page.tsx
├── postcss.config.js
├── lib
    └── utils.ts
├── next.config.js
├── types.d.ts
├── components
    ├── ui
    │   ├── skeleton.tsx
    │   ├── toaster.tsx
    │   ├── badge.tsx
    │   ├── button.tsx
    │   ├── tabs.tsx
    │   ├── card.tsx
    │   ├── use-toast.ts
    │   ├── select.tsx
    │   ├── sheet.tsx
    │   ├── toast.tsx
    │   └── dropdown-menu.tsx
    ├── theme-provider.tsx
    ├── mode-toggle.tsx
    ├── navbar.tsx
    ├── code.tsx
    └── dropzone.tsx
├── util
    ├── bytes-to-size.ts
    ├── load-ffmpeg.ts
    ├── file-to-icon.tsx
    ├── compress-file-name.ts
    └── convert.ts
├── components.json
├── .gitignore
├── tailwind.config.ts
├── public
    ├── vercel.svg
    ├── logo.svg
    └── next.svg
├── tsconfig.json
├── package.json
├── README.md
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Neon-20/FileMagnet-File-Converter/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |     images: {
4 |       domains: ['api.producthunt.com'],
5 |     },
6 |   }
7 |   
8 |   module.exports = nextConfig
9 |   


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
 1 | export type Actions = {
 2 |     file:any;
 3 |     file_name:any;
 4 |     file_size: number;
 5 |     from: string;
 6 |     to: String | null;
 7 |     file_type: string;
 8 |     is_converting?: boolean;
 9 |     is_converted?: boolean;
10 |     is_error?: boolean;
11 |     url?: any;
12 |     output?: any;
13 | }


--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/util/bytes-to-size.ts:
--------------------------------------------------------------------------------
 1 | export default function bytesToSize(bytes: number): String {
 2 |     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 3 |   
 4 |     if (bytes === 0) return '0 Byte';
 5 |   
 6 |     const i = Math.floor(Math.log(bytes) / Math.log(1024));
 7 |     const size = (bytes / Math.pow(1024, i)).toFixed(2);
 8 |   
 9 |     return `${size} ${sizes[i]}`;
10 |   }


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
 5 | import { type ThemeProviderProps } from "next-themes/dist/types"
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 9 | }
10 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }


--------------------------------------------------------------------------------
/util/load-ffmpeg.ts:
--------------------------------------------------------------------------------
 1 | import { FFmpeg } from "@ffmpeg/ffmpeg";
 2 | import { toBlobURL } from '@ffmpeg/util';
 3 | 
 4 | export default async function loadFfmpeg(): Promise<FFmpeg>{
 5 |     const ffmpeg = new FFmpeg();
 6 |     const baseURL = 'https://unpkg.com/@ffmpeg/core@0.12.2/dist/umd';
 7 |     await ffmpeg.load({
 8 |         coreURL:await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
 9 |         wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
10 | 
11 |     }); 
12 |     return ffmpeg;
13 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | dist
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/app/setup/page.tsx:
--------------------------------------------------------------------------------
 1 | import Code from "@/components/code";
 2 | 
 3 | const SetupPage = () => {
 4 |     return (
 5 |         <div className="space-y-16 mx-auto container items-center justify-center">
 6 |         <div className="space-y-6">
 7 |         <h1 className="text-center text-red-500 font-medium text-4xl md:text-5xl">
 8 |         Setup this project easily 🤓
 9 |         </h1>
10 |         <div className="container items-center justify-center">
11 |         <Code/>
12 |         </div>
13 |         </div>
14 |         </div>
15 |     );
16 | }
17 | export default SetupPage;


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss'
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       backgroundImage: {
12 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 |         'gradient-conic':
14 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 |       },
16 |     },
17 |   },
18 |   plugins: [],
19 | }
20 | export default config
21 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/util/file-to-icon.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |     BsFillImageFill,
 3 |     BsFileEarmarkTextFill,
 4 |     BsFillCameraVideoFill,
 5 | } from 'react-icons/bs';
 6 | import { FaFileAudio } from 'react-icons/fa';
 7 | import { AiFillFile } from 'react-icons/ai';
 8 | import { PiSpeakerSimpleHighFill } from 'react-icons/pi';
 9 | 
10 | export default function fileToIcon(file_type: any): any {
11 |     if(file_type.includes('video')) return <BsFillCameraVideoFill />;
12 |     if(file_type.includes('audio')) return <PiSpeakerSimpleHighFill />;
13 |     if(file_type.includes('text')) return <BsFileEarmarkTextFill />;
14 |     if(file_type.includes('image')) return <BsFillImageFill />;
15 |     else return <AiFillFile />;
16 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "strict": true,
12 |     "noEmit": true,
13 |     "esModuleInterop": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "bundler",
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "jsx": "preserve",
19 |     "incremental": true,
20 |     "outDir": "./dist",
21 |     "plugins": [
22 |       {
23 |         "name": "next"
24 |       }
25 |     ],
26 |     "paths": {
27 |       "@/*": [
28 |         "./*"
29 |       ]
30 |     },
31 |     "forceConsistentCasingInFileNames": true
32 |   },
33 |   "include": [
34 |     "next-env.d.ts",
35 |     "**/*.ts",
36 |     "**/*.tsx",
37 |     ".next/types/**/*.ts"
38 |   ],
39 |   "exclude": [
40 |     "node_modules"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   Toast,
 5 |   ToastClose,
 6 |   ToastDescription,
 7 |   ToastProvider,
 8 |   ToastTitle,
 9 |   ToastViewport,
10 | } from "@/components/ui/toast"
11 | import { useToast } from "@/components/ui/use-toast"
12 | 
13 | export function Toaster() {
14 |   const { toasts } = useToast()
15 | 
16 |   return (
17 |     <ToastProvider>
18 |       {toasts.map(function ({ id, title, description, action, ...props }) {
19 |         return (
20 |           <Toast key={id} {...props}>
21 |             <div className="grid gap-1">
22 |               {title && <ToastTitle>{title}</ToastTitle>}
23 |               {description && (
24 |                 <ToastDescription>{description}</ToastDescription>
25 |               )}
26 |             </div>
27 |             {action}
28 |             <ToastClose />
29 |           </Toast>
30 |         )
31 |       })}
32 |       <ToastViewport />
33 |     </ToastProvider>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/util/compress-file-name.ts:
--------------------------------------------------------------------------------
 1 | export default function compressFileName(fileName: any): string {
 2 |     const maxSubstrLength = 18;
 3 |   
 4 |     if (fileName.length > maxSubstrLength) {
 5 |       const fileNameWithoutExtension = fileName.split('.').slice(0, -1).join('.');
 6 |   
 7 |       // Extract the extension from the fileName
 8 |       const fileExtension = fileName.split('.').pop();
 9 |   
10 |       // Calculate the length of characters to keep in the middle
11 |       const charsToKeep =
12 |         maxSubstrLength - (fileNameWithoutExtension.length + fileExtension.length + 3);
13 |   
14 |       // Create the compressed fileName
15 |       const compressedFileName =
16 |         fileNameWithoutExtension.substring(
17 |           0,
18 |           maxSubstrLength - fileExtension.length - 3,
19 |         ) +
20 |         '...' +
21 |         fileNameWithoutExtension.slice(-charsToKeep) +
22 |         '.' +
23 |         fileExtension;
24 |   
25 |       return compressedFileName;
26 |     } else {
27 |       // If the fileName is shorter than the maximum length, return it as is
28 |       return fileName.trim();
29 |     }
30 |   }


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 5 | 	 width="800px" height="800px" viewBox="0 0 31.971 31.971"
 6 | 	 xml:space="preserve">
 7 | <g>
 8 | 	<g>
 9 | 		<path d="M15.986,0.878c-2.397,0-4.669,0.545-6.699,1.519L8.985,0.908L7.323,1.404l0.672,1.69C7.985,3.1,7.974,3.105,7.964,3.112
10 | 			L6.075,0L4.309,1.343L6.746,3.93C2.923,6.766,0.44,11.311,0.44,16.424c0,8.573,6.974,15.547,15.546,15.547
11 | 			c8.571,0,15.545-6.974,15.545-15.547C31.532,7.852,24.559,0.878,15.986,0.878z M15.986,28.184c-6.484,0-11.758-5.272-11.758-11.76
12 | 			c0-0.86,0.093-1.7,0.27-2.509h7.507l-0.029-3.165l3.235,3.165h12.262c0.177,0.809,0.271,1.649,0.271,2.509
13 | 			C27.744,22.908,22.469,28.184,15.986,28.184z"/>
14 | 		<circle cx="11.571" cy="17.667" r="1.69"/>
15 | 		<circle cx="21.077" cy="17.667" r="1.69"/>
16 | 		<path d="M16.317,24.464c2.001,0,3.67-1.364,4.197-3.18h-8.396C12.647,23.1,14.316,24.464,16.317,24.464z"/>
17 | 	</g>
18 | </g>
19 | </svg>


--------------------------------------------------------------------------------
/components/ui/badge.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { cva, type VariantProps } from "class-variance-authority"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const badgeVariants = cva(
 7 |   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default:
12 |           "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
13 |         secondary:
14 |           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
15 |         destructive:
16 |           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
17 |         outline: "text-foreground",
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: "default",
22 |     },
23 |   }
24 | )
25 | 
26 | export interface BadgeProps
27 |   extends React.HTMLAttributes<HTMLDivElement>,
28 |     VariantProps<typeof badgeVariants> {}
29 | 
30 | function Badge({ className, variant, ...props }: BadgeProps) {
31 |   return (
32 |     <div className={cn(badgeVariants({ variant }), className)} {...props} />
33 |   )
34 | }
35 | 
36 | export { Badge, badgeVariants }
37 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import './globals.css'
 2 | import type { Metadata } from 'next'
 3 | import { Inter } from 'next/font/google'
 4 | import { Toaster } from "@/components/ui/toaster";
 5 | import NavBar from '@/components/navbar'
 6 | import { ThemeProvider } from "@/components/theme-provider"
 7 | import {ModeToggle} from "@/components/mode-toggle"
 8 | 
 9 | const inter = Inter({ subsets: ['latin'] })
10 | 
11 | export const metadata: Metadata = {
12 |   title: 'FileMagnet: A MultiPurpose Free File-Converter for the Web',
13 |   description: `Users can come in this application and convert any file 
14 |   into their desired file format.`,
15 | }
16 | 
17 | export default function RootLayout({
18 |   children,
19 | }: {
20 |   children: React.ReactNode
21 | }) {
22 |   return (
23 |     <html lang="en">
24 |       <body className={inter.className}>
25 |       <ThemeProvider
26 |             attribute="class"
27 |             defaultTheme="dark"
28 |             enableSystem
29 |             disableTransitionOnChange
30 |           >
31 |         <NavBar/>
32 |         <Toaster/>
33 |         <div className="pt-32 min-h-screen lg:pt-36 2xl:pt-44 container max-w-4xl lg:max-w-6xl 2xl:max-w-7xl
34 |         mx-auto ">
35 |           {children}
36 |           </div>
37 |           </ThemeProvider>
38 |       </body>
39 |     </html>
40 |   )
41 | }
42 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "file-magnet",
 3 |   "author": "Pranav Rajveer",
 4 |   "version": "0.1.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "dev": "next dev",
 8 |     "build": "next build",
 9 |     "start": "next start",
10 |     "lint": "next lint"
11 |   },
12 |   "dependencies": {
13 |     "@ffmpeg/ffmpeg": "^0.12.6",
14 |     "@ffmpeg/util": "^0.12.1",
15 |     "@radix-ui/react-dialog": "1.0.4",
16 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
17 |     "@radix-ui/react-select": "^2.0.0",
18 |     "@radix-ui/react-slot": "^1.0.2",
19 |     "@radix-ui/react-tabs": "^1.0.4",
20 |     "@radix-ui/react-toast": "^1.1.5",
21 |     "class-variance-authority": "^0.7.0",
22 |     "clsx": "^2.0.0",
23 |     "lucide-react": "^0.279.0",
24 |     "next": "^13.4.12",
25 |     "next-themes": "^0.2.1",
26 |     "react": "latest",
27 |     "react-dom": "latest",
28 |     "react-dropzone": "^14.2.3",
29 |     "react-icons": "^4.11.0",
30 |     "tailwind-merge": "^1.14.0",
31 |     "tailwindcss-animate": "^1.0.7"
32 |   },
33 |   "devDependencies": {
34 |     "@types/node": "latest",
35 |     "@types/react": "latest",
36 |     "@types/react-dom": "latest",
37 |     "autoprefixer": "latest",
38 |     "eslint": "latest",
39 |     "eslint-config-next": "latest",
40 |     "postcss": "latest",
41 |     "tailwindcss": "latest",
42 |     "typescript": "latest"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/components/mode-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | import { Button } from "@/components/ui/button"
 8 | import {
 9 |   DropdownMenu,
10 |   DropdownMenuContent,
11 |   DropdownMenuItem,
12 |   DropdownMenuTrigger,
13 | } from "@/components/ui/dropdown-menu"
14 | 
15 | export function ModeToggle() {
16 |   const { setTheme } = useTheme()
17 | 
18 |   return (
19 |     <DropdownMenu>
20 |       <DropdownMenuTrigger asChild>
21 |         <Button variant="outline" size="icon">
22 |           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
23 |           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
24 |           <span className="sr-only">Toggle theme</span>
25 |         </Button>
26 |       </DropdownMenuTrigger>
27 |       <DropdownMenuContent align="end">
28 |         <DropdownMenuItem onClick={() => setTheme("light")}>
29 |           Light
30 |         </DropdownMenuItem>
31 |         <DropdownMenuItem onClick={() => setTheme("dark")}>
32 |           Dark
33 |         </DropdownMenuItem>
34 |         <DropdownMenuItem onClick={() => setTheme("system")}>
35 |           System
36 |         </DropdownMenuItem>
37 |       </DropdownMenuContent>
38 |     </DropdownMenu>
39 |   )
40 | }
41 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | html,
 6 | body,
 7 | :root{
 8 |   height: 100%;
 9 | }
10 | 
11 | @layer base {
12 |   :root {
13 |     --background: 0 0% 100%;
14 |     --foreground: 240 10% 3.9%;
15 |     --card: 0 0% 100%;
16 |     --card-foreground: 240 10% 3.9%;
17 |     --popover: 0 0% 100%;
18 |     --popover-foreground: 240 10% 3.9%;
19 |     --primary: 240 5.9% 10%;
20 |     --primary-foreground: 0 0% 98%;
21 |     --secondary: 240 4.8% 95.9%;
22 |     --secondary-foreground: 240 5.9% 10%;
23 |     --muted: 240 4.8% 95.9%;
24 |     --muted-foreground: 240 3.8% 46.1%;
25 |     --accent: 240 4.8% 95.9%;
26 |     --accent-foreground: 240 5.9% 10%;
27 |     --destructive: 0 84.2% 60.2%;
28 |     --destructive-foreground: 0 0% 98%;
29 |     --border: 240 5.9% 90%;
30 |     --input: 240 5.9% 90%;
31 |     --ring: 240 5.9% 10%;
32 |     --radius: 1rem;
33 |   }
34 |  
35 |   .dark {
36 |     --background: 240 10% 3.9%;
37 |     --foreground: 0 0% 98%;
38 |     --card: 240 10% 3.9%;
39 |     --card-foreground: 0 0% 98%;
40 |     --popover: 240 10% 3.9%;
41 |     --popover-foreground: 0 0% 98%;
42 |     --primary: 0 0% 98%;
43 |     --primary-foreground: 240 5.9% 10%;
44 |     --secondary: 240 3.7% 15.9%;
45 |     --secondary-foreground: 0 0% 98%;
46 |     --muted: 240 3.7% 15.9%;
47 |     --muted-foreground: 240 5% 64.9%;
48 |     --accent: 240 3.7% 15.9%;
49 |     --accent-foreground: 0 0% 98%;
50 |     --destructive: 0 62.8% 30.6%;
51 |     --destructive-foreground: 0 0% 98%;
52 |     --border: 240 3.7% 15.9%;
53 |     --input: 240 3.7% 15.9%;
54 |     --ring: 240 4.9% 83.9%;
55 |   }
56 | }
57 | 
58 | 
59 | @layer base {
60 |   * {
61 |     @apply border-border;
62 |   }
63 |   body {
64 |     @apply bg-background text-foreground;
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/util/convert.ts:
--------------------------------------------------------------------------------
 1 | import { Actions } from '@/types';
 2 | import { FFmpeg } from '@ffmpeg/ffmpeg';
 3 | import { fetchFile } from '@ffmpeg/util';
 4 | 
 5 | function getFileExtension(file_name: string) {
 6 |   const regex = /(?:\.([^.]+))?$/; // Matches the last dot and everything after it
 7 | const match = regex.exec(file_name);
 8 | if (match && match[1]) {
 9 |     return match[1];
10 | }
11 |   return ''; // No file extension found
12 | }
13 | 
14 | function removeFileExtension(file_name: string) {
15 |   const lastDotIndex = file_name.lastIndexOf('.');
16 |   if (lastDotIndex !== -1) {
17 |     return file_name.slice(0, lastDotIndex);
18 |   }
19 |   return file_name; // No file extension found
20 | }
21 | 
22 | export default async function convertFile(
23 | ffmpeg: FFmpeg,
24 | action: Actions,
25 | ): Promise<any> {
26 | const { file, to, file_name, file_type } = action;
27 | const input = getFileExtension(file_name);
28 | const output = removeFileExtension(file_name) + '.' + to;
29 | ffmpeg.writeFile(input, await fetchFile(file));
30 | 
31 |   // FFMEG COMMANDS
32 |   let ffmpeg_cmd: any = [];
33 |   // 3gp video
34 |   if (to === '3gp')
35 |     ffmpeg_cmd = [
36 |     '-i',
37 |     input,
38 |     '-r',
39 |     '20',
40 |     '-s',
41 |     '352x288',
42 |     '-vb',
43 |     '400k',
44 |     '-acodec',
45 |     'aac',
46 |     '-strict',
47 |     'experimental',
48 |     '-ac',
49 |     '1',
50 |     '-ar',
51 |     '8000',
52 |     '-ab',
53 |     '24k',
54 |     output,
55 |     ];
56 |   else ffmpeg_cmd = ['-i', input, output];
57 | 
58 |   // execute cmd
59 |   await ffmpeg.exec(ffmpeg_cmd);
60 | 
61 | const data = (await ffmpeg.readFile(output)) as any;
62 | const blob = new Blob([data], { type: file_type.split('/')[0] });
63 | const url = URL.createObjectURL(blob);
64 | return { url, output };
65 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | // import DropZone from "@/components/dropzone"
 2 | 
 3 | // import Code from "@/components/code";
 4 | import DropZone from "@/components/dropzone";
 5 | import { ModeToggle } from "@/components/mode-toggle";
 6 | import Image from "next/image";
 7 | import Link from "next/link";
 8 | // import Image from "next/image";
 9 | 
10 | const Home = () => {
11 |     return ( 
12 |         <div className="space-y-12 pb-8 space-x-72 ">
13 |         <div className="space-y-6">
14 |         <h1 className="text-center text-lime-400 font-serif text-6xl md:text-6xl gap-10 ">FileMagnet🚀</h1>
15 |         <h2 className="text-center font-medium text-3xl md:text-5xl">
16 |         Convert files with ease..
17 |         <div className="relative inset-y-4">
18 |         {/* <ModeToggle/> */}
19 |         <div className="items-center flex flex-col justify-center w-full">
20 |       <Link href="https://www.producthunt.com/posts/filemagnet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-filemagnet" target="_blank">
21 |           <img 
22 |             src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=433044&theme=light" 
23 |             alt="FileMagnet - FileMagnet is a free file converter, which is backendless 🎯 | Product Hunt" 
24 |             className="w-[250px] h-[64px] hover:transition ease-in-out delay-100 hover:-translate-y-1 hover:scale-110 duration-300"
25 |           />
26 |       </Link>
27 |     </div>
28 |         </div>
29 |         </h2>
30 |         </div>
31 |         {/* Upload box */}
32 |         <DropZone /> 
33 |         </div>
34 |     );
35 | }
36 | 
37 | export default Home;
38 | 
39 | // "FileMagnet - FileMagnet is a free, file converter which is backendless 🎯 | Product Hunt"
40 | // "https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=433044&theme=light"


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : "button"
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     )
52 |   }
53 | )
54 | Button.displayName = "Button"
55 | 
56 | export { Button, buttonVariants }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Video Demonstration 🎥
 3 | https://github.com/Neon-20/FileMagnet-File-Converter/assets/55043383/ce112c67-fdf7-4dd6-bf43-f5d064fe9499
 4 | 
 5 | 
 6 | # FileMagnet🚀
 7 | 
 8 | FileMagnet is your one-stop solution for converting various file formats, including images, audio, and videos. With FileMagnet, you can easily convert your files to a different format hassle-free.🤝
 9 | 
10 | ## Getting Started⭐️
11 | 
12 | Follow these simple steps to run FileMagnet locally and start using this versatile application:
13 | 
14 | 1. **Clone the Repository**
15 |     - Clone the FileMagnet repository to your local machine using Git:
16 |     ```shell
17 |     git clone https://github.com/your-username/FileMagnet-File-Converter.git
18 |     ```
19 | 
20 | 2. **Install Dependencies**
21 |     - Navigate to the project directory and install the required dependencies:
22 |     ```shell
23 |     cd filemagnet
24 |     npm install
25 |     ```
26 | 
27 | 3. **Run the Application**
28 |     - Start the FileMagnet application locally:
29 |     ```shell
30 |     npm start
31 |     ```
32 | 
33 | That's it! You're ready to enjoy FileMagnet and start converting your files to the formats you need.
34 | 
35 | ## Features
36 | 
37 | FileMagnet offers a range of features, including:
38 | 
39 | - **Image Conversion**: Easily convert images between various formats, such as JPEG, PNG, and GIF.
40 | - **Audio Conversion**: Convert audio files to different formats like MP3, WAV, and AAC.
41 | - **Video Conversion**: Seamlessly transform video files into formats like MP4, AVI, and more.
42 | 
43 | ## Contributing
44 | 
45 | We welcome contributions from the open-source community. Feel free to submit issues, feature requests, or pull requests on our [GitHub repository](https://github.com/your-username/FileMagnet-File-Converter.git).
46 | 
47 | ## License
48 | 
49 | FileMagnet is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.
50 | 
51 | Thank you for choosing FileMagnet for your file format conversion needs. We hope you find this application helpful and efficient!
52 | 
53 | Happy converting! 🚀
54 | 


--------------------------------------------------------------------------------
/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef<
11 |   React.ElementRef<typeof TabsPrimitive.List>,
12 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
13 | >(({ className, ...props }, ref) => (
14 |   <TabsPrimitive.List
15 |     ref={ref}
16 |     className={cn(
17 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
18 |       className
19 |     )}
20 |     {...props}
21 |   />
22 | ))
23 | TabsList.displayName = TabsPrimitive.List.displayName
24 | 
25 | const TabsTrigger = React.forwardRef<
26 |   React.ElementRef<typeof TabsPrimitive.Trigger>,
27 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
28 | >(({ className, ...props }, ref) => (
29 |   <TabsPrimitive.Trigger
30 |     ref={ref}
31 |     className={cn(
32 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
33 |       className
34 |     )}
35 |     {...props}
36 |   />
37 | ))
38 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
39 | 
40 | const TabsContent = React.forwardRef<
41 |   React.ElementRef<typeof TabsPrimitive.Content>,
42 |   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
43 | >(({ className, ...props }, ref) => (
44 |   <TabsPrimitive.Content
45 |     ref={ref}
46 |     className={cn(
47 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
48 |       className
49 |     )}
50 |     {...props}
51 |   />
52 | ))
53 | TabsContent.displayName = TabsPrimitive.Content.displayName
54 | 
55 | export { Tabs, TabsList, TabsTrigger, TabsContent }
56 | 


--------------------------------------------------------------------------------
/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLParagraphElement,
34 |   React.HTMLAttributes<HTMLHeadingElement>
35 | >(({ className, ...props }, ref) => (
36 |   <h3
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <p
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{ts,tsx}',
 6 |     './components/**/*.{ts,tsx}',
 7 |     './app/**/*.{ts,tsx}',
 8 |     './src/**/*.{ts,tsx}',
 9 | 	],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }


--------------------------------------------------------------------------------
/components/navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "@/components/ui/button";
 2 | import Image from "next/image";
 3 | import Link from "next/link";
 4 | import {BsGithub} from 'react-icons/bs';
 5 | import {GrMenu} from 'react-icons/gr';
 6 | 
 7 | import {
 8 |     Sheet,
 9 |     SheetClose,
10 |     SheetContent,
11 |     SheetDescription,
12 |     SheetTitle,
13 |     SheetHeader,
14 |     SheetTrigger,
15 |     SheetFooter
16 | } from "@/components/ui/sheet"
17 | import { ModeToggle } from "@/components/mode-toggle";
18 | 
19 | const NavBar = () => {
20 |     return ( 
21 |     <nav className="w-full backdrop-blur-lg bg-white bg-opacity-30 z-50 fixed h-16 flex justify-between items-center py-10 px-4 md:px-8 lg:px-12 xl:px-16 2xl:px-24">
22 |     <Link href="https://pranavrajveer.com/" target="_blank">
23 |     <Image 
24 |     alt="logo"
25 |     src="/logo.svg"
26 |     width={50}
27 |     height={100}
28 |     className=" cursor-pointer mt-2"
29 |     />
30 |     </Link>
31 |     <div className="p-6 mt-2 ml-16 gap-4 md:gap-4 lg:gap-6 hidden md:flex items-start justify-center">
32 |         <Button variant={"ghost"} className="font-semibold text-md cursor-pointer hover:bg-slate-300 hover:text-black">
33 |         <Link href="/">Home</Link>
34 |         </Button>
35 |         <Button variant={"ghost"} className="font-semibold text-md cursor-pointer hover:bg-slate-300 hover:text-black">
36 |         <Link href="https://github.com/Neon-20/FileMagnet-File-Converter#filemagnet" target="_blank">About</Link>
37 |         </Button>
38 |         <Button variant={"ghost"} className="font-semibold text-md cursor-pointer hover:bg-slate-300 hover:text-black">
39 |         <Link href="/setup">Setup Locally</Link>
40 |         </Button>
41 |         <Button variant={"ghost"} className="font-semibold text-md cursor-pointer hover:bg-slate-300 hover:text-black">
42 |         <Link href={"https://tally.so/r/woRAPV"} target="_blank">Contact Me</Link>
43 |         </Button>
44 |     </div>
45 |     <Link href="https://github.com/Neon-20/FileMagnet-File-Converter" target="_blank">
46 |     <Button variant={"default"} size={"default"}
47 |     className="rounded-md bg-lime-400 hover:bg-sky-400 text-black w-fit gap-2 items-center hidden md:flex">
48 |     <span> Github Repo </span>
49 |     <span className="text-xl">
50 |         <BsGithub/>
51 |     </span>
52 |     </Button>
53 |     </Link>
54 |     {/* Mobile Sidebar Using sheet shadcn */}
55 |     <Sheet>
56 |         <SheetTrigger className="block md:hidden p-6">
57 |         <span className="text-2xl">
58 |         <GrMenu/>
59 |         </span>
60 |         </SheetTrigger>
61 |         <SheetContent>
62 |         <SheetHeader>
63 |         <SheetDescription>
64 |         <div className="w-full space-y-6">
65 |         <Link href={"/"}>
66 |         <Button variant={"link"} className="font-semibold text-md w-full">
67 |         Home
68 |         </Button>
69 |         </Link>
70 |         <Link href={"https://github.com/Neon-20/FileMagnet-File-Converter#filemagnet"} target="_blank">
71 |         <Button variant={"link"} className="font-semibold text-md w-full">
72 |         About
73 |         </Button>
74 |         </Link>
75 |         <Link href={"https://tally.so/r/woRAPV"} target="_blank">
76 |         <Button variant={"link"} className="font-semibold text-md w-full">
77 |         Contact Me
78 |         </Button>
79 |         </Link>
80 |         </div>
81 |         </SheetDescription>
82 |         </SheetHeader>
83 |         </SheetContent>
84 |     </Sheet>
85 |     </nav>
86 |     );
87 | }
88 | 
89 | 
90 | export default NavBar;


--------------------------------------------------------------------------------
/components/code.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Code(){
 4 |     return(
 5 |     <div>
 6 |     <div className="bg-black text-white p-6 rounded-lg w-full max-w-lg font-mono items-center justify-center ml-52 space-y-4 mt-16 border-2 border-sky-500">
 7 |     <div className="flex justify-between items-center">
 8 |     <div className="flex space-x-2 text-red-500">
 9 |     <div className="w-3 h-3 rounded-full bg-red-500" />
10 |     <div className="w-3 h-3 rounded-full bg-yellow-500" />
11 |     <div className="w-3 h-3 rounded-full bg-green-500" />
12 |     </div>
13 |     <p className="text-sm">bash</p>
14 |     </div>
15 |     <div className="mt-4">
16 |     <p className="text-white">Clone the repo</p>
17 |     <p className="text-green-400">$ https://github.com/your-username/FileMagnet-File-Converter.git</p>
18 |     </div>
19 |     </div>
20 |     <div className="bg-black border-2 border-sky-500 text-white p-6 rounded-lg w-full max-w-lg font-mono items-center justify-center ml-52 space-y-4 mt-16">
21 |     <div className="flex justify-between items-center">
22 |     <div className="flex space-x-2 text-red-500">
23 |     <div className="w-3 h-3 rounded-full bg-red-500" />
24 |     <div className="w-3 h-3 rounded-full bg-yellow-500" />
25 |     <div className="w-3 h-3 rounded-full bg-green-500" />
26 |     </div>
27 |     <p className="text-sm">bash</p>
28 |     </div>
29 |     <div className="mt-4">
30 |     <p className="text-white">Install the packages</p>
31 |     <p className="text-green-400">$ npm i</p> <p>or</p>
32 |     <p className="text-green-400">$ pnpm i</p>
33 |     </div>
34 |     </div>
35 |     <div className="bg-black border-2 border-sky-500 text-white p-6 rounded-lg w-full max-w-lg font-mono items-center justify-center ml-52 space-y-4 mt-16">
36 |     <div className="flex justify-between items-center">
37 |     <div className="flex space-x-2 text-red-500">
38 |     <div className="w-3 h-3 rounded-full bg-red-500" />
39 |     <div className="w-3 h-3 rounded-full bg-yellow-500" />
40 |     <div className="w-3 h-3 rounded-full bg-green-500" />
41 |     </div>
42 |     <p className="text-sm">bash</p>
43 |     </div>
44 |     <div className="mt-4">
45 |     <p className="text-white">Run the Application</p>
46 |     <p className="text-green-400">$ npm run dev</p> <p>or</p>
47 |     <p className="text-green-400">$ pnpm dev</p>
48 |     </div>🎉
49 |     </div>
50 |     <p className="items-center space-y-6 justify-center space-x-20 p-6 text-red-500 text-2xl font-medium mt-10 flex">Boom, your Project is setup successfully and you are ready to launch 🎉</p>
51 | <footer className=" bg-white rounded-lg mt-20 dark:bg-gray-900 m-4 w-full">
52 |     <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
53 |         <div className="sm:flex sm:items-center sm:justify-between">
54 |             <a href="https://flowbite.com/" className="flex items-center mb-4 sm:mb-0">
55 |                 <Image src="./logo.svg" className="h-8 mr-4" alt="FileMagnet Logo" width={40} height={40}/>
56 |                 <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white left-full">FileMagnet🚀</span>
57 |             </a>
58 |             <p className="text-center text-teal-500 text-lg font-medium">Made with ❤️ by Pranav</p>
59 |             <ul className="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
60 |                 <li>
61 |                     <a href="https://github.com/Neon-20/FileMagnet-File-Converter#filemagnet" target="_blank" className="mr-4 hover:underline md:mr-6 ">About</a>
62 |                 </li>
63 |                 <li>
64 |                     <a href="https://tally.so/r/woRAPV" target="_blank" className="mr-4 hover:underline md:mr-6">Contact</a>
65 |                 </li>
66 |                 <li>
67 |                     <a href="https://www.linkedin.com/in/pranav-rajveer/" className="mr-4 hover:underline md:mr-6" target="_blank">Linkedin</a>
68 |                 </li>
69 |                 <li>
70 |                     <a href="https://github.com/Neon-20/FileMagnet-File-Converter" className="hover:underline" target="_blank">Github</a>
71 |                 </li>
72 |             </ul>
73 |             
74 |         </div>
75 |         <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
76 |         <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400 mr-8">© 2023 <a href="https://google.com/" className="hover:underline">FileMagnet</a>. All Rights Reserved.</span>
77 |     </div>
78 | </footer>
79 |       </div>
80 | 
81 |     )
82 | }


--------------------------------------------------------------------------------
/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
  1 | // Inspired by react-hot-toast library
  2 | import * as React from "react"
  3 | 
  4 | import type {
  5 |   ToastActionElement,
  6 |   ToastProps,
  7 | } from "@/components/ui/toast"
  8 | 
  9 | const TOAST_LIMIT = 1
 10 | const TOAST_REMOVE_DELAY = 1000000
 11 | 
 12 | type ToasterToast = ToastProps & {
 13 |   id: string
 14 |   title?: React.ReactNode
 15 |   description?: React.ReactNode
 16 |   action?: ToastActionElement
 17 | }
 18 | 
 19 | const actionTypes = {
 20 |   ADD_TOAST: "ADD_TOAST",
 21 |   UPDATE_TOAST: "UPDATE_TOAST",
 22 |   DISMISS_TOAST: "DISMISS_TOAST",
 23 |   REMOVE_TOAST: "REMOVE_TOAST",
 24 | } as const
 25 | 
 26 | let count = 0
 27 | 
 28 | function genId() {
 29 |   count = (count + 1) % Number.MAX_VALUE
 30 |   return count.toString()
 31 | }
 32 | 
 33 | type ActionType = typeof actionTypes
 34 | 
 35 | type Action =
 36 |   | {
 37 |       type: ActionType["ADD_TOAST"]
 38 |       toast: ToasterToast
 39 |     }
 40 |   | {
 41 |       type: ActionType["UPDATE_TOAST"]
 42 |       toast: Partial<ToasterToast>
 43 |     }
 44 |   | {
 45 |       type: ActionType["DISMISS_TOAST"]
 46 |       toastId?: ToasterToast["id"]
 47 |     }
 48 |   | {
 49 |       type: ActionType["REMOVE_TOAST"]
 50 |       toastId?: ToasterToast["id"]
 51 |     }
 52 | 
 53 | interface State {
 54 |   toasts: ToasterToast[]
 55 | }
 56 | 
 57 | const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 58 | 
 59 | const addToRemoveQueue = (toastId: string) => {
 60 |   if (toastTimeouts.has(toastId)) {
 61 |     return
 62 |   }
 63 | 
 64 |   const timeout = setTimeout(() => {
 65 |     toastTimeouts.delete(toastId)
 66 |     dispatch({
 67 |       type: "REMOVE_TOAST",
 68 |       toastId: toastId,
 69 |     })
 70 |   }, TOAST_REMOVE_DELAY)
 71 | 
 72 |   toastTimeouts.set(toastId, timeout)
 73 | }
 74 | 
 75 | export const reducer = (state: State, action: Action): State => {
 76 |   switch (action.type) {
 77 |     case "ADD_TOAST":
 78 |       return {
 79 |         ...state,
 80 |         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
 81 |       }
 82 | 
 83 |     case "UPDATE_TOAST":
 84 |       return {
 85 |         ...state,
 86 |         toasts: state.toasts.map((t) =>
 87 |           t.id === action.toast.id ? { ...t, ...action.toast } : t
 88 |         ),
 89 |       }
 90 | 
 91 |     case "DISMISS_TOAST": {
 92 |       const { toastId } = action
 93 | 
 94 |       // ! Side effects ! - This could be extracted into a dismissToast() action,
 95 |       // but I'll keep it here for simplicity
 96 |       if (toastId) {
 97 |         addToRemoveQueue(toastId)
 98 |       } else {
 99 |         state.toasts.forEach((toast) => {
100 |           addToRemoveQueue(toast.id)
101 |         })
102 |       }
103 | 
104 |       return {
105 |         ...state,
106 |         toasts: state.toasts.map((t) =>
107 |           t.id === toastId || toastId === undefined
108 |             ? {
109 |                 ...t,
110 |                 open: false,
111 |               }
112 |             : t
113 |         ),
114 |       }
115 |     }
116 |     case "REMOVE_TOAST":
117 |       if (action.toastId === undefined) {
118 |         return {
119 |           ...state,
120 |           toasts: [],
121 |         }
122 |       }
123 |       return {
124 |         ...state,
125 |         toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 |       }
127 |   }
128 | }
129 | 
130 | const listeners: Array<(state: State) => void> = []
131 | 
132 | let memoryState: State = { toasts: [] }
133 | 
134 | function dispatch(action: Action) {
135 |   memoryState = reducer(memoryState, action)
136 |   listeners.forEach((listener) => {
137 |     listener(memoryState)
138 |   })
139 | }
140 | 
141 | type Toast = Omit<ToasterToast, "id">
142 | 
143 | function toast({ ...props }: Toast) {
144 |   const id = genId()
145 | 
146 |   const update = (props: ToasterToast) =>
147 |     dispatch({
148 |       type: "UPDATE_TOAST",
149 |       toast: { ...props, id },
150 |     })
151 |   const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 | 
153 |   dispatch({
154 |     type: "ADD_TOAST",
155 |     toast: {
156 |       ...props,
157 |       id,
158 |       open: true,
159 |       onOpenChange: (open) => {
160 |         if (!open) dismiss()
161 |       },
162 |     },
163 |   })
164 | 
165 |   return {
166 |     id: id,
167 |     dismiss,
168 |     update,
169 |   }
170 | }
171 | 
172 | function useToast() {
173 |   const [state, setState] = React.useState<State>(memoryState)
174 | 
175 |   React.useEffect(() => {
176 |     listeners.push(setState)
177 |     return () => {
178 |       const index = listeners.indexOf(setState)
179 |       if (index > -1) {
180 |         listeners.splice(index, 1)
181 |       }
182 |     }
183 |   }, [state])
184 | 
185 |   return {
186 |     ...state,
187 |     toast,
188 |     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 |   }
190 | }
191 | 
192 | export { useToast, toast }
193 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SelectPrimitive from "@radix-ui/react-select"
  5 | import { Check, ChevronDown } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const Select = SelectPrimitive.Root
 10 | 
 11 | const SelectGroup = SelectPrimitive.Group
 12 | 
 13 | const SelectValue = SelectPrimitive.Value
 14 | 
 15 | const SelectTrigger = React.forwardRef<
 16 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 17 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 18 | >(({ className, children, ...props }, ref) => (
 19 |   <SelectPrimitive.Trigger
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   >
 27 |     {children}
 28 |     <SelectPrimitive.Icon asChild>
 29 |       <ChevronDown className="h-4 w-4 opacity-50" />
 30 |     </SelectPrimitive.Icon>
 31 |   </SelectPrimitive.Trigger>
 32 | ))
 33 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 34 | 
 35 | const SelectContent = React.forwardRef<
 36 |   React.ElementRef<typeof SelectPrimitive.Content>,
 37 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 38 | >(({ className, children, position = "popper", ...props }, ref) => (
 39 |   <SelectPrimitive.Portal>
 40 |     <SelectPrimitive.Content
 41 |       ref={ref}
 42 |       className={cn(
 43 |         "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
 44 |         position === "popper" &&
 45 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 46 |         className
 47 |       )}
 48 |       position={position}
 49 |       {...props}
 50 |     >
 51 |       <SelectPrimitive.Viewport
 52 |         className={cn(
 53 |           "p-1",
 54 |           position === "popper" &&
 55 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 56 |         )}
 57 |       >
 58 |         {children}
 59 |       </SelectPrimitive.Viewport>
 60 |     </SelectPrimitive.Content>
 61 |   </SelectPrimitive.Portal>
 62 | ))
 63 | SelectContent.displayName = SelectPrimitive.Content.displayName
 64 | 
 65 | const SelectLabel = React.forwardRef<
 66 |   React.ElementRef<typeof SelectPrimitive.Label>,
 67 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 68 | >(({ className, ...props }, ref) => (
 69 |   <SelectPrimitive.Label
 70 |     ref={ref}
 71 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
 72 |     {...props}
 73 |   />
 74 | ))
 75 | SelectLabel.displayName = SelectPrimitive.Label.displayName
 76 | 
 77 | const SelectItem = React.forwardRef<
 78 |   React.ElementRef<typeof SelectPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 80 | >(({ className, children, ...props }, ref) => (
 81 |   <SelectPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       className
 86 |     )}
 87 |     {...props}
 88 |   >
 89 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
 90 |       <SelectPrimitive.ItemIndicator>
 91 |         <Check className="h-4 w-4" />
 92 |       </SelectPrimitive.ItemIndicator>
 93 |     </span>
 94 | 
 95 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
 96 |   </SelectPrimitive.Item>
 97 | ))
 98 | SelectItem.displayName = SelectPrimitive.Item.displayName
 99 | 
100 | const SelectSeparator = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Separator>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Separator
105 |     ref={ref}
106 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
111 | 
112 | export {
113 |   Select,
114 |   SelectGroup,
115 |   SelectValue,
116 |   SelectTrigger,
117 |   SelectContent,
118 |   SelectLabel,
119 |   SelectItem,
120 |   SelectSeparator,
121 | }
122 | 


--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = ({
 17 |   className,
 18 |   ...props
 19 | }: SheetPrimitive.DialogPortalProps) => (
 20 |   <SheetPrimitive.Portal className={cn(className)} {...props} />
 21 | )
 22 | SheetPortal.displayName = SheetPrimitive.Portal.displayName
 23 | 
 24 | const SheetOverlay = React.forwardRef<
 25 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 26 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 27 | >(({ className, ...props }, ref) => (
 28 |   <SheetPrimitive.Overlay
 29 |     className={cn(
 30 |       "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 31 |       className
 32 |     )}
 33 |     {...props}
 34 |     ref={ref}
 35 |   />
 36 | ))
 37 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 38 | 
 39 | const sheetVariants = cva(
 40 |   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 41 |   {
 42 |     variants: {
 43 |       side: {
 44 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 45 |         bottom:
 46 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 47 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 48 |         right:
 49 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 50 |       },
 51 |     },
 52 |     defaultVariants: {
 53 |       side: "right",
 54 |     },
 55 |   }
 56 | )
 57 | 
 58 | interface SheetContentProps
 59 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 60 |     VariantProps<typeof sheetVariants> {}
 61 | 
 62 | const SheetContent = React.forwardRef<
 63 |   React.ElementRef<typeof SheetPrimitive.Content>,
 64 |   SheetContentProps
 65 | >(({ side = "right", className, children, ...props }, ref) => (
 66 |   <SheetPortal>
 67 |     <SheetOverlay />
 68 |     <SheetPrimitive.Content
 69 |       ref={ref}
 70 |       className={cn(sheetVariants({ side }), className)}
 71 |       {...props}
 72 |     >
 73 |       {children}
 74 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 75 |         <X className="h-4 w-4" />
 76 |         <span className="sr-only">Close</span>
 77 |       </SheetPrimitive.Close>
 78 |     </SheetPrimitive.Content>
 79 |   </SheetPortal>
 80 | ))
 81 | SheetContent.displayName = SheetPrimitive.Content.displayName
 82 | 
 83 | const SheetHeader = ({
 84 |   className,
 85 |   ...props
 86 | }: React.HTMLAttributes<HTMLDivElement>) => (
 87 |   <div
 88 |     className={cn(
 89 |       "flex flex-col space-y-2 text-center sm:text-left",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | )
 95 | SheetHeader.displayName = "SheetHeader"
 96 | 
 97 | const SheetFooter = ({
 98 |   className,
 99 |   ...props
100 | }: React.HTMLAttributes<HTMLDivElement>) => (
101 |   <div
102 |     className={cn(
103 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
104 |       className
105 |     )}
106 |     {...props}
107 |   />
108 | )
109 | SheetFooter.displayName = "SheetFooter"
110 | 
111 | const SheetTitle = React.forwardRef<
112 |   React.ElementRef<typeof SheetPrimitive.Title>,
113 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
114 | >(({ className, ...props }, ref) => (
115 |   <SheetPrimitive.Title
116 |     ref={ref}
117 |     className={cn("text-lg font-semibold text-foreground", className)}
118 |     {...props}
119 |   />
120 | ))
121 | SheetTitle.displayName = SheetPrimitive.Title.displayName
122 | 
123 | const SheetDescription = React.forwardRef<
124 |   React.ElementRef<typeof SheetPrimitive.Description>,
125 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
126 | >(({ className, ...props }, ref) => (
127 |   <SheetPrimitive.Description
128 |     ref={ref}
129 |     className={cn("text-sm text-muted-foreground", className)}
130 |     {...props}
131 |   />
132 | ))
133 | SheetDescription.displayName = SheetPrimitive.Description.displayName
134 | 
135 | export {
136 |   Sheet,
137 |   SheetTrigger,
138 |   SheetClose,
139 |   SheetContent,
140 |   SheetHeader,
141 |   SheetFooter,
142 |   SheetTitle,
143 |   SheetDescription,
144 | }
145 | 


--------------------------------------------------------------------------------
/components/ui/toast.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ToastPrimitives from "@radix-ui/react-toast"
  3 | import { cva, type VariantProps } from "class-variance-authority"
  4 | import { X } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | const ToastProvider = ToastPrimitives.Provider
  9 | 
 10 | const ToastViewport = React.forwardRef<
 11 |   React.ElementRef<typeof ToastPrimitives.Viewport>,
 12 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 13 | >(({ className, ...props }, ref) => (
 14 |   <ToastPrimitives.Viewport
 15 |     ref={ref}
 16 |     className={cn(
 17 |       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 18 |       className
 19 |     )}
 20 |     {...props}
 21 |   />
 22 | ))
 23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 24 | 
 25 | const toastVariants = cva(
 26 |   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
 27 |   {
 28 |     variants: {
 29 |       variant: {
 30 |         default: "border bg-background text-foreground",
 31 |         destructive:
 32 |           "destructive group border-destructive bg-destructive text-destructive-foreground",
 33 |       },
 34 |     },
 35 |     defaultVariants: {
 36 |       variant: "default",
 37 |     },
 38 |   }
 39 | )
 40 | 
 41 | const Toast = React.forwardRef<
 42 |   React.ElementRef<typeof ToastPrimitives.Root>,
 43 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
 44 |     VariantProps<typeof toastVariants>
 45 | >(({ className, variant, ...props }, ref) => {
 46 |   return (
 47 |     <ToastPrimitives.Root
 48 |       ref={ref}
 49 |       className={cn(toastVariants({ variant }), className)}
 50 |       {...props}
 51 |     />
 52 |   )
 53 | })
 54 | Toast.displayName = ToastPrimitives.Root.displayName
 55 | 
 56 | const ToastAction = React.forwardRef<
 57 |   React.ElementRef<typeof ToastPrimitives.Action>,
 58 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 59 | >(({ className, ...props }, ref) => (
 60 |   <ToastPrimitives.Action
 61 |     ref={ref}
 62 |     className={cn(
 63 |       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
 64 |       className
 65 |     )}
 66 |     {...props}
 67 |   />
 68 | ))
 69 | ToastAction.displayName = ToastPrimitives.Action.displayName
 70 | 
 71 | const ToastClose = React.forwardRef<
 72 |   React.ElementRef<typeof ToastPrimitives.Close>,
 73 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 74 | >(({ className, ...props }, ref) => (
 75 |   <ToastPrimitives.Close
 76 |     ref={ref}
 77 |     className={cn(
 78 |       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
 79 |       className
 80 |     )}
 81 |     toast-close=""
 82 |     {...props}
 83 |   >
 84 |     <X className="h-4 w-4" />
 85 |   </ToastPrimitives.Close>
 86 | ))
 87 | ToastClose.displayName = ToastPrimitives.Close.displayName
 88 | 
 89 | const ToastTitle = React.forwardRef<
 90 |   React.ElementRef<typeof ToastPrimitives.Title>,
 91 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 92 | >(({ className, ...props }, ref) => (
 93 |   <ToastPrimitives.Title
 94 |     ref={ref}
 95 |     className={cn("text-sm font-semibold", className)}
 96 |     {...props}
 97 |   />
 98 | ))
 99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 | 
101 | const ToastDescription = React.forwardRef<
102 |   React.ElementRef<typeof ToastPrimitives.Description>,
103 |   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
104 | >(({ className, ...props }, ref) => (
105 |   <ToastPrimitives.Description
106 |     ref={ref}
107 |     className={cn("text-sm opacity-90", className)}
108 |     {...props}
109 |   />
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 | 
113 | type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
114 | 
115 | type ToastActionElement = React.ReactElement<typeof ToastAction>
116 | 
117 | export {
118 |   type ToastProps,
119 |   type ToastActionElement,
120 |   ToastProvider,
121 |   ToastViewport,
122 |   Toast,
123 |   ToastTitle,
124 |   ToastDescription,
125 |   ToastClose,
126 |   ToastAction,
127 | }
128 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { Check, ChevronRight, Circle } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | const DropdownMenu = DropdownMenuPrimitive.Root
 10 | 
 11 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 12 | 
 13 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 14 | 
 15 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 16 | 
 17 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 18 | 
 19 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 20 | 
 21 | const DropdownMenuSubTrigger = React.forwardRef<
 22 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 23 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 24 |     inset?: boolean
 25 |   }
 26 | >(({ className, inset, children, ...props }, ref) => (
 27 |   <DropdownMenuPrimitive.SubTrigger
 28 |     ref={ref}
 29 |     className={cn(
 30 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 31 |       inset && "pl-8",
 32 |       className
 33 |     )}
 34 |     {...props}
 35 |   >
 36 |     {children}
 37 |     <ChevronRight className="ml-auto h-4 w-4" />
 38 |   </DropdownMenuPrimitive.SubTrigger>
 39 | ))
 40 | DropdownMenuSubTrigger.displayName =
 41 |   DropdownMenuPrimitive.SubTrigger.displayName
 42 | 
 43 | const DropdownMenuSubContent = React.forwardRef<
 44 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 45 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 46 | >(({ className, ...props }, ref) => (
 47 |   <DropdownMenuPrimitive.SubContent
 48 |     ref={ref}
 49 |     className={cn(
 50 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
 51 |       className
 52 |     )}
 53 |     {...props}
 54 |   />
 55 | ))
 56 | DropdownMenuSubContent.displayName =
 57 |   DropdownMenuPrimitive.SubContent.displayName
 58 | 
 59 | const DropdownMenuContent = React.forwardRef<
 60 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 61 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 62 | >(({ className, sideOffset = 4, ...props }, ref) => (
 63 |   <DropdownMenuPrimitive.Portal>
 64 |     <DropdownMenuPrimitive.Content
 65 |       ref={ref}
 66 |       sideOffset={sideOffset}
 67 |       className={cn(
 68 |         "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",
 69 |         className
 70 |       )}
 71 |       {...props}
 72 |     />
 73 |   </DropdownMenuPrimitive.Portal>
 74 | ))
 75 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 76 | 
 77 | const DropdownMenuItem = React.forwardRef<
 78 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 79 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 80 |     inset?: boolean
 81 |   }
 82 | >(({ className, inset, ...props }, ref) => (
 83 |   <DropdownMenuPrimitive.Item
 84 |     ref={ref}
 85 |     className={cn(
 86 |       "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",
 87 |       inset && "pl-8",
 88 |       className
 89 |     )}
 90 |     {...props}
 91 |   />
 92 | ))
 93 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 94 | 
 95 | const DropdownMenuCheckboxItem = React.forwardRef<
 96 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 97 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 98 | >(({ className, children, checked, ...props }, ref) => (
 99 |   <DropdownMenuPrimitive.CheckboxItem
100 |     ref={ref}
101 |     className={cn(
102 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
103 |       className
104 |     )}
105 |     checked={checked}
106 |     {...props}
107 |   >
108 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
109 |       <DropdownMenuPrimitive.ItemIndicator>
110 |         <Check className="h-4 w-4" />
111 |       </DropdownMenuPrimitive.ItemIndicator>
112 |     </span>
113 |     {children}
114 |   </DropdownMenuPrimitive.CheckboxItem>
115 | ))
116 | DropdownMenuCheckboxItem.displayName =
117 |   DropdownMenuPrimitive.CheckboxItem.displayName
118 | 
119 | const DropdownMenuRadioItem = React.forwardRef<
120 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
121 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
122 | >(({ className, children, ...props }, ref) => (
123 |   <DropdownMenuPrimitive.RadioItem
124 |     ref={ref}
125 |     className={cn(
126 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
127 |       className
128 |     )}
129 |     {...props}
130 |   >
131 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
132 |       <DropdownMenuPrimitive.ItemIndicator>
133 |         <Circle className="h-2 w-2 fill-current" />
134 |       </DropdownMenuPrimitive.ItemIndicator>
135 |     </span>
136 |     {children}
137 |   </DropdownMenuPrimitive.RadioItem>
138 | ))
139 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
140 | 
141 | const DropdownMenuLabel = React.forwardRef<
142 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
143 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
144 |     inset?: boolean
145 |   }
146 | >(({ className, inset, ...props }, ref) => (
147 |   <DropdownMenuPrimitive.Label
148 |     ref={ref}
149 |     className={cn(
150 |       "px-2 py-1.5 text-sm font-semibold",
151 |       inset && "pl-8",
152 |       className
153 |     )}
154 |     {...props}
155 |   />
156 | ))
157 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
158 | 
159 | const DropdownMenuSeparator = React.forwardRef<
160 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
161 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
162 | >(({ className, ...props }, ref) => (
163 |   <DropdownMenuPrimitive.Separator
164 |     ref={ref}
165 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
166 |     {...props}
167 |   />
168 | ))
169 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
170 | 
171 | const DropdownMenuShortcut = ({
172 |   className,
173 |   ...props
174 | }: React.HTMLAttributes<HTMLSpanElement>) => {
175 |   return (
176 |     <span
177 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
178 |       {...props}
179 |     />
180 |   )
181 | }
182 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
183 | 
184 | export {
185 |   DropdownMenu,
186 |   DropdownMenuTrigger,
187 |   DropdownMenuContent,
188 |   DropdownMenuItem,
189 |   DropdownMenuCheckboxItem,
190 |   DropdownMenuRadioItem,
191 |   DropdownMenuLabel,
192 |   DropdownMenuSeparator,
193 |   DropdownMenuShortcut,
194 |   DropdownMenuGroup,
195 |   DropdownMenuPortal,
196 |   DropdownMenuSub,
197 |   DropdownMenuSubContent,
198 |   DropdownMenuSubTrigger,
199 |   DropdownMenuRadioGroup,
200 | }
201 | 


--------------------------------------------------------------------------------
/components/dropzone.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | // imports
  4 | import { FiUploadCloud } from 'react-icons/fi';
  5 | import { LuFileSymlink } from 'react-icons/lu';
  6 | import { MdClose } from 'react-icons/md';
  7 | import ReactDropzone from 'react-dropzone';
  8 | import bytesToSize from '@/util/bytes-to-size';
  9 | import fileToIcon from '@/util/file-to-icon';
 10 | import { useState, useEffect, useRef } from 'react';
 11 | import { useToast } from '@/components/ui/use-toast';
 12 | import compressFileName from '@/util/compress-file-name';
 13 | import { Skeleton } from '@/components/ui/skeleton';
 14 | import convertFile from '@/util/convert';
 15 | import { ImSpinner3 } from 'react-icons/im';
 16 | import { MdDone } from 'react-icons/md';
 17 | import { Badge } from '@/components/ui/badge';
 18 | import { HiOutlineDownload } from 'react-icons/hi';
 19 | import { BiError } from 'react-icons/bi';
 20 | import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 21 | import {
 22 | Select,
 23 | SelectContent,
 24 | SelectItem,
 25 | SelectTrigger,
 26 | SelectValue,
 27 | } from './ui/select';
 28 | import { Button } from './ui/button';
 29 | import loadFfmpeg from '@/util/load-ffmpeg';
 30 | import type { Actions } from '@/types';
 31 | import { FFmpeg } from '@ffmpeg/ffmpeg';
 32 | 
 33 | const extensions = {
 34 |   image: [
 35 |     'jpg',
 36 |     'jpeg',
 37 |     'png',
 38 |     'gif',
 39 |     'bmp',
 40 |     'webp',
 41 |     'ico',
 42 |     'tif',
 43 |     'tiff',
 44 |     'svg',
 45 |     'raw',
 46 |     'tga',
 47 |   ],
 48 |   video: [
 49 |     'mp4',
 50 |     'm4v',
 51 |     'mp4v',
 52 |     '3gp',
 53 |     '3g2',
 54 |     'avi',
 55 |     'mov',
 56 |     'wmv',
 57 |     'mkv',
 58 |     'flv',
 59 |     'ogv',
 60 |     'webm',
 61 |     'h264',
 62 |     '264',
 63 |     'hevc',
 64 |     '265',
 65 |   ],
 66 |   audio: ['mp3', 'wav', 'ogg', 'aac', 'wma', 'flac', 'm4a'],
 67 | };
 68 | 
 69 | export default function Dropzone() {
 70 | const { toast } = useToast();
 71 | const [is_hover, setIsHover] = useState<boolean>(false);
 72 | const [actions, setActions] = useState<Actions[]>([]);
 73 | const [is_ready, setIsReady] = useState<boolean>(false);
 74 | const [files, setFiles] = useState<Array<any>>([]);
 75 | const [is_loaded, setIsLoaded] = useState<boolean>(false);
 76 | const [is_converting, setIsConverting] = useState<boolean>(false);
 77 | const [is_done, setIsDone] = useState<boolean>(false);
 78 | const ffmpegRef = useRef<any>(null);
 79 | const accepted_files = {
 80 |     'image/*': [
 81 |     '.jpg',
 82 |     '.jpeg',
 83 |     '.png',
 84 |     '.gif',
 85 |     '.bmp',
 86 |     '.webp',
 87 |     '.ico',
 88 |     '.tif',
 89 |     '.tiff',
 90 |     '.raw',
 91 |     '.tga',
 92 |     ],
 93 |     'audio/*': [],
 94 |     'video/*': [],
 95 | };
 96 | 
 97 |   // functions
 98 | const reset = () => {
 99 |     setIsDone(false);
100 |     setActions([]);
101 |     setFiles([]);
102 |     setIsReady(false);
103 |     setIsConverting(false);
104 | };
105 | const downloadAll = (): void => {
106 |     for (let action of actions) {
107 |     !action.is_error && download(action);
108 |     }
109 | };
110 | const download = (action: Actions) => {
111 |     const a = document.createElement('a');
112 |     a.style.display = 'none';
113 |     a.href = action.url;
114 |     a.download = action.output;
115 | 
116 |     document.body.appendChild(a);
117 |     a.click();
118 | 
119 |     // Clean up after download
120 |     URL.revokeObjectURL(action.url);
121 |     document.body.removeChild(a);
122 | };
123 | const convert = async (): Promise<any> => {
124 |     let tmp_actions = actions.map((elt) => ({
125 |     ...elt,
126 |     is_converting: true,
127 |     }));
128 |     setActions(tmp_actions);
129 |     setIsConverting(true);
130 |     for (let action of tmp_actions) {
131 |       try {
132 |         const { url, output } = await convertFile(ffmpegRef.current, action);
133 |         tmp_actions = tmp_actions.map((elt) =>
134 |           elt === action
135 |             ? {
136 |                 ...elt,
137 |                 is_converted: true,
138 |                 is_converting: false,
139 |                 url,
140 |                 output,
141 |               }
142 |             : elt,
143 |         );
144 |         setActions(tmp_actions);
145 |       } catch (err) {
146 |         tmp_actions = tmp_actions.map((elt) =>
147 |           elt === action
148 |             ? {
149 |                 ...elt,
150 |                 is_converted: false,
151 |                 is_converting: false,
152 |                 is_error: true,
153 |               }
154 |             : elt,
155 |         );
156 |         setActions(tmp_actions);
157 |       }
158 |     }
159 |     setIsDone(true);
160 |     setIsConverting(false);
161 |   };
162 |   const handleUpload = (data: Array<any>): void => {
163 |     handleExitHover();
164 |     setFiles(data);
165 |     const tmp: Actions[] = [];
166 |     data.forEach((file: any) => {
167 |       const formData = new FormData();
168 |       tmp.push({
169 |         file_name: file.name,
170 |         file_size: file.size,
171 |         from: file.name.slice(((file.name.lastIndexOf('.') - 1) >>> 0) + 2),
172 |         to: null,
173 |         file_type: file.type,
174 |         file,
175 |         is_converted: false,
176 |         is_converting: false,
177 |         is_error: false,
178 |       });
179 |     });
180 |     setActions(tmp);
181 |   };
182 |   const handleHover = (): void => setIsHover(true);
183 |   const handleExitHover = (): void => setIsHover(false);
184 | 
185 |   const updateAction = (file_name: String, to: String) => {
186 |     setActions(
187 |       actions.map((action): Actions => {
188 |         if (action.file_name === file_name) {
189 |           console.log('FOUND');
190 |           return {
191 |             ...action,
192 |             to,
193 |           };
194 |         }
195 | 
196 |         return action;
197 |       }),
198 |     );
199 |   };
200 |   const checkIsReady = (): void => {
201 |     let tmp_is_ready = true;
202 |     actions.forEach((action: Actions) => {
203 |       if (!action.to) tmp_is_ready = false;
204 |     });
205 |     setIsReady(tmp_is_ready);
206 |   };
207 |   const deleteAction = (action: Actions): void => {
208 |     setActions(actions.filter((elt) => elt !== action));
209 |     setFiles(files.filter((elt) => elt.name !== action.file_name));
210 |   };
211 |   useEffect(() => {
212 |     if (!actions.length) {
213 |       setIsDone(false);
214 |       setFiles([]);
215 |       setIsReady(false);
216 |       setIsConverting(false);
217 |     } else checkIsReady();
218 |   }, [actions]);
219 |   useEffect(() => {
220 |     load();
221 |   }, []);
222 |   const load = async () => {
223 |     const ffmpeg_response: FFmpeg = await loadFfmpeg();
224 |     ffmpegRef.current = ffmpeg_response;
225 |     setIsLoaded(true);
226 |   };
227 | 
228 | 
229 |   // returns
230 |   if (actions.length) {
231 |     return (
232 |       <div className="space-y-6 relative -inset-x-32">
233 |         {actions.map((action: Actions, i: any) => (
234 |           <div
235 |             key={i}
236 |             className="w-full py-4 space-y-2 lg:py-0 relative cursor-pointer rounded-xl border h-fit lg:h-20 px-4 lg:px-10 flex flex-wrap lg:flex-nowrap items-center justify-between"
237 |           >
238 |             {!is_loaded && (
239 |               <Skeleton className="h-full w-full -ml-10 cursor-progress absolute rounded-xl" />
240 |             )}
241 |             <div className="flex gap-4 items-center">
242 |               <span className="text-2xl text-orange-600">
243 |                 {fileToIcon(action.file_type)}
244 |               </span>
245 |               <div className="flex items-center gap-1 w-96">
246 |                 <span className="text-md font-medium overflow-x-hidden">
247 |                   {compressFileName(action.file_name)}
248 |                 </span>
249 |                 <span className="text-gray-400 text-sm">
250 |                   ({bytesToSize(action.file_size)})
251 |                 </span>
252 |               </div>
253 |             </div>
254 | 
255 |             {action.is_error ? (
256 |               <Badge variant="destructive" className="flex gap-2">
257 |                 <span>Error Converting File</span>
258 |                 <BiError />
259 |               </Badge>
260 |             ) : action.is_converted ? (
261 |               <Badge variant="default" className="flex gap-2 bg-green-500">
262 |                 <span>Done</span>
263 |                 <MdDone />
264 |               </Badge>
265 |             ) : action.is_converting ? (
266 |               <Badge variant="default" className="flex gap-2">
267 |                 <span>Converting</span>
268 |                 <span className="animate-spin">
269 |                   <ImSpinner3 />
270 |                 </span>
271 |               </Badge>
272 |             ) : (
273 |               <div className="text-gray-400 text-md flex items-center gap-4">
274 |                 <span>Convert to</span>
275 |                 <Select
276 |                   onValueChange={(value) =>
277 |                     updateAction(action.file_name, value)
278 |                   }
279 |                 >
280 |                   <SelectTrigger className="w-32 outline-none focus:outline-none focus:ring-0 text-center text-gray-600 bg-gray-50 text-sm font-medium">
281 |                     <SelectValue placeholder="Select Type" />
282 |                   </SelectTrigger>
283 |                   <SelectContent className="h-fit">
284 |                     {action.file_type.includes('image') && (
285 |                       <div className="grid grid-cols-2 gap-2 w-fit">
286 |                         {extensions.image.map((elt, i) => (
287 |                           <div key={i} className="col-span-1 text-center">
288 |                             <SelectItem value={elt} className="mx-auto">
289 |                               {elt}
290 |                             </SelectItem>
291 |                           </div>
292 |                         ))}
293 |                       </div>
294 |                     )}
295 |                     {action.file_type.includes('video') && (
296 |                       <Tabs defaultValue="video" className="w-full">
297 |                         <TabsList className="w-full">
298 |                           <TabsTrigger value="video" className="w-full">
299 |                             Video
300 |                           </TabsTrigger>
301 |                           <TabsTrigger value="audio" className="w-full">
302 |                             Audio
303 |                           </TabsTrigger>
304 |                         </TabsList>
305 |                         <TabsContent value="video">
306 |                           <div className="grid grid-cols-3 gap-2 w-fit">
307 |                             {extensions.video.map((elt, i) => (
308 |                               <div key={i} className="col-span-1 text-center">
309 |                                 <SelectItem value={elt} className="mx-auto">
310 |                                   {elt}
311 |                                 </SelectItem>
312 |                               </div>
313 |                             ))}
314 |                           </div>
315 |                         </TabsContent>
316 |                         <TabsContent value="audio">
317 |                           <div className="grid grid-cols-3 gap-2 w-fit">
318 |                             {extensions.audio.map((elt, i) => (
319 |                               <div key={i} className="col-span-1 text-center">
320 |                                 <SelectItem value={elt} className="mx-auto">
321 |                                   {elt}
322 |                                 </SelectItem>
323 |                               </div>
324 |                             ))}
325 |                           </div>
326 |                         </TabsContent>
327 |                       </Tabs>
328 |                     )}
329 |                     {action.file_type.includes('audio') && (
330 |                       <div className="grid grid-cols-2 gap-2 w-fit">
331 |                         {extensions.audio.map((elt, i) => (
332 |                           <div key={i} className="col-span-1 text-center">
333 |                             <SelectItem value={elt} className="mx-auto">
334 |                               {elt}
335 |                             </SelectItem>
336 |                           </div>
337 |                         ))}
338 |                       </div>
339 |                     )}
340 |                   </SelectContent>
341 |                 </Select>
342 |               </div>
343 |             )}
344 | 
345 |             {action.is_converted ? (
346 |               <Button variant="outline" onClick={() => download(action)}>
347 |                 Download
348 |               </Button>
349 |             ) : (
350 |               <span
351 |                 onClick={() => deleteAction(action)}
352 |                 className="cursor-pointer hover:bg-gray-50 rounded-full h-10 w-10 flex items-center justify-center text-2xl text-gray-400"
353 |               >
354 |                 <MdClose />
355 |               </span>
356 |             )}
357 |           </div>
358 |         ))}
359 |         <div className="flex w-full justify-center">
360 |           {is_done ? (
361 |             <div className="space-y-4 w-fit">
362 |               <Button
363 |                 size="lg"
364 |                 className="rounded-xl font-semibold relative py-4 text-md flex gap-2 items-center w-full"
365 |                 onClick={downloadAll}
366 |               >
367 |                 {actions.length > 1 ? 'Download All' : 'Download'}
368 |                 <HiOutlineDownload />
369 |               </Button>
370 |               <Button
371 |                 size="lg"
372 |                 onClick={reset}
373 |                 variant="outline"
374 |                 className="rounded-xl"
375 |               >
376 |                 Clear & Convert Another File(s)
377 |               </Button>
378 |             </div>
379 |           ) : (
380 |             <Button
381 |               size="lg"
382 |               disabled={!is_ready || is_converting}
383 |               className="rounded-xl font-semibold relative py-6 text-md flex items-center w-44 justify-center "
384 |               onClick={convert}
385 |             >
386 |               {is_converting ? (
387 |                 <span className="animate-spin text-lg">
388 |                   <ImSpinner3 />
389 |                 </span>
390 |               ) : (
391 |                 <span className='text-md'>Convert Now</span>
392 |               )}
393 |             </Button>
394 |           )}
395 |         </div>
396 |       </div>
397 |     );
398 |   }
399 | 
400 |   return (
401 |     <ReactDropzone
402 |       onDrop={handleUpload}
403 |       onDragEnter={handleHover}
404 |       onDragLeave={handleExitHover}
405 |       accept={accepted_files}
406 |       onDropRejected={() => {
407 |         handleExitHover();
408 |         toast({
409 |           variant: 'destructive',
410 |           title: 'Error uploading your file(s)',
411 |           description: 'Allowed Files: Audio, Video and Images.',
412 |           duration: 5000,
413 |         });
414 |       }}
415 |       onError={() => {
416 |         handleExitHover();
417 |         toast({
418 |           variant: 'destructive',
419 |           title: 'Error uploading your file(s)',
420 |           description: 'Allowed Files: Audio, Video and Images.',
421 |           duration: 5000,
422 |         });
423 |       }}
424 |     >
425 |       {({ getRootProps, getInputProps }) => (
426 |         <div
427 |           {...getRootProps()}
428 |           className=" bg-gray-50 h-72 lg:h-80 xl:h-96 relative -inset-x-32 rounded-3xl shadow-sm border-2 border-dashed cursor-pointer flex items-center justify-center"
429 |         >
430 |           <input {...getInputProps()} />
431 |           <div className="space-y-4 text-gray-500">
432 |             {is_hover ? (
433 |               <>
434 |                 <div className="justify-center flex text-6xl">
435 |                   <LuFileSymlink />
436 |                 </div>
437 |                 <h3 className="text-center font-medium text-2xl">
438 |                   Yes, right there
439 |                 </h3>
440 |               </>
441 |             ) : (
442 |               <>
443 |                 <div className="justify-center flex text-6xl">
444 |                   <FiUploadCloud />
445 |                 </div>
446 |                 <h3 className="text-center font-medium text-2xl">
447 |                   Click, or drop your files here
448 |                 </h3>
449 |               </>
450 |             )}
451 |           </div>
452 |         </div>
453 |       )}
454 |     </ReactDropzone>
455 |   );
456 | }
457 | 


--------------------------------------------------------------------------------