first commit

2026-09-11 15:49:41 +08:00
commit 5b69bc818a
98 changed files with 30551 additions and 0 deletions
@@ -0,0 +1,140 @@
+import { Box, Container, Grid, HStack, Heading, Image, Stack, Text } from "@chakra-ui/react";
+import { ArrowRight, CalendarDays } from "lucide-react";
+import type { Settings } from "../../data/content";
+import { Footer } from "./Footer";
+import { Header } from "./Header";
+import { Provider } from "./Provider";
+import { WhatsAppFab } from "./WhatsAppFab";
+
+export type BlogListItem = {
+  slug: string;
+  title: string;
+  excerpt: string | null;
+  coverImage: string | null;
+  dateLabel: string;
+};
+
+export function BlogIndex({ posts, settings }: { posts: BlogListItem[]; settings: Settings }) {
+  const [featured, ...rest] = posts;
+
+  return (
+    <Provider>
+      <Header settings={settings} />
+      <Box as="main" py={{ base: 14, md: 20 }} minH="60vh">
+        <Container maxW="1200px" px={{ base: 5, md: 8 }}>
+          <Stack gap="5" mb={{ base: 10, md: 14 }} pb={{ base: 8, md: 10 }} borderBottomWidth="2px" borderColor="ink">
+            <HStack gap="3" color="brand.700">
+              <Box w="8" h="2px" bg="brand.500" />
+              <Text fontSize="xs" fontWeight="700" letterSpacing="0.2em">
+                BLOG
+              </Text>
+            </HStack>
+            <Heading as="h1" fontSize={{ base: "4xl", md: "6xl" }} fontWeight="900" letterSpacing="-0.01em" color="ink">
+              太陽能知識庫
+            </Heading>
+            <Text fontSize={{ base: "md", md: "lg" }} color="fg.muted" maxW="2xl">
+              村屋太陽能嘅實用資訊、安裝心得同回本分析，幫你更了解點樣善用天台。
+            </Text>
+          </Stack>
+
+          {posts.length === 0 ? (
+            <Text color="fg.muted">暫時未有文章，敬請期待。</Text>
+          ) : (
+            <Stack gap={{ base: 10, md: 14 }}>
+              {/* 最新文章 featured */}
+              <Grid
+                asChild
+                templateColumns={{ base: "1fr", md: "1fr 1fr" }}
+                gap={{ base: 5, md: 10 }}
+                alignItems="center"
+                role="group"
+                cursor="pointer"
+              >
+                <a href={`/blog/${featured.slug}`}>
+                  {featured.coverImage && (
+                    <Box overflow="hidden">
+                      <Image
+                        src={featured.coverImage}
+                        alt={featured.title}
+                        w="full"
+                        aspectRatio="16 / 10"
+                        objectFit="cover"
+                        transition="transform .5s"
+                        _groupHover={{ transform: "scale(1.03)" }}
+                      />
+                    </Box>
+                  )}
+                  <Stack gap="3">
+                    <HStack gap="2" fontSize="xs" letterSpacing="0.1em" color="fg.muted" fontWeight="medium">
+                      <CalendarDays size={13} />
+                      {featured.dateLabel}
+                    </HStack>
+                    <Heading as="h2" fontSize={{ base: "xl", md: "3xl" }} fontWeight="900" color="ink" lineHeight="1.3" _groupHover={{ color: "brand.700" }} transition="color .2s">
+                      {featured.title}
+                    </Heading>
+                    {featured.excerpt && (
+                      <Text fontSize="sm" color="fg.muted" lineHeight="1.9">
+                        {featured.excerpt}
+                      </Text>
+                    )}
+                    <Text color="brand.700" fontWeight="600" fontSize="sm">
+                      閱讀更多 <ArrowRight size={14} style={{ display: "inline", verticalAlign: "-2px" }} />
+                    </Text>
+                  </Stack>
+                </a>
+              </Grid>
+
+              {/* 其餘文章：髮絲線清單 */}
+              {rest.length > 0 && (
+                <Stack gap="0" borderTopWidth="1px" borderColor="border.subtle">
+                  {rest.map((post) => (
+                    <Grid
+                      key={post.slug}
+                      asChild
+                      templateColumns={{ base: "1fr", md: "140px 1fr auto" }}
+                      gap={{ base: 2, md: 8 }}
+                      alignItems={{ md: "center" }}
+                      py={{ base: 5, md: 6 }}
+                      borderBottomWidth="1px"
+                      borderColor="border.subtle"
+                      role="group"
+                      cursor="pointer"
+                    >
+                      <a href={`/blog/${post.slug}`}>
+                        <HStack gap="2" fontSize="xs" letterSpacing="0.08em" color="fg.muted" fontWeight="medium">
+                          <CalendarDays size={13} />
+                          {post.dateLabel}
+                        </HStack>
+                        <Stack gap="1">
+                          <Heading as="h2" fontSize={{ base: "lg", md: "xl" }} fontWeight="700" color="ink" lineHeight="1.4" _groupHover={{ color: "brand.700" }} transition="color .2s">
+                            {post.title}
+                          </Heading>
+                          {post.excerpt && (
+                            <Text fontSize="sm" color="fg.muted" lineHeight="1.7" lineClamp={2}>
+                              {post.excerpt}
+                            </Text>
+                          )}
+                        </Stack>
+                        <Box
+                          color="brand.700"
+                          opacity={{ base: 1, md: 0 }}
+                          transform={{ md: "translateX(-6px)" }}
+                          transition="all .2s"
+                          _groupHover={{ opacity: 1, transform: "translateX(0)" }}
+                        >
+                          <ArrowRight size={20} />
+                        </Box>
+                      </a>
+                    </Grid>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          )}
+        </Container>
+      </Box>
+      <Footer settings={settings} />
+      <WhatsAppFab settings={settings} />
+    </Provider>
+  );
+}