label = "Opinion"

Author: dphuang2

blog/2023-12-11-grpc/grpc.mdx

@@ -131,7 +131,7 @@ service-to-service developer experience and performance remarkably.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑
@@ -185,7 +185,7 @@ confusing for quickly building applications.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑
@@ -277,7 +277,7 @@ authentication and browser support are complicated by gRPC.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑
@@ -344,7 +344,7 @@ The world is built on standards and REST is no exception.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑
@@ -391,7 +391,7 @@ services.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑
@@ -441,7 +441,7 @@ lot of open source tooling that needs to be built.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator />
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Key Takeaway 🔑

blog/2024-04-29-htmx/htmx.mdx

@@ -68,7 +68,7 @@ excited, and others are just curious.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 To analyze how developers truly feel about HTMX, I went to where developers
@@ -145,7 +145,7 @@ of building user interfaces.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Takeaway
@@ -190,7 +190,7 @@ might be ignoring the modern best practices of building web applications.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Takeaway
@@ -251,7 +251,7 @@ engineerings teams less productive and codebases more complex.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Takeaway
@@ -304,7 +304,7 @@ HTMX is only good for simple use-cases.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Takeaway
@@ -395,7 +395,7 @@ developers of the application.
   </CarouselContent>
   <CarouselPrevious />
   <CarouselNext />
-  <CarouselIndicator/>
+  <CarouselIndicator label="Opinion"/>
 </Carousel>
 
 #### Takeaway

src/components/ui/carousel.tsx

@@ -292,8 +292,8 @@ CarouselNext.displayName = "CarouselNext";
 
 const CarouselIndicator = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & { label?: string }
+>(({ className, label = "Slide", ...props }, ref) => {
   const { current, total } = useCarousel();
 
   return (
@@ -302,7 +302,7 @@ const CarouselIndicator = React.forwardRef<
       className={cn("text-center text-sm text-muted-foreground", className)}
       {...props}
     >
-      Slide {current} of {total}
+      {label} {current} of {total}
     </div>
   );
 });