Create blockquote block

backend/components/project/blockquote-block.json

@@ -2,12 +2,16 @@
   "collectionName": "components_project_blockquote_blocks",
   "info": {
     "name": "blockquoteBlock",
-    "icon": "align-right"
+    "icon": "align-right",
+    "description": ""
   },
   "options": {},
   "attributes": {
     "text": {
       "type": "string"
+    },
+    "author": {
+      "type": "string"
     }
   }
 }

frontend/.env.environment

@@ -1 +1 @@
-NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
+NEXT_PUBLIC_STRAPI_URL=https://strapi.inkofpixel.com

frontend/codegen.yml

@@ -1,12 +1,12 @@
 overwrite: true
-schema: "http://localhost:1337/graphql"
+schema: "https://strapi.inkofpixel.com/graphql"
 documents: "./graphql/**/*.graphql"
 generates:
   ./graphql/generated.ts:
     plugins:
       - "typescript"
       - "typescript-operations"
-      - "typescript-document-nodes"
+      - typescript-document-nodes
     config:
       documentMode: "string"
   ./graphql.schema.json:

frontend/config/env.ts

@@ -1,5 +1,5 @@
 export const STRAPI_URL = checkEnv(
-  "http://localhost:1337",
+  "https://strapi.inkofpixel.com",
   "NEXT_PUBLIC_STRAPI_URL"
 );
 

frontend/features/page/sections/CardListSection/blocks/CardBlock.tsx

@@ -15,8 +15,8 @@ export type CardBlockData = BlockTemplateData<
   {
     id: string;
     image?: Nullable<CardImage>;
-    title: string;
-    description: string;
+    title: Nullable<string>;
+    description: Nullable<string>;
     link: LinkData;
   }
 >;

frontend/features/page/sections/ProjectsListSection/ProjectsListSectionBlock.tsx

@@ -48,7 +48,7 @@ export function ProjectListSection({
         flexDir="column"
         w={{
           base: "full",
-          xl: "1200px",
+          xl: "container.xl",
         }}
         px={{
           base: "10",

frontend/features/project/blocks/BlockquoteBlock.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import {
+  Block,
+  BlockComponentProps,
+  BlocksControls,
+  InlineText,
+} from "react-tinacms-inline";
+
+import { Box, Text } from "@chakra-ui/react";
+
+export type BlockquoteBlockData = BlockTemplateData<
+  "blockquote",
+  {
+    id: string;
+    text: string;
+    author: string;
+  }
+>;
+
+export default function BlockquoteBlock() {
+  return (
+    <Box
+      as="blockquote"
+      px="10"
+      py="14"
+      bgColor="rgb(234, 247, 247)"
+      w={{ base: "full", md: "container.md" }}
+      mx="auto"
+      my="8"
+      pos="relative"
+    >
+      <Text
+        as="p"
+        w="full"
+        pos="relative"
+        color="emerald.700"
+        fontWeight="700"
+        fontStyle="italic"
+        _before={{
+          display: "block",
+          content: "“",
+          top: "-10px",
+          left: "-30px",
+          pos: "absolute",
+          color: "emerald.500",
+          opacity: "0.4",
+          fontSize: "8xl",
+        }}
+        _after={{
+          display: "block",
+          bottom: "-50px",
+          content: "”",
+          pos: "absolute",
+          color: "emerald.500",
+          opacity: "0.4",
+          fontSize: "8xl",
+        }}
+      ></Text>
+      <Box
+        as="ul"
+        listStyleType="none"
+        pt="14"
+        textAlign="right"
+        lineHeight="1.8em"
+        mx="auto"
+        my="14"
+        w={{ base: "full", md: "container.md" }}
+        pl="5"
+      >
+        <Box as="li" color="emerald.700" mb="-5">
+          <InlineText name="author" />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+function BlockComponent({ index, data }: BlockComponentProps) {
+  return (
+    <BlocksControls index={index} focusRing={{ offset: 0 }} insetControls>
+      <BlockquoteBlock {...data} />
+    </BlocksControls>
+  );
+}
+
+export const blockquoteBlock: Block = {
+  Component: BlockComponent,
+  template: {
+    label: "Blockquote block",
+    defaultItem: {
+      blocks: [],
+    },
+    fields: [],
+  },
+};