🎉 创世提交

src/components/HomeCarousel/index.tsx

@@ -0,0 +1,53 @@
+import { Component } from 'solid-js';
+import { Skeleton } from "@/components/ui/skeleton";
+import BaseCarousel from "@/components/ui/base-carousel";
+import { HomeLink } from '@/types/home';
+
+interface HomeCarouselProps {
+  slides?: HomeLink[];
+  loading?: boolean;
+}
+
+const HomeCarousel: Component<HomeCarouselProps> = (props) => {
+  const renderItem = (slide: NonNullable<HomeCarouselProps['slides']>[number]) => (
+    <a 
+      href={slide.linkUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="text-center w-full h-[120px] relative bg-cover bg-center bg-no-repeat block" 
+      style={{"background-image": `url(${slide.imgUrl})`}}
+    >
+      {/* 添加一个半透明的遮罩层使文字更易读 */}
+      <div class="absolute inset-0 bg-black/50" />
+      <div class="relative z-10 p-4 flex flex-col justify-center h-full">
+        <h3 class="text-xl font-semibold mb-2 break-words text-white">{slide.name}</h3>
+        <p class="text-sm text-gray-200 break-words">{slide.more}</p>
+      </div>
+    </a>
+  );
+
+  const renderSkeleton = () => (
+    <div class="text-center w-full h-full relative">
+      <div class="absolute inset-0">
+        <Skeleton class="w-full h-full" />
+      </div>
+      <div class="relative z-10 p-4 flex flex-col justify-center h-full">
+        <div class="mb-2">
+          <Skeleton height={24} width={60} class="mx-auto" />
+        </div>
+        <Skeleton height={16} width={80} class="mx-auto" />
+      </div>
+    </div>
+  );
+
+  return (
+    <BaseCarousel
+      items={props.slides}
+      loading={props.loading}
+      renderItem={renderItem}
+      renderSkeleton={renderSkeleton}
+    />
+  );
+};
+
+export default HomeCarousel;