init

content/templates/react/components/article/preview/mini.tsx

@@ -0,0 +1,80 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { Title1 } from "@/typography";
+import { createTheme } from "@/theme/create";
+import { ThemeProvider } from "@/theme/provider";
+import { Article } from "types";
+
+type Props = {
+  article: Article;
+};
+
+const Wrapper = styled.a`
+  position: relative;
+  margin: 15px;
+  cursor: pointer;
+  display: flex;
+  width: 220px;
+  height: 200px;
+
+  @media only screen and (max-width: 700px) {
+    width: 100%;
+  }
+`;
+
+const Title = styled(Title1)`
+  line-height: 20px;
+  font-size: 20px;
+  padding: 5px 5px;
+  font-family: "Black Ops One", sans-serif;
+  margin: 5px 0;
+  background: ${({ theme }) => theme.colors.background};
+`;
+
+const MetaWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 10px;
+  max-width: 220px;
+  position: absolute;
+`;
+
+const AsideWrapper = styled.aside<{
+  image?: string;
+}>`
+  background: ${({ theme }) => theme.colors.primary};
+  background-size: cover;
+  background-position: center;
+  ${({ image }) => (image ? `background-image: url(${image});` : "")}
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+}
+`;
+
+const MiniArticlePreview: React.FC<Props> = ({ article }) => {
+  const theme = useMemo(
+    () =>
+      createTheme({
+        baseColor: article.color,
+      }),
+    [article.color]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <Wrapper href={`/articles/${article.slug}`}>
+        <AsideWrapper image={article.thumbUrl} />
+        <MetaWrapper>
+          {article.title.split(" ").map((word, index) => (
+            <Title key={index}>{word}</Title>
+          ))}
+        </MetaWrapper>
+      </Wrapper>
+    </ThemeProvider>
+  );
+};
+
+export { MiniArticlePreview };