From 7a3bdf75d60b9f2526b21aef8366a65fe5b16a44 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 22 Jun 2024 09:52:33 +0100
Subject: [PATCH] Improve elements

---
 apps/addon-catalog/components/addon-item.tsx | 111 +------------------
 apps/addon-catalog/next.config.mjs           |  10 ++
 2 files changed, 15 insertions(+), 106 deletions(-)

diff --git a/apps/addon-catalog/components/addon-item.tsx b/apps/addon-catalog/components/addon-item.tsx
index 37c91592..2f8c9e76 100644
--- a/apps/addon-catalog/components/addon-item.tsx
+++ b/apps/addon-catalog/components/addon-item.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link, { LinkProps } from 'next/link';
+import Link from 'next/link';
 import humanFormat from 'human-format';
 import { AvatarList } from '@repo/ui';
 import { VerifiedBadge } from './verified-badge';
@@ -27,77 +27,6 @@ interface AddonItemProps {
   status?: 'default' | 'essential' | 'deprecated';
 }
 
-const AddonItemWrapper = ({
-  orientation,
-  ...props
-}: {
-  children?: React.ReactNode;
-  orientation?: Orientation;
-}) => <div {...props} />;
-// ${hoverEffect}
-// display: flex;
-// flex-direction: column;
-// padding: ${spacing.padding.medium}px ${spacing.padding.medium}px 0;
-// text-decoration: none;
-// position: relative;
-// background: white;
-
-// @media (min-width: ${breakpoint * 1.5}px) {
-//   padding: ${spacing.padding.medium}px;
-
-//   ${(props) =>
-//     props.orientation === 'horizontal' &&
-//     `
-//       flex-direction: row;
-//       align-items: center;
-//     `}
-// }
-
-const ClickIntercept = (props: LinkProps) => <Link {...props} />;
-// position: absolute;
-// top: 0;
-// left: 0;
-// right: 0;
-// bottom: 0;
-// z-index: 1;
-
-// const Image = ({
-//   isLoading,
-//   orientation,
-//   src,
-//   ...props
-// }: {
-//   children?: React.ReactNode;
-//   isLoading?: boolean;
-//   orientation?: Orientation;
-//   src: string;
-// }) => <div {...props} />;
-// // flex: none;
-// // width: 48px;
-// // height: 48px;
-// // margin-right: ${spacing.padding.medium}px;
-// // background-image: url(${(props: any) => props.src});
-// // background-size: contain;
-// // background-position: center;
-// // background-repeat: no-repeat;
-
-// // ${(props) =>
-// //   props.isLoading &&
-// //   css`
-// //     ${inlineGlow}
-// //   `}
-
-// // @media (min-width: ${breakpoint * 1.5}px) {
-// //   width: 64px;
-// //   height: 64px;
-
-// //   ${(props) =>
-// //     props.orientation === 'vertical' &&
-// //     `
-// //       margin-bottom: 16px;
-// //     `}
-// // }
-
 const Title = ({
   isLoading,
   ...props
@@ -155,22 +84,6 @@ const AddonInfo = ({
 // align-items: flex-start;
 // word-break: break-word;
 
-// @media (min-width: ${breakpoint * 1.5}px) {
-//   ${(props) =>
-//     props.orientation === 'horizontal' &&
-//     `
-//       align-items: center;
-//       margin-right: ${spacing.padding.large}px;
-//     `}
-
-//   ${(props) =>
-//     props.orientation === 'vertical' &&
-//     `
-//       display: block;
-//       margin-bottom: ${spacing.padding.medium}px;
-//     `}
-// }
-
 const Spacer = (props: any) => <div {...props} />;
 // border-top: 1px solid ${color.border};
 // margin-top: ${spacing.padding.large}px;
@@ -182,18 +95,6 @@ const Spacer = (props: any) => <div {...props} />;
 //   border: 0;
 // }
 
-const Meta = (props: any) => <div {...props} />;
-// display: flex;
-// align-items: center;
-// justify-content: space-between;
-
-// padding-top: 16px;
-// padding-bottom: 16px;
-
-// @media (min-width: ${breakpoint * 1.5}px) {
-//   padding: 0;
-// }
-
 // TODO: https://github.com/storybookjs/design-system/blob/master/src/components/Cardinal.tsx
 const Cardinal = (props: any) => <div {...props} />;
 
@@ -220,14 +121,12 @@ export const AddonItem = ({
   ...props
 }: AddonItemProps) => {
   return (
-    <div className={cn('border border-zinc-300')} {...props}>
+    <div className={cn('rounded border border-zinc-300 p-4')} {...props}>
       {!isLoading && <Link href={`/addons/${name}/`} />}
       <AddonInfo orientation={orientation}>
-        {/* <Image
-        orientation={orientation}
-        isLoading={isLoading}
-        src={icon && icon !== '' ? icon : emptySVG}
-      /> */}
+        <div className="relative h-16 w-16">
+          {icon && <Image src={icon} alt="" fill={true} />}
+        </div>
         <div>
           <Title isLoading={isLoading}>
             <span>{isLoading ? 'loading' : displayName || name}</span>
diff --git a/apps/addon-catalog/next.config.mjs b/apps/addon-catalog/next.config.mjs
index a6440d6b..ea6393b5 100644
--- a/apps/addon-catalog/next.config.mjs
+++ b/apps/addon-catalog/next.config.mjs
@@ -8,6 +8,16 @@ const nextConfig = {
         hostname: 'www.gravatar.com',
         port: '',
       },
+      {
+        protocol: 'https',
+        hostname: 'github.com',
+        port: '',
+      },
+      {
+        protocol: 'https',
+        hostname: '*.githubusercontent.com',
+        port: '',
+      },
     ],
   },
 };