[ { "path": ".editorconfig", "content": "# editorconfig.org\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_size = 2\nindent_style = space\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n" }, { "path": ".eslintignore", "content": "dist/*\n.cache\npublic\nnode_modules\n*.esm.js\n" }, { "path": ".eslintrc.json", "content": "{\n \"$schema\": \"https://json.schemastore.org/eslintrc\",\n \"root\": true,\n \"extends\": [\n \"next/core-web-vitals\",\n \"prettier\",\n \"plugin:tailwindcss/recommended\"\n ],\n \"plugins\": [\"tailwindcss\"],\n \"rules\": {\n \"tailwindcss/classnames-order\": \"off\",\n \"@next/next/no-html-link-for-pages\": \"off\",\n \"react/jsx-key\": \"off\",\n \"tailwindcss/no-custom-classname\": \"off\",\n \"react-hooks/exhaustive-deps\": \"off\"\n },\n \"settings\": {\n \"tailwindcss\": {\n \"callees\": [\"cn\"]\n }\n }\n}\n" }, { "path": ".gitignore", "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\nnode_modules\n.pnp\n.pnp.js\n\n# testing\ncoverage\n\n# next.js\n.next/\nout/\nbuild\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n.pnpm-debug.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# turbo\n.turbo\n\n.contentlayer\n.env" }, { "path": ".prettierignore", "content": "cache\n.cache\npackage.json\npackage-lock.json\npublic\nCHANGELOG.md\n.yarn\n" }, { "path": ".vscode/settings.json", "content": "{\n \"typescript.tsdk\": \"node_modules\\\\typescript\\\\lib\",\n \"typescript.enablePromptUseWorkspaceTsdk\": true\n}" }, { "path": "README.md", "content": "# Next alt generator\n\nA Next.js 13 project for generating image alt tags automatically and in bulk.\n\n## Features\n\n- Radix UI Primitives\n- Tailwind CSS\n- Fonts with `@next/font`\n- Icons from [Lucide](https://lucide.dev)\n- Dark mode with `next-themes`\n- Automatic import sorting with `@ianvs/prettier-plugin-sort-imports`\n\n## Tailwind CSS Features\n\n- Class merging with `taiwind-merge`\n- Animation with `tailwindcss-animate`\n- Conditional classes with `clsx`\n- Variants with `class-variance-authority`\n- Automatic class sorting with `eslint-plugin-tailwindcss`\n\n## Import Sort\n\nThe starter comes with `@ianvs/prettier-plugin-sort-imports` for automatically sort your imports.\n\n### Input\n\n```tsx\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { siteConfig } from \"@/config/site\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport \"@/styles/globals.css\"\nimport { twMerge } from \"tailwind-merge\"\n\nimport { NavItem } from \"@/types/nav\"\nimport { cn } from \"@/lib/utils\"\n```\n\n### Output\n\n```tsx\nimport * as React from \"react\"\n// React is always first.\nimport Link from \"next/link\"\n// Followed by next modules.\nimport { twMerge } from \"tailwind-merge\"\n\n// Followed by third-party modules\n// Space\nimport \"@/styles/globals.css\"\n// styles\nimport { NavItem } from \"@/types/nav\"\n// types\nimport { siteConfig } from \"@/config/site\"\n// config\nimport { cn } from \"@/lib/utils\"\n// lib\nimport { buttonVariants } from \"@/components/ui/button\"\n\n// components\n```\n\n### Class Merging\n\nThe `cn` util handles conditional classes and class merging.\n\n### Input\n\n```ts\ncn(\"px-2 bg-slate-100 py-2 bg-slate-200\")\n// Outputs `p-2 bg-slate-200`\n```\n\n## License & Credits\n\nLicensed under the [MIT license](https://opensource.org/license/mit/).\nBoilerplate project template made by [shadcn](https://github.com/shadcn/next-template)\n" }, { "path": "next-env.d.ts", "content": "/// \n/// \n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/basic-features/typescript for more information.\n" }, { "path": "next.config.mjs", "content": "/** @type {import('next').NextConfig} */\nconst nextConfig = {\n reactStrictMode: true,\n experimental: {\n appDir: true,\n fontLoaders: [\n {\n loader: \"@next/font/google\",\n options: { subsets: [\"latin\"] },\n },\n ],\n },\n images: {\n domains: [\"image-to-alt.s3.eu-central-1.amazonaws.com\"],\n },\n}\n\nexport default nextConfig\n" }, { "path": "package.json", "content": "{\n \"name\": \"next-template\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"next build\",\n \"start\": \"next start\",\n \"lint\": \"next lint\",\n \"preview\": \"next build && next start\"\n },\n \"dependencies\": {\n \"@next/font\": \"^13.1.6\",\n \"@radix-ui/react-accessible-icon\": \"^1.0.1\",\n \"@radix-ui/react-accordion\": \"^1.1.0\",\n \"@radix-ui/react-alert-dialog\": \"^1.0.2\",\n \"@radix-ui/react-aspect-ratio\": \"^1.0.1\",\n \"@radix-ui/react-avatar\": \"^1.0.1\",\n \"@radix-ui/react-checkbox\": \"^1.0.1\",\n \"@radix-ui/react-collapsible\": \"^1.0.1\",\n \"@radix-ui/react-context-menu\": \"^2.1.1\",\n \"@radix-ui/react-dialog\": \"^1.0.2\",\n \"@radix-ui/react-dropdown-menu\": \"^2.0.1\",\n \"@radix-ui/react-hover-card\": \"^1.0.3\",\n \"@radix-ui/react-label\": \"^2.0.0\",\n \"@radix-ui/react-menubar\": \"^1.0.0\",\n \"@radix-ui/react-navigation-menu\": \"^1.1.1\",\n \"@radix-ui/react-popover\": \"^1.0.2\",\n \"@radix-ui/react-progress\": \"^1.0.1\",\n \"@radix-ui/react-radio-group\": \"^1.1.0\",\n \"@radix-ui/react-scroll-area\": \"^1.0.2\",\n \"@radix-ui/react-select\": \"^1.2.0\",\n \"@radix-ui/react-separator\": \"^1.0.1\",\n \"@radix-ui/react-slider\": \"^1.1.0\",\n \"@radix-ui/react-slot\": \"^1.0.1\",\n \"@radix-ui/react-switch\": \"^1.0.1\",\n \"@radix-ui/react-tabs\": \"^1.0.2\",\n \"@radix-ui/react-toast\": \"^1.1.2\",\n \"@radix-ui/react-toggle-group\": \"^1.0.1\",\n \"@radix-ui/react-tooltip\": \"^1.0.3\",\n \"aws-sdk\": \"^2.1318.0\",\n \"axios\": \"^1.3.3\",\n \"class-variance-authority\": \"^0.4.0\",\n \"clsx\": \"^1.2.1\",\n \"lucide-react\": \"0.105.0-alpha.4\",\n \"nanoid\": \"^4.0.1\",\n \"next\": \"^13.1.6\",\n \"next-themes\": \"^0.2.1\",\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\",\n \"sharp\": \"^0.31.3\",\n \"tailwind-merge\": \"^1.8.0\",\n \"tailwindcss-animate\": \"^1.0.5\",\n \"zod\": \"^3.20.6\"\n },\n \"devDependencies\": {\n \"@ianvs/prettier-plugin-sort-imports\": \"^3.7.1\",\n \"@types/node\": \"^17.0.12\",\n \"@types/react\": \"^18.0.22\",\n \"@types/react-dom\": \"^18.0.7\",\n \"autoprefixer\": \"^10.4.13\",\n \"eslint\": \"^8.31.0\",\n \"eslint-config-next\": \"13.0.0\",\n \"eslint-config-prettier\": \"^8.3.0\",\n \"eslint-plugin-react\": \"^7.31.11\",\n \"eslint-plugin-tailwindcss\": \"^3.8.0\",\n \"postcss\": \"^8.4.14\",\n \"prettier\": \"^2.7.1\",\n \"tailwindcss\": \"^3.1.7\",\n \"typescript\": \"^4.5.3\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n },\n}\n" }, { "path": "prettier.config.js", "content": "/** @type {import('prettier').Config} */\nmodule.exports = {\n endOfLine: \"lf\",\n semi: false,\n singleQuote: true,\n tabWidth: 2,\n trailingComma: \"es5\",\n importOrder: [\n \"^(react/(.*)$)|^(react$)\",\n \"^(next/(.*)$)|^(next$)\",\n \"\",\n \"\",\n \"^types$\",\n \"^@/types/(.*)$\",\n \"^@/config/(.*)$\",\n \"^@/lib/(.*)$\",\n \"^@/components/(.*)$\",\n \"^@/styles/(.*)$\",\n \"^[./]\",\n ],\n importOrderSeparation: false,\n importOrderSortSpecifiers: true,\n importOrderBuiltinModulesToTop: true,\n importOrderParserPlugins: [\"typescript\", \"jsx\", \"decorators-legacy\"],\n importOrderMergeDuplicateImports: true,\n importOrderCombineTypeAndValueImports: true,\n plugins: [\"@ianvs/prettier-plugin-sort-imports\"],\n}\n" }, { "path": "src/app/head.tsx", "content": "import { FC } from 'react'\n\nconst head: FC = () => {\n return ImageToAlt - Generate alt tags from images\n}\n\nexport default head\n" }, { "path": "src/app/layout.tsx", "content": "import { Inter as FontSans } from '@next/font/google'\n\nimport '@/styles/globals.css'\nimport { Toaster } from '@/ui/toaster'\n\nimport { cn } from '@/lib/utils'\nimport { SiteHeader } from '../components/site-header'\nimport { TooltipProvider } from '../components/ui/tooltip'\n\nconst fontSans = FontSans({\n subsets: ['latin'],\n variable: '--font-inter',\n})\n\ninterface RootLayoutProps {\n children: React.ReactNode\n}\n\nexport default function RootLayout({ children }: RootLayoutProps) {\n return (\n <>\n \n \n \n \n \n
{children}
\n \n \n \n \n )\n}\n" }, { "path": "src/app/page.tsx", "content": "'use client'\n\nimport { FC } from 'react'\nimport { Button, buttonVariants } from '@/ui/button'\nimport { FileInput } from '@/ui/file-input'\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from '@/components/ui/tooltip'\n\nexport const metadata = {\n title: 'ImageToAlt - Home',\n}\n\nconst page: FC = () => {\n return (\n
\n
\n

\n Easily create alt-descriptions
\n for your images.\n

\n

\n Bulk-generate SEO-optimized alt-descriptions that you can copy and\n paste into your app. Free & open-source.\n

\n
\n
\n \n
\n\n \n \n
\n \n Download as CSV\n \n
\n \n \n

Available soon

\n \n \n\n {/* Legal disclaimers */}\n
\n

\n All images are used solely for alt-generation and are automatically\n deleted after 24h.\n

\n
\n \n Terms\n \n \n Privacy Policy\n \n
\n
\n
\n )\n}\n\nexport default page\n" }, { "path": "src/app/privacy-policy/head.tsx", "content": "import { FC } from 'react'\n\nconst head: FC = () => {\n return Privacy Policy - ImageToAlt\n}\n\nexport default head\n" }, { "path": "src/app/privacy-policy/page.tsx", "content": "import { FC } from 'react'\nimport Link from 'next/link'\n\nconst page: FC = () => {\n return (\n
\n
\n

\n ImageToAlt Privacy Policy\n

\n

\n ImageToAlt is a free online service that provides a simple way to\n generate an alt tag (a description of what is visible on an image,\n determined by a machine learning algorithm) from an image. In order to\n provide this service, we need to collect and store images on our\n servers.\n

\n

Information We Collect

\n

\n When you use the App, we automatically collect certain information\n about your device, including information about your web browser, IP\n address, time zone, and some of the cookies that are installed on your\n device. We refer to this automatically-collected information as\n "Device Information".\n

\n

\n We collect Device Information using the following technologies:\n

\n
    \n
  • \n Cookies: Cookies are data files that are placed on your device or\n computer and often include an anonymous unique identifier.\n
    • \n
  • \n Log files: Log files track actions occurring on the App, and collect\n data including your IP address, browser type, Internet service\n provider, referring/exit pages, and date/time stamps.\n
    • \n
\n

\n When you upload an image to the App, we collect the image itself. We\n use the image to generate an alt tag and store the alt tag. The image\n is then automatically deleted after 24 hours.\n

\n

How We Use Your Information

\n

\n We use the images you upload to our servers solely for the purpose of\n generating an alt tag and serving it back to you. We do not use your\n images for any other purpose. To provide this service, we use a\n machine learning algorithm provided by Replicate, Inc. You can read\n more about how Replicate, Inc. uses your data{' '}\n \n here\n \n . We require all third-party providers to have adequate technical and\n organizational measures in place to ensure the security of user data.\n We do not share user data with any other third parties.\n

\n

\n How We Protect Your Information\n

\n

\n We take the security of your information very seriously. All images\n uploaded to our servers are stored in a secure location in Germany. We\n do not share your images with any third parties. We also automatically\n delete all images from our servers after 24 hours.\n

\n

Use of Cookies

\n

\n We do not use any cookies to track user behavior. We only use session\n cookies to manage your session on our website.\n

\n

\n Changes to Our Privacy Policy\n

\n

\n We reserve the right to make changes to this Privacy Policy at any\n time. Any changes will be posted on this page, so please check back\n periodically for updates.\n

\n

Contact Us

\n

\n If you have any questions about this Privacy Policy, please contact us\n at admin@wordful.ai.\n

\n
\n
\n )\n}\n\nexport default page\n" }, { "path": "src/app/terms/head.tsx", "content": "import { FC } from 'react'\n\nconst head: FC = () => {\n return Terms and Conditions - ImageToAlt\n}\n\nexport default head\n" }, { "path": "src/app/terms/page.tsx", "content": "import { FC } from 'react'\nimport Head from 'next/head'\n\nconst page: FC = () => {\n return (\n
\n \n ImageToAlt - Terms and Conditions\n \n\n
\n

\n ImageToAlt Terms and Conditions\n

\n

\n These terms and conditions ("Terms") apply to your use of\n the ImageToAlt app ("App") and the alt tag generation\n service ("Service") provided by ImageToAlt ("we"\n or "us"). By using the App or the Service, you agree to be\n bound by these Terms.\n

\n

\n Use of the App and the Service\n

\n

\n The App and the Service are provided for informational purposes only.\n You may use the App and the Service at your own risk, and we shall not\n be liable for any damages or harm that may arise from your use of the\n App or the Service.\n

\n

Intellectual Property

\n

\n The App and the Service, including any content or materials made\n available through the App or the Service, are protected by copyright\n and other intellectual property laws. You may not copy, modify,\n distribute, sell, or lease any part of the App or the Service without\n our prior written consent.\n

\n

Disclaimer of Liability

\n

\n The App and the Service are provided "as is" and without warranty of\n any kind. We make no representations or warranties of any kind,\n express or implied, about the completeness, accuracy, reliability,\n suitability or availability with respect to the App or the Service or\n the information, products, services, or related graphics contained in\n the App or the Service for any purpose. To the fullest extent\n permitted by law, we disclaim any and all warranties, express or\n implied, including, but not limited to, implied warranties of\n merchantability and fitness for a particular purpose.\n

\n

\n In no event shall ImageToAlt be liable for any direct, indirect,\n incidental, consequential, special or exemplary damages, including,\n but not limited to, damages for loss of profits, goodwill, use, data\n or other intangible losses resulting from the use of or inability to\n use the App or the Service.\n

\n

Indemnification

\n

\n You agree to indemnify and hold ImageToAlt, its affiliates, officers,\n agents, and other partners and employees, harmless from any loss,\n liability, claim or demand, including reasonable attorneys' fees, made\n by any third party due to or arising out of your use of the App or the\n Service.\n

\n

Termination

\n

\n We may terminate your access to the App and the Service at any time,\n without cause or notice.\n

\n

Governing Law

\n

\n These Terms and your use of the App and the Service shall be governed\n by and construed in accordance with the laws of Germany, without\n giving effect to any principles of conflicts of law.\n

\n

Changes to these Terms

\n

\n We reserve the right to modify these Terms at any time. If we make\n changes to these Terms, we will post the revised Terms on the App and\n update the "Last Updated" date at the top of these Terms. By\n continuing to use the App and the Service after the revised Terms\n become effective, you agree to be bound by the revised Terms.\n

\n

Contact Us

\n

\n If you have any questions about these Terms or the App or the Service,\n please contact us at admin@wordful.ai.\n

\n

Last Updated: Feb 20th, 2023

\n
\n
\n )\n}\n\nexport default page\n" }, { "path": "src/components/icons.tsx", "content": "import {\n Laptop,\n LucideProps,\n Moon,\n SunMedium,\n type Icon as LucideIcon,\n} from 'lucide-react'\n\nexport type Icon = LucideIcon\n\nexport const Icons = {\n sun: SunMedium,\n moon: Moon,\n laptop: Laptop,\n youtube: (props: LucideProps) => (\n \n \n \n \n ),\n logo: (props: LucideProps) => (\n \n \n \n \n \n \n \n ),\n gitHub: (props: LucideProps) => (\n \n \n \n ),\n plus: (props: LucideProps) => (\n \n \n \n \n \n ),\n redx: (props: LucideProps) => (\n \n \n \n \n \n ),\n}\n" }, { "path": "src/components/main-nav.tsx", "content": "import Link from 'next/link'\nimport { NavItem } from '@/src/types/nav'\n\nimport { siteConfig } from '@/config/site'\nimport { cn } from '@/lib/utils'\nimport { Icons } from '@/components/icons'\nimport { Button } from '@/components/ui/button'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\n\ninterface MainNavProps {\n items?: NavItem[]\n}\n\nexport function MainNav({ items }: MainNavProps) {\n return (\n
\n \n \n \n {siteConfig.name}\n \n \n {items?.length ? (\n \n ) : null}\n \n \n \n {' '}\n Menu\n \n \n \n \n \n {siteConfig.name}\n \n \n \n {items?.map(\n (item, index) =>\n item.href && (\n \n {item.title}\n \n )\n )}\n \n \n
\n )\n}\n" }, { "path": "src/components/site-header.tsx", "content": "import Link from 'next/link'\n\nimport { siteConfig } from '@/config/site'\nimport { Icons } from '@/components/icons'\nimport { MainNav } from '@/components/main-nav'\nimport { buttonVariants } from '@/components/ui/button'\n\nexport function SiteHeader() {\n return (\n
\n
\n \n
\n
\n \n \n \n \n YouTube\n
\n \n \n \n \n
\n )\n}\n" }, { "path": "src/components/ui/accordion.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { ChevronDown } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAccordionItem.displayName = 'AccordionItem'\n\nconst AccordionTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n svg]:rotate-180',\n className\n )}\n {...props}\n >\n {children}\n \n \n \n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n
{children}
\n \n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n" }, { "path": "src/components/ui/alert-dialog.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\n\nimport { cn } from '@/lib/utils'\n\nconst AlertDialog = AlertDialogPrimitive.Root\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = ({\n className,\n children,\n ...props\n}: AlertDialogPrimitive.AlertDialogPortalProps) => (\n \n
\n {children}\n
\n \n)\nAlertDialogPortal.displayName = AlertDialogPrimitive.Portal.displayName\n\nconst AlertDialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\nconst AlertDialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n))\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogDescription.displayName =\n AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport {\n AlertDialog,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n" }, { "path": "src/components/ui/aspect-ratio.tsx", "content": "'use client'\n\nimport * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\nconst AspectRatio = AspectRatioPrimitive.Root\n\nexport { AspectRatio }\n" }, { "path": "src/components/ui/avatar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\n\nimport { cn } from '@/lib/utils'\n\nconst Avatar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nconst AvatarFallback = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarImage, AvatarFallback }\n" }, { "path": "src/components/ui/button.tsx", "content": "import * as React from 'react'\nimport Link from 'next/link'\nimport { VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\nconst buttonVariants = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800',\n {\n variants: {\n variant: {\n default:\n 'bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900',\n destructive:\n 'bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600',\n outline:\n 'bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100',\n subtle:\n 'bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100',\n ghost:\n 'bg-transparent dark:bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent',\n link: 'bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-300 hover:bg-transparent dark:hover:bg-transparent',\n },\n size: {\n default: 'h-10 py-2 px-4',\n sm: 'h-9 px-2 rounded-md',\n lg: 'h-11 px-8 rounded-md',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes,\n VariantProps {\n href?: string\n}\n\nconst Button = React.forwardRef(\n ({ className, children, href, variant, size, ...props }, ref) => {\n if (href) {\n return (\n \n {children}\n \n )\n }\n return (\n \n {children}\n \n )\n }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n" }, { "path": "src/components/ui/checkbox.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { Check } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst Checkbox = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n \n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n" }, { "path": "src/components/ui/collapsible.tsx", "content": "'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n" }, { "path": "src/components/ui/context-menu.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as ContextMenuPrimitive from '@radix-ui/react-context-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nContextMenuShortcut.displayName = 'ContextMenuShortcut'\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n" }, { "path": "src/components/ui/dialog.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { X } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = ({\n className,\n children,\n ...props\n}: DialogPrimitive.DialogPortalProps) => (\n \n
\n {children}\n
\n \n)\nDialogPortal.displayName = DialogPrimitive.Portal.displayName\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n" }, { "path": "src/components/ui/dropdown-menu.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n" }, { "path": "src/components/ui/file-input.tsx", "content": "'use client'\n\nimport {\n forwardRef,\n useReducer,\n useState,\n type ChangeEvent,\n type DragEvent,\n} from 'react'\nimport { useS3Upload } from '@/src/hooks/use-s3-upload'\nimport { useToast } from '@/src/hooks/use-toast'\nimport ImageUpload from '@/ui/image-upload'\n\nimport { MAX_FILE_SIZE } from '@/config/image'\nimport { cn, validateFileType } from '@/lib/utils'\nimport { Icons } from '../icons'\n\ninterface FileWithUrl {\n name: string\n getUrl: string\n size: number\n error?: boolean | undefined\n}\n\n// Reducer action(s)\nconst addFilesToInput = () => ({\n type: 'ADD_FILES_TO_INPUT' as const,\n payload: [] as FileWithUrl[],\n})\n\ntype Action = ReturnType\ntype State = FileWithUrl[]\n\nexport interface InputProps\n extends Omit, 'type'> {}\n\nconst FileInput = forwardRef(\n ({ className, ...props }, ref) => {\n const { toast } = useToast()\n const { s3Upload } = useS3Upload()\n const [dragActive, setDragActive] = useState(false)\n const [input, dispatch] = useReducer((state: State, action: Action) => {\n switch (action.type) {\n case 'ADD_FILES_TO_INPUT': {\n // do not allow more than 5 files to be uploaded at once\n if (state.length + action.payload.length > 10) {\n toast({\n title: 'Too many files',\n description:\n 'You can only upload a maximum of 5 files at a time.',\n })\n return state\n }\n\n return [...state, ...action.payload]\n }\n\n // You could extend this, for example to allow removing files\n }\n }, [])\n\n const noInput = input.length === 0\n\n // handle drag events\n const handleDrag = (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (e.type === 'dragenter' || e.type === 'dragover') {\n setDragActive(true)\n } else if (e.type === 'dragleave') {\n setDragActive(false)\n }\n }\n\n // triggers when file is selected with click\n const handleChange = async (e: ChangeEvent) => {\n e.preventDefault()\n try {\n if (e.target.files && e.target.files[0]) {\n // at least one file has been selected\n\n // validate file type\n const valid = validateFileType(e.target.files[0])\n if (!valid) {\n toast({\n title: 'Invalid file type',\n description: 'Please upload a valid file type.',\n })\n return\n }\n\n const { getUrl, error } = await s3Upload(e.target.files[0])\n if (!getUrl || error) throw new Error('Error uploading file')\n\n const { name, size } = e.target.files[0]\n\n addFilesToState([{ name, getUrl, size }])\n }\n } catch (error) {\n // already handled\n }\n }\n\n const addFilesToState = (files: FileWithUrl[]) => {\n dispatch({ type: 'ADD_FILES_TO_INPUT', payload: files })\n }\n\n // triggers when file is dropped\n const handleDrop = async (e: DragEvent) => {\n e.preventDefault()\n e.stopPropagation()\n\n // validate file type\n if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n const files = Array.from(e.dataTransfer.files)\n const validFiles = files.filter((file) => validateFileType(file))\n\n if (files.length !== validFiles.length) {\n toast({\n title: 'Invalid file type',\n description: 'Only image files are allowed.',\n })\n }\n\n try {\n const filesWithUrl = await Promise.all(\n validFiles.map(async (file) => {\n const { name, size } = file\n const { getUrl, error } = await s3Upload(file)\n\n if (!getUrl || error) return { name, size, getUrl: '', error }\n return { name, size, getUrl }\n })\n )\n\n setDragActive(false)\n\n // at least one file has been selected\n addFilesToState(filesWithUrl)\n\n e.dataTransfer.clearData()\n } catch (error) {\n // already handled\n }\n }\n }\n\n return (\n e.preventDefault()}\n onDragEnter={handleDrag}\n className=\"flex h-full items-center w-full lg:w-2/3 justify-start\"\n >\n \n \n {noInput ? (\n <>\n \n\n \n \n \n\n

