docs: fix carousel showcase (#1090)

Author: maiieul

apps/website/src/routes/docs/styled/carousel/index.mdx

@@ -3,14 +3,13 @@ title: Qwik UI | Styled Carousel Component
 ---
 
 import { statusByComponent } from '~/_state/component-statuses';
-
-<StatusBanner status={statusByComponent.styled.Carousel} />
+import { ShowcaseHero, ShowcaseHeroVertical, ShowcasePagination, ShowcaseStepper } from './showcase-components';
 
 # Carousel
 
 Display and navigate through multiple content items.
 
-<Showcase name="hero" />    
+<ShowcaseHero />    
 
 ## Installation
 
@@ -253,14 +252,14 @@ export const Carousel = {
 
 ## Examples
 
-### Hero
+### Hero Vertical
 
-<Showcase name="hero" />
+<ShowcaseHeroVertical />
 
 ### Pagination
 
-<Showcase name="pagination" />
+<ShowcasePagination />
 
 ### Stepper
 
-<Showcase name="stepper" />
+<ShowcaseStepper />

apps/website/src/routes/docs/styled/carousel/showcase-components.tsx

@@ -0,0 +1,42 @@
+import { component$ } from '@builder.io/qwik';
+import { Showcase } from '~/components/showcase/showcase';
+
+import Hero from './examples/hero';
+import HeroRawCode from './examples/hero.tsx?raw';
+export const ShowcaseHero = component$(() => {
+  return (
+    <Showcase rawCode={HeroRawCode}>
+      <Hero />
+    </Showcase>
+  );
+});
+
+import HeroVertical from './examples/hero-vertical';
+import HeroVerticalRawCode from './examples/hero-vertical.tsx?raw';
+export const ShowcaseHeroVertical = component$(() => {
+  return (
+    <Showcase rawCode={HeroVerticalRawCode}>
+      <HeroVertical />
+    </Showcase>
+  );
+});
+
+import Pagination from './examples/pagination';
+import PaginationRawCode from './examples/pagination.tsx?raw';
+export const ShowcasePagination = component$(() => {
+  return (
+    <Showcase rawCode={PaginationRawCode}>
+      <Pagination />
+    </Showcase>
+  );
+});
+
+import Stepper from './examples/stepper';
+import StepperRawCode from './examples/stepper.tsx?raw';
+export const ShowcaseStepper = component$(() => {
+  return (
+    <Showcase rawCode={StepperRawCode}>
+      <Stepper />
+    </Showcase>
+  );
+});