feat: add component images to /components page

Author: tanerengiiin

apps/showcase/app/(app)/components/page.tsx

@@ -1,4 +1,5 @@
 import AllComponentPreviews from '@/shared/components/all-components-previews';
+import { ComponentPreviewType } from '@/shared/types/App.types';
 import { allDocs } from 'contentlayer/generated';
 import type { Metadata } from 'next';
 
@@ -16,23 +17,15 @@ const allComponents = [...styledComponents, ...tailwindComponents].reduce(
             description: doc.description,
             componentSlug: doc.componentSlug,
             styled: false,
-            tailwind: false
+            tailwind: false,
+            cover: doc?.cover ?? undefined
         };
 
         acc[name][type as 'styled' | 'tailwind'] = true;
 
         return acc;
     },
-    {} as Record<
-        string,
-        {
-            title: string;
-            description: string | undefined;
-            componentSlug: string;
-            styled: boolean;
-            tailwind: boolean;
-        }
-    >
+    {} as Record<string, ComponentPreviewType>
 );
 
 const result = Object.values(allComponents);

apps/showcase/contentlayer.config.js

@@ -23,7 +23,8 @@ export const Docs = defineDocumentType(() => ({
         pts: { type: 'list', of: { type: 'string' }, required: false },
         autoGenerated: { type: 'boolean', required: false },
         lastUpdated: { type: 'date', required: false },
-        hideCopyPage: { type: 'boolean', required: false }
+        hideCopyPage: { type: 'boolean', required: false },
+        cover: { type: 'string', required: false }
     },
     computedFields: {
         slug: {

apps/showcase/docs/styled/components/compare/features.mdx

@@ -38,7 +38,15 @@ const nextConfig: NextConfig = {
         return config;
     },
     images: {
-        domains: ['primefaces.org']
+        domains: ['primefaces.org'],
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'fqjltiegiezfetthbags.supabase.co',
+                pathname: '/storage/v1/object/public/common.images/**'
+            }
+        ],
+        qualities: [75, 85, 90, 95]
     },
     async redirects() {
         const componentDirs = globSync('docs/components/**');