\n Click to upload or drag\n and drop\n

\n

\n up to 5 images, {(MAX_FILE_SIZE / 1000000).toFixed(0)}MB per\n file\n

\n\n \n \n ) : (\n
\n
\n
\n
\n \n \n \n \n Preview\n \n \n Name\n \n \n Size\n \n \n Status\n \n \n \n \n {input.map((file, index) => (\n \n ))}\n \n
\n\n \n \n \n \n \n
\n
\n
\n
\n )}\n \n \n \n )\n }\n)\nFileInput.displayName = 'FileInput'\n\nexport { FileInput }\n" }, { "path": "src/components/ui/hover-card.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as HoverCardPrimitive from '@radix-ui/react-hover-card'\n\nimport { cn } from '@/lib/utils'\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n \n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n" }, { "path": "src/components/ui/image-upload.tsx", "content": "'use client'\n\nimport { forwardRef } from 'react'\nimport Image from 'next/image'\nimport { useUploadFile } from '@/src/hooks/use-upload-file'\nimport { ImageResponseData } from '@/src/types/api/image'\nimport { Progress } from '@/ui/progress'\nimport { Loader2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\nimport { Icons } from '@/components/icons'\n\ninterface ImageUploadProps extends React.HTMLAttributes {\n name: string\n size: number\n getUrl: string\n error?: boolean | undefined\n}\n\nconst ImageUpload = forwardRef(\n ({ getUrl, error, name, size, className, ...props }, ref) => {\n const {\n data,\n progress,\n isLoading,\n error: processingError,\n } = useUploadFile('/api/image/process', getUrl, {\n disabled: error,\n })\n\n return (\n \n \n
\n {error ? (\n
\n \n
\n ) : (\n \n )}\n
\n \n \n
\n \n {name}\n

\n {data ? (\n

{data.alt}

\n ) : isLoading ? (\n \n ) : null}\n
\n \n \n {(size / 1000).toFixed(0)} KB\n \n \n \n \n \n )\n }\n)\n\nImageUpload.displayName = 'ImageUpload'\n\nexport default ImageUpload\n" }, { "path": "src/components/ui/input.tsx", "content": "import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface InputProps\n extends React.InputHTMLAttributes {}\n\nconst Input = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nInput.displayName = 'Input'\n\nexport { Input }\n" }, { "path": "src/components/ui/label.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as LabelPrimitive from '@radix-ui/react-label'\n\nimport { cn } from '@/lib/utils'\n\nconst Label = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n" }, { "path": "src/components/ui/menubar.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as MenubarPrimitive from '@radix-ui/react-menubar'\nimport { Check, ChevronRight, Circle } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, align = 'start', alignOffset = -4, sideOffset = 8, ...props },\n ref\n ) => (\n \n \n \n )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nMenubarShortcut.displayname = 'MenubarShortcut'\n\nexport {\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarItem,\n MenubarSeparator,\n MenubarLabel,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarPortal,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarGroup,\n MenubarSub,\n MenubarShortcut,\n}\n" }, { "path": "src/components/ui/navigation-menu.tsx", "content": "import * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport { cva } from 'class-variance-authority'\nimport { ChevronDown } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst NavigationMenu = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:bg-slate-100 disabled:opacity-50 dark:focus:bg-slate-800 disabled:pointer-events-none bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-slate-50 dark:data-[state=open]:bg-slate-800 h-10 py-2 px-4 group'\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}{' '}\n \n \n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n
\n \n))\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n navigationMenuTriggerStyle,\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n}\n" }, { "path": "src/components/ui/popover.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\n\nimport { cn } from '@/lib/utils'\n\nconst Popover = PopoverPrimitive.Root\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport { Popover, PopoverTrigger, PopoverContent }\n" }, { "path": "src/components/ui/progress.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport { cva } from 'class-variance-authority'\n\nimport { cn } from '@/lib/utils'\n\ninterface ProgressProps\n extends React.ComponentPropsWithoutRef {\n isSuccess?: boolean\n isError?: boolean\n}\n\nconst indicatorVariants = cva('h-full w-full flex-1 transition-all', {\n variants: {\n variant: {\n default: 'bg-slate-900 dark:bg-slate-400',\n isError: 'bg-red-500 dark:bg-red-500',\n isSuccess: 'bg-green-500 dark:bg-green-400',\n },\n },\n})\n\nconst rootVariants = cva('relative h-4 w-full overflow-hidden rounded-full', {\n variants: {\n variant: {\n default: 'bg-slate-200 dark:bg-slate-800',\n isError: 'bg-red-200 dark:bg-red-800',\n isSuccess: 'bg-green-200 dark:bg-green-800',\n },\n },\n})\n\nconst Progress = React.forwardRef<\n React.ElementRef,\n ProgressProps\n>(({ className, value, isError, isSuccess, ...props }, ref) => {\n const variant = isError ? 'isError' : 'default'\n\n return (\n \n \n \n )\n})\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n" }, { "path": "src/components/ui/radio-group.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { Circle } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n" }, { "path": "src/components/ui/scroll-area.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\n\nimport { cn } from '@/lib/utils'\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n {children}\n \n \n \n \n))\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n \n \n \n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\nexport { ScrollArea, ScrollBar }\n" }, { "path": "src/components/ui/select.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as SelectPrimitive from '@radix-ui/react-select'\nimport { Check, ChevronDown } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n\n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n}\n" }, { "path": "src/components/ui/separator.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\n\nimport { cn } from '@/lib/utils'\n\nconst Separator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, orientation = 'horizontal', decorative = true, ...props },\n ref\n ) => (\n \n )\n)\nSeparator.displayName = SeparatorPrimitive.Root.displayName\n\nexport { Separator }\n" }, { "path": "src/components/ui/slider.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\n\nimport { cn } from '@/lib/utils'\n\nconst Slider = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, value, ...props }, ref) => (\n \n \n \n \n \n \n))\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider }\n" }, { "path": "src/components/ui/spinner.tsx", "content": "import type { FC, HTMLAttributes } from 'react'\nimport { Loader2 } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\ninterface SpinnerProps extends HTMLAttributes {}\n\nconst Spinner: FC = ({ className, ...props }) => {\n return (\n \n )\n}\n\nexport default Spinner\n" }, { "path": "src/components/ui/switch.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as SwitchPrimitives from '@radix-ui/react-switch'\n\nimport { cn } from '@/lib/utils'\n\nconst Switch = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\nexport { Switch }\n" }, { "path": "src/components/ui/tabs.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\n\nimport { cn } from '@/lib/utils'\n\nconst Tabs = TabsPrimitive.Root\n\nconst TabsList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n" }, { "path": "src/components/ui/textarea.tsx", "content": "import * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nexport interface TextareaProps\n extends React.TextareaHTMLAttributes {}\n\nconst Textarea = React.forwardRef(\n ({ className, ...props }, ref) => {\n return (\n \n )\n }\n)\nTextarea.displayName = 'Textarea'\n\nexport { Textarea }\n" }, { "path": "src/components/ui/toast.tsx", "content": "import * as React from 'react'\nimport * as ToastPrimitives from '@radix-ui/react-toast'\nimport { VariantProps, cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\n\nimport { cn } from '@/lib/utils'\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n 'data-[swipe=move]:transition-none grow-1 group relative pointer-events-auto 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=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full mt-4 data-[state=closed]:slide-out-to-right-full dark:border-slate-700 last:mt-0 sm:last:mt-4',\n {\n variants: {\n variant: {\n default:\n 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700',\n destructive:\n 'group destructive bg-red-600 text-white border-red-600 dark:border-red-600',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n" }, { "path": "src/components/ui/toaster.tsx", "content": "'use client'\n\nimport { useToast } from '@/hooks/use-toast'\nimport {\n Toast,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n} from '@/ui/toast'\n\nexport function Toaster() {\n const { toasts } = useToast()\n\n return (\n \n {toasts.map(function ({ id, title, description, action, ...props }) {\n return (\n \n
\n {title && {title}}\n {description && (\n {description}\n )}\n
\n {action}\n \n \n )\n })}\n \n \n )\n}\n" }, { "path": "src/components/ui/tooltip.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip'\n\nimport { cn } from '@/lib/utils'\n\nconst TooltipProvider = TooltipPrimitive.Provider\n\nconst Tooltip = ({ ...props }) => \nTooltip.displayName = TooltipPrimitive.Tooltip.displayName\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n" }, { "path": "src/config/image.ts", "content": "export const MAX_FILE_SIZE = 5000000 // 5MB\n" }, { "path": "src/config/s3.ts", "content": "export const ALLOWED_FILE_TYPES = ['image/png', 'image/jpeg']\nexport const S3_BUCKET_NAME = 'image-to-alt'\n" }, { "path": "src/config/site.ts", "content": "import { NavItem } from '@/src/types/nav'\n\ninterface SiteConfig {\n name: string\n description: string\n mainNav: NavItem[]\n links: {\n youtube: string\n github: string\n }\n}\n\nexport const siteConfig: SiteConfig = {\n name: 'ImageToAlt',\n description: 'Easily create alt-descriptions for your images.',\n mainNav: [\n {\n title: 'Home',\n href: '/',\n },\n ],\n links: {\n github: 'https://github.com/joschan21/image-alt-generator',\n youtube: 'https://www.youtube.com/@joshtriedcoding',\n },\n}\n" }, { "path": "src/hooks/use-s3-upload.ts", "content": "import { toast } from '@/hooks/use-toast'\n\nimport { MAX_FILE_SIZE } from '@/config/image'\nimport { FileTooLargeError } from '@/lib/exceptions'\nimport { s3ResponseSchema } from '@/lib/validations/s3'\n\ninterface UseS3UploadReturn {\n s3Upload: (file: File) => Promise<{ getUrl: string | null; error: boolean }>\n}\n\nconst uploadFile = async (file: File) => {\n try {\n const res = await fetch('/api/image/presign', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n fileType: file.type,\n }),\n })\n\n const data = await res.json()\n\n const { fields, getUrl, postUrl } = s3ResponseSchema.parse(data)\n\n const outboundToS3 = {\n ...fields,\n 'Content-Type': file.type,\n file,\n }\n\n const formData = new FormData()\n\n Object.entries(outboundToS3).forEach(([key, value]) => {\n formData.append(key, value)\n })\n\n try {\n // Upload to S3\n await fetch(postUrl, {\n method: 'POST',\n body: formData,\n })\n } catch (error) {\n throw new FileTooLargeError()\n }\n\n return { getUrl }\n } catch (error) {\n if (error instanceof FileTooLargeError) {\n throw new FileTooLargeError()\n }\n\n throw new Error('Internal Server Error')\n }\n}\n\nexport const useS3Upload = (): UseS3UploadReturn => {\n const s3Upload = async (file: File) => {\n try {\n if (file.size > MAX_FILE_SIZE) throw new FileTooLargeError()\n\n // Single file upload\n const singleFile = file as File\n\n const { getUrl } = await uploadFile(singleFile)\n\n return { getUrl, error: false }\n } catch (error) {\n if (error instanceof FileTooLargeError) {\n toast({\n title: 'Image Too Large',\n description: error.message,\n })\n\n return { getUrl: null, error: true }\n }\n\n toast({\n title: 'Internal Server Error',\n description: 'There was an error uploading your image.',\n })\n\n return { getUrl: null, error: true }\n }\n }\n\n return { s3Upload }\n}\n" }, { "path": "src/hooks/use-toast.ts", "content": "// Inspired by react-hot-toast library\nimport * as React from 'react'\nimport { ToastActionElement, type ToastProps } from '@/ui/toast'\n\nconst TOAST_LIMIT = 1\nconst TOAST_REMOVE_DELAY = 1000\n\ntype ToasterToast = ToastProps & {\n id: string\n title?: React.ReactNode\n description?: React.ReactNode\n action?: ToastActionElement\n}\n\nconst actionTypes = {\n ADD_TOAST: 'ADD_TOAST',\n UPDATE_TOAST: 'UPDATE_TOAST',\n DISMISS_TOAST: 'DISMISS_TOAST',\n REMOVE_TOAST: 'REMOVE_TOAST',\n} as const\n\nlet count = 0\n\nfunction genId() {\n count = (count + 1) % Number.MAX_VALUE\n return count.toString()\n}\n\ntype ActionType = typeof actionTypes\n\ntype Action =\n | {\n type: ActionType['ADD_TOAST']\n toast: ToasterToast\n }\n | {\n type: ActionType['UPDATE_TOAST']\n toast: Partial\n }\n | {\n type: ActionType['DISMISS_TOAST']\n toastId?: ToasterToast['id']\n }\n | {\n type: ActionType['REMOVE_TOAST']\n toastId?: ToasterToast['id']\n }\n\ninterface State {\n toasts: ToasterToast[]\n}\n\nconst toastTimeouts = new Map>()\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId)\n dispatch({\n type: 'REMOVE_TOAST',\n toastId: toastId,\n })\n }, TOAST_REMOVE_DELAY)\n\n toastTimeouts.set(toastId, timeout)\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case 'ADD_TOAST':\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n }\n\n case 'UPDATE_TOAST':\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n }\n\n case 'DISMISS_TOAST':\n const { toastId } = action\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId)\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id)\n })\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n }\n case 'REMOVE_TOAST':\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n }\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n }\n }\n}\n\nconst listeners: Array<(state: State) => void> = []\n\nlet memoryState: State = { toasts: [] }\n\nfunction dispatch(action: Action) {\n memoryState = reducer(memoryState, action)\n listeners.forEach((listener) => {\n listener(memoryState)\n })\n}\n\ninterface Toast extends Omit {}\n\nfunction toast({ ...props }: Toast) {\n const id = genId()\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: 'UPDATE_TOAST',\n toast: { ...props, id },\n })\n const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })\n\n dispatch({\n type: 'ADD_TOAST',\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss()\n },\n },\n })\n\n return {\n id: id,\n dismiss,\n update,\n }\n}\n\nfunction useToast() {\n const [state, setState] = React.useState(memoryState)\n\n React.useEffect(() => {\n listeners.push(setState)\n return () => {\n const index = listeners.indexOf(setState)\n if (index > -1) {\n listeners.splice(index, 1)\n }\n }\n }, [state])\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),\n }\n}\n\nexport { useToast, toast }\n" }, { "path": "src/hooks/use-upload-file.ts", "content": "import { useEffect, useReducer, useRef } from 'react'\nimport axios from 'axios'\n\nimport { useToast } from './use-toast'\n\ninterface State {\n data?: T\n isLoading: boolean\n progress?: number\n error?: boolean\n}\n\n// discriminated union type\ntype Action =\n | { type: 'loading' }\n | { type: 'fetched'; payload: T }\n | { type: 'error'; payload: boolean }\n | { type: 'progress'; payload: number }\n\ntype Options = {\n disabled: boolean | undefined\n}\n\nexport const useUploadFile = (\n url: string,\n resourceUrl: string,\n options: Options\n) => {\n const { toast } = useToast()\n const { disabled } = options\n\n // Used to prevent state update if the component is unmounted\n const cancelRequest = useRef(false)\n\n const initialState: State = {\n error: undefined,\n isLoading: false,\n progress: undefined,\n data: undefined,\n }\n\n // Keep state logic separated\n const fetchReducer = (state: State, action: Action): State => {\n switch (action.type) {\n case 'loading':\n return { ...state, isLoading: true }\n case 'fetched':\n return { ...state, data: action.payload, isLoading: false }\n case 'error':\n return { ...state, error: action.payload, isLoading: false }\n case 'progress':\n return { ...state, progress: action.payload }\n default:\n return state\n }\n }\n\n const [state, dispatch] = useReducer(fetchReducer, initialState)\n\n useEffect(() => {\n // Do nothing if the url is not given\n if (!url || disabled) return\n\n cancelRequest.current = false\n\n const fetchData = async () => {\n dispatch({ type: 'loading' })\n\n try {\n const res = await axios.post(url, resourceUrl, {\n headers: {\n 'Content-Type': 'application/json',\n },\n\n onUploadProgress: (progressEvent) => {\n const percentCompleted = Math.round(\n (progressEvent.loaded * 100) / progressEvent.total!\n )\n\n dispatch({ type: 'progress', payload: percentCompleted })\n },\n })\n\n const data = res.data as T\n if (cancelRequest.current) return\n\n dispatch({ type: 'fetched', payload: data })\n } catch (error) {\n if (cancelRequest.current) return\n\n dispatch({ type: 'error', payload: true })\n\n toast({\n title: 'Something went wrong.',\n description: 'Please try again later.',\n })\n }\n }\n\n void fetchData()\n\n // Use the cleanup function for avoiding a possible...\n // ...state update after the component was unmounted\n return () => {\n cancelRequest.current = true\n }\n }, [url])\n\n return state\n}\n" }, { "path": "src/lib/api-middlewares/with-methods.ts", "content": "import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'\n\nexport function withMethods(methods: string[], handler: NextApiHandler) {\n return async function (req: NextApiRequest, res: NextApiResponse) {\n if (!req.method || !methods.includes(req.method)) {\n return res.status(405).end()\n }\n\n return handler(req, res)\n }\n}\n" }, { "path": "src/lib/exceptions.ts", "content": "import { MAX_FILE_SIZE } from '../config/image'\n\nexport class FileTooLargeError extends Error {\n constructor(\n message = `Images cannot be larger than ${MAX_FILE_SIZE / 1000000}MB.`\n ) {\n super(message)\n }\n}\n" }, { "path": "src/lib/s3.ts", "content": "import S3 from 'aws-sdk/clients/s3'\n\nexport const s3 = new S3({\n apiVersion: '2006-03-01',\n accessKeyId: process.env.S3_ACCESS_KEY_ID,\n secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,\n region: process.env.S3_REGION,\n signatureVersion: 'v4',\n})\n" }, { "path": "src/lib/utils.ts", "content": "import { ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nimport { ALLOWED_FILE_TYPES } from '../config/s3'\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n\nexport function validateFileType(file: File) {\n return ALLOWED_FILE_TYPES.includes(file.type)\n}\n" }, { "path": "src/lib/validations/s3.ts", "content": "import { ALLOWED_FILE_TYPES } from '@/src/config/s3'\nimport { z } from 'zod'\n\nexport const fileTypeSchema = z.string().refine(\n (value) => {\n return ALLOWED_FILE_TYPES.includes(value)\n },\n {\n message: 'Invalid file type',\n }\n)\n\n/**\n * fields: provided by AWS to authenticate request\n * key: file name in s3 bucket\n * getUrl: url to view the file from s3 bucket\n * postUrl: url that allows post request to s3 bucket\n */\n\nexport const s3ResponseSchema = z.object({\n getUrl: z.string(),\n postUrl: z.string(),\n fields: z.object({\n Policy: z.string(),\n 'X-Amz-Algorithm': z.string(),\n 'X-Amz-Credential': z.string(),\n 'X-Amz-Date': z.string(),\n 'X-Amz-Signature': z.string(),\n bucket: z.string(),\n key: z.string(),\n }),\n})\n" }, { "path": "src/pages/api/image/presign.ts", "content": "import { NextApiRequest, NextApiResponse } from 'next'\nimport { MAX_FILE_SIZE } from '@/src/config/image'\nimport { S3_BUCKET_NAME } from '@/src/config/s3'\nimport { withMethods } from '@/src/lib/api-middlewares/with-methods'\nimport { s3 } from '@/src/lib/s3'\nimport { fileTypeSchema } from '@/src/lib/validations/s3'\nimport { PresignResponseData } from '@/src/types/api/image'\nimport { nanoid } from 'nanoid'\nimport { z } from 'zod'\n\nconst handler = async (\n req: NextApiRequest,\n res: NextApiResponse\n) => {\n const reqFileType = req.body.fileType\n const fileId = nanoid()\n\n try {\n // validate file extension, will throw if invalid\n const fileType = fileTypeSchema.parse(reqFileType)\n const fileExtension = fileType.split('/')[1]\n const key = `${fileId}.${fileExtension}`\n\n // Create a presigned POST request to upload the file to S3\n const { url: postUrl, fields } = (await new Promise((resolve, reject) => {\n s3.createPresignedPost(\n {\n Bucket: S3_BUCKET_NAME,\n Fields: { key },\n Expires: 60,\n Conditions: [\n ['content-length-range', 0, MAX_FILE_SIZE],\n ['starts-with', '$Content-Type', 'image/'],\n ],\n },\n (err, signed) => {\n if (err) return reject(err)\n resolve(signed)\n }\n )\n })) as { url: string; fields: any }\n\n const getUrl = await s3.getSignedUrlPromise('getObject', {\n Bucket: S3_BUCKET_NAME,\n Key: key,\n })\n\n return res.status(200).json({ postUrl, getUrl, fields })\n } catch (error) {\n if (error instanceof z.ZodError) {\n return res.status(415).json(error.issues)\n }\n\n if (error instanceof Error) {\n return res.status(500).json({ error: error.message })\n }\n\n return res.status(500).json({ error: 'Something went wrong' })\n }\n}\n\nexport default withMethods(['POST'], handler)\n" }, { "path": "src/pages/api/image/process.ts", "content": "import { NextApiRequest, NextApiResponse } from 'next'\nimport { ImageResponseData } from '@/src/types/api/image'\n\nimport { withMethods } from '@/lib/api-middlewares/with-methods'\n\ntype PartialReplicateResponse = {\n urls: {\n get: string\n cancel: string\n }\n}\n\nexport const config = {\n api: {\n bodyParser: {\n sizeLimit: '4mb',\n },\n },\n}\n\nasync function handler(\n req: NextApiRequest,\n res: NextApiResponse\n) {\n if (!req.body)\n return res\n .status(400)\n .json({ success: false, alt: '', message: 'No image data' })\n const imageBase64 = req.body\n\n try {\n const startResponse = await fetch(\n 'https://api.replicate.com/v1/predictions',\n {\n method: 'POST',\n headers: {\n Authorization: `Token ${process.env.REPLICATE_API_KEY}`,\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n // Pinned to a specific version of Stable Diffusion\n // See https://replicate.com/stability-ai/stable-diffussion/versions\n version:\n '9a34a6339872a03f45236f114321fb51fc7aa8269d38ae0ce5334969981e4cd8',\n\n input: {\n model: 'conceptual-captions',\n use_beam_search: false,\n image: imageBase64,\n },\n }),\n }\n )\n\n let jsonStartResponse =\n (await startResponse.json()) as PartialReplicateResponse\n let endpointUrl = jsonStartResponse.urls.get\n\n // GET request to get the status of alt text generation process & return the result when it's ready\n let altText: string | null = null\n while (!altText) {\n // Poll in 1s intervals until the alt text is ready\n\n let finalResponse = await fetch(endpointUrl, {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n Authorization: 'Token ' + process.env.REPLICATE_API_KEY,\n },\n })\n let jsonFinalResponse = await finalResponse.json()\n\n if (jsonFinalResponse.status === 'succeeded') {\n altText = jsonFinalResponse.output as string\n\n res.status(200).json({\n success: true,\n alt: altText,\n message: 'Alt text generated successfully',\n })\n\n break\n } else if (jsonFinalResponse.status === 'failed') {\n res.status(503).json({\n success: false,\n alt: '',\n message: 'Image could not be processed',\n })\n break\n } else {\n await new Promise((resolve) => setTimeout(resolve, 1000))\n }\n }\n } catch (error) {\n res\n .status(500)\n .json({ success: false, alt: '', message: 'Internal server error' })\n }\n}\n\nexport default withMethods(['POST'], handler)\n" }, { "path": "src/styles/globals.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n" }, { "path": "src/types/api/image.ts", "content": "import { s3ResponseSchema } from '@/src/lib/validations/s3'\nimport { ZodIssue, z } from 'zod'\n\nexport type ImageResponseData = {\n success: boolean\n alt: string\n message: string\n}\n\nexport type PresignResponseData =\n | z.infer\n | ZodIssue[]\n | { error: string }\n" }, { "path": "src/types/nav.ts", "content": "export interface NavItem {\n title: string\n href?: string\n disabled?: boolean\n external?: boolean\n}\n" }, { "path": "tailwind.config.js", "content": "const { fontFamily } = require(\"tailwindcss/defaultTheme\")\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n darkMode: [\"class\"],\n content: [\n \"./app/**/*.{js,ts,jsx,tsx}\",\n \"./pages/**/*.{js,ts,jsx,tsx}\",\n \"./components/**/*.{js,ts,jsx,tsx}\",\n\n // Or if using `src` directory:\n \"./src/**/*.{js,ts,jsx,tsx}\",\n ],\n theme: {\n container: {\n center: true,\n padding: \"1.5rem\",\n screens: {\n \"2xl\": \"1360px\",\n },\n },\n extend: {\n fontFamily: {\n sans: [\"var(--font-inter)\", ...fontFamily.sans],\n },\n keyframes: {\n \"accordion-down\": {\n from: { height: 0 },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: { height: \"var(--radix-accordion-content-height)\" },\n to: { height: 0 },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n },\n },\n },\n plugins: [require(\"tailwindcss-animate\")],\n}\n" }, { "path": "tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"skipLibCheck\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noEmit\": true,\n \"incremental\": true,\n \"esModuleInterop\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"jsx\": \"preserve\",\n \"baseUrl\": \".\",\n \"paths\": {\n \"@/*\": [\"./*\"],\n \"@/ui/*\": [\"./src/components/ui/*\"],\n \"@/hooks/*\": [\"./src/hooks/*\"],\n \"@/config/*\": [\"./src/config/*\"],\n \"@/styles/*\": [\"./src/styles/*\"],\n \"@/lib/*\": [\"./src/lib/*\"],\n \"@/components/*\": [\"./src/components/*\"]\n },\n \"plugins\": [\n {\n \"name\": \"next\"\n }\n ]\n },\n \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n \"exclude\": [\"node_modules\"]\n}\n" } ]