Change views to impressions with the icon

Author: mac

app/tool/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { IconVote, IconChartBar, IconArrowTopRight, IconEye } from '@/components/Icons';
+import { IconVote, IconChartBar, IconArrowTopRight, IconFire } from '@/components/Icons';
 import ButtonUpvote from '@/components/ui/ButtonUpvote';
 import { Gallery, GalleryImage } from '@/components/ui/Gallery';
 import LinkShiny from '@/components/ui/LinkShiny';
@@ -106,8 +106,8 @@ export default async function Page({ params: { slug } }: { params: { slug: strin
     },
     {
       count: product.views_count,
-      icon: <IconEye />,
-      label: 'Views',
+      icon: <IconFire />,
+      label: 'Impressions',
     },
     // TODO add calculation of rank in week and day
     {

components/Icons/IconFire.tsx

@@ -0,0 +1,23 @@
+import mergeTW from '@/utils/mergeTW';
+
+export const IconFire = ({ className = '' }: { className?: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={1.5}
+    stroke="currentColor"
+    className={mergeTW(`w-5 h-5 ${className}`)}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z"
+    />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z"
+    />
+  </svg>
+);

components/Icons/index.ts

@@ -16,3 +16,4 @@ export * from './IconTrash';
 export * from './IconCalendar';
 export * from './IconEye';
 export * from './IconInformationCircle';
+export * from './IconFire';

components/ui/ToolCard/Tool.views.tsx

@@ -5,7 +5,7 @@ export default ({ className, count }: { className?: string; count: number }) =>
     <span className="block flex-none w-1 h-1 bg-slate-500 rounded-full"></span>
     <div className="flex items-center gap-x-1">
       {count}
-      <span>Views</span>
+      <span>Impressions</span>
     </div>
   </div>
 );

middleware.ts

@@ -7,7 +7,9 @@ export async function middleware(req: NextRequest): Promise<NextResponse> {
   const res = NextResponse.next();
   const supabase = createMiddlewareClient<Database>({ req, res });
 
-  const { data: { session } } = await supabase.auth.getSession(); // destructure the data object to obtain the session object
+  const {
+    data: { session },
+  } = await supabase.auth.getSession(); // destructure the data object to obtain the session object
   if (session === null) return NextResponse.redirect(new URL('/login', req.nextUrl));
   return res;
 }