init

components/ParagraphCard/ParagraphCard.tsx

@@ -0,0 +1,98 @@
+import { Badge, Card, createStyles, Group, Image, rem, Text, UnstyledButton } from "@mantine/core";
+import dayjs from "dayjs";
+import { useRouter } from "next/router";
+
+import DayJS from "../../lib/dayjs";
+const useStyles = createStyles((theme) => ({
+  card: {
+    position: "relative",
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
+  },
+
+  rating: {
+    position: "absolute",
+    top: theme.spacing.xs,
+    right: rem(12),
+    pointerEvents: "none",
+  },
+
+  title: {
+    display: "block",
+    marginTop: theme.spacing.md,
+    marginBottom: rem(5),
+  },
+
+  action: {
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
+    ...theme.fn.hover({
+      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
+    }),
+  },
+
+  footer: {
+    marginTop: theme.spacing.md,
+  },
+}));
+
+interface ArticleCardProps {
+  cover?: string;
+  id: string;
+  title: string;
+  description?: string;
+  author: string;
+  time: Date;
+}
+
+export function ParagraphCard({
+  className,
+  cover,
+  id,
+  title,
+  description,
+  time,
+  author,
+  ...others
+}: ArticleCardProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof ArticleCardProps>) {
+  const router = useRouter();
+  const { classes, cx } = useStyles();
+  const linkProps = { href: `/paragraph/${id}` };
+
+  return (
+    <Card withBorder radius="md" className={cx(classes.card, className)} {...others}>
+      {cover && (
+        <Card.Section>
+          <a {...linkProps}>
+            <Image src={cover} height={180} />
+          </a>
+        </Card.Section>
+      )}
+
+      <Text className={classes.title} fw={500} component="a" {...linkProps}>
+        {title}
+      </Text>
+
+      <Text fz="sm" color="dimmed" lineClamp={4}>
+        {description}
+      </Text>
+
+      <Group position="apart" className={classes.footer}>
+        <UnstyledButton
+          onClick={() =>
+            router.push({
+              pathname: "/author/[name]",
+              query: { name: author },
+            })
+          }
+        >
+          <Badge radius="md">
+            <Text fz="sm" inline>
+              {author}
+            </Text>
+          </Badge>
+        </UnstyledButton>
+
+        <Text>{DayJS.to(dayjs(time))}</Text>
+      </Group>
+    </Card>
+  );
+}