Create a quotation component and use it in files (#536)

* Create a quotation component and use it in files

* fix build

_posts/complementing-python-with-rust.mdx

@@ -24,11 +24,10 @@ Of the several features that Rust has, I find 3 are particularly relevant to bui
 
 **Zero cost abstractions** is something Rust borrows from C++.
 
-> C++ implementations obey the zero-overhead principle: What you don’t use, you don’t pay for. And further: What you do use, you couldn’t hand code any better
-
-<div class="text-right text-sm text-indigo-400 font-semibold pt-2">
-  Stroustrup
-</div>
+<Quotation
+  author="Stroustrup"
+  quotation="C++ implementations obey the zero-overhead principle: What you don’t use, you don’t pay for. And further: What you do use, you couldn’t hand code any better"
+/>
 
 So this language principle would mean that, for features of the language that I don’t use, there should be no penalty. For features of the language that I do use, it shouldn’t be possible to do any better by going down in the stack (i.e. by writing generated machine instructions, for example). One obvious evidence of this is in the trait implementation. Traits is one of the cornerstone’s of the abstraction model in Rust. It allows us to add behaviour to types in a variety of cases. But the design principle and the implementation of this feature guarantees that there is no penalty/overhead for using Traits. See this [excellent post](https://blog.rust-lang.org/2015/05/11/traits.html) for details.
 

_posts/first-look-at-golang.mdx

@@ -104,11 +104,10 @@ func serveFile(w ResponseWriter,
 
 ### Stdlib
 
-> Talk small and carry a big class library
-
-<div class="text-right text-sm text-indigo-400 font-semibold pt-2">
-  James Robertson, about Smalltalk.
-</div>
+<Quotation
+  author="James Robertson about Smalltalk"
+  quotation="Talk small and carry a big class library"
+/>
 
 Go is frequently said to be a modern language. This is evident in the standard libraries that come with the language. compress, crypt, html, etc are all libraries any program today would invariably use. In fact, you will notice that the static file server earlier is really tiny. It is due to the fact that stdlib has a complete implementation of a HTTP server with parts that can be easily customized.
 

_posts/nodejs-vs-django.mdx

@@ -8,22 +8,16 @@ ogImage:
   url: 'https://user-images.githubusercontent.com/222507/109427622-7ad93080-79f3-11eb-8411-519e3a696f6f.png'
 ---
 
-<Card className="max-w-[400px]">
-  <CardHeader className="flex gap-3">
-    <div className="flex flex-col">
-      <p className="text-md">A mad tea party, Alice in Wonderland</p>
-    </div>
-  </CardHeader>
-  <Divider />
-  <CardBody>
-    <p>
-      The table was a large one, but the three were all crowded together at one
-      corner of it: 'No room! No room!' they cried out when they saw Alice
-      coming. 'There’s PLENTY of room!' said Alice indignantly, and she sat down
-      in a large arm-chair at one end of the table.
-    </p>
-  </CardBody>
-</Card>
+<Quotation
+  reference="A mad tea party, Alice in Wonderland"
+  author="Lewis Caroll"
+  quotation="
+    The table was a large one, but the three were all crowded together at one
+    corner of it: 'No room! No room!' they cried out when they saw Alice
+    coming. 'There’s PLENTY of room!' said Alice indignantly, and she sat down
+    in a large arm-chair at one end of the table.
+  "
+/>
 
 We have been using both Django and Nodejs at [WWStay](https://wwstay.com/).
 We use Django for the customer dashboard and backoffice applications.

components/post-body.tsx

@@ -1,26 +1,12 @@
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  Divider,
-  Link,
-  Image,
-} from '@nextui-org/react'
+import Quotation from './quotation'
 
 type PostBodyProps = {
   source: MDXRemoteSerializeResult
 }
 
 const components = {
-  Card,
-  CardBody,
-  CardHeader,
-  CardFooter,
-  Divider,
-  Link,
-  Image,
+  Quotation,
 }
 
 const PostBody: React.FC<PostBodyProps> = ({ source }) => {

components/quotation.tsx

@@ -0,0 +1,33 @@
+interface QuotationProps {
+  author: string
+  quotation: string
+  reference?: string
+}
+
+const Quotation: React.FC<QuotationProps> = ({
+  author,
+  quotation,
+  reference,
+}) => {
+  return (
+    <div className="relative flex flex-col rounded-xl bg-white bg-clip-border text-gray-700 shadow-md">
+      <div className="p-6">
+        {reference && (
+          <div>
+            <h5 className="mb-2 block font-sans font-semibold leading-snug">
+              {reference}
+            </h5>
+            <hr className="border-gray-300 m-1 lg:m-1" />
+          </div>
+        )}
+        <div className="flex float-right">{author}</div>
+        <div className="clear-both"></div>
+        <p className="block font-sans text-base font-light leading-relaxed text-inherit antialiased">
+          {quotation}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Quotation