Added card component

content-scripts/components/Card.tsx

@@ -0,0 +1,79 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import jsx from "texsaur";
+interface CardProps {
+    id: string;
+    title?: string;
+    description?: string;
+    imgSrc?: string;
+    subtitles?: string[];
+    button?: Element;
+}
+
+const Card: JSX.Component<CardProps> = ({
+    id,
+    title,
+    description,
+    imgSrc,
+    subtitles,
+    button,
+}) => {
+    const finalClassName = "se-card";
+    return (
+        <div className={finalClassName} id={id}>
+            <div className="container">
+                {title && description && imgSrc && subtitles && button ? (
+                    <div className="details">
+                        {imgSrc ? (
+                            <img className="img" src={imgSrc}></img>
+                        ) : (
+                            " "
+                        )}
+                        {title ? <h2 className="title">{title}</h2> : " "}
+                        {subtitles && subtitles.length > 0
+                            ? subtitles.map((subtitle) => {
+                                  return (
+                                      <div className="subtitles">
+                                          {subtitle}
+                                      </div>
+                                  );
+                              })
+                            : " "}
+                        {description ? (
+                            <p className="description">{description}</p>
+                        ) : (
+                            ""
+                        )}
+                        {button ? button : " "}
+                    </div>
+                ) : (
+                    <div className="detailsalt">
+                        {imgSrc ? (
+                            <img className="img" src={imgSrc}></img>
+                        ) : (
+                            " "
+                        )}
+                        <div className="other">
+                            <div className="textbox">
+                                {title ? (
+                                    <h2 className="title">{title}</h2>
+                                ) : (
+                                    " "
+                                )}
+                                {description ? (
+                                    <p className="description">{description}</p>
+                                ) : (
+                                    " "
+                                )}
+                            </div>
+                            <div className="buttonbox">
+                                {button ? button : " "}
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Card;

content-scripts/pages/components_page.tsx

@@ -3,10 +3,9 @@ import jsx from "texsaur";
 import Button from "../components/Button";
 import { Table } from "../components/Table";
 import Icon from "../components/Icon";
+import Card from "../components/Card";
 import { Accordion } from "../components/Accordion";
-
-const components = ["Icon", "Button", "Table", "Accordion"];
-
+const components = ["Icon", "Button", "Table", "Cards", "Accordion"];
 export function createComponentsPage() {
     // TODO: remove this check
     if (!document.location.href.toLowerCase().includes("components")) {
@@ -209,6 +208,62 @@ export function createComponentsPage() {
                         ]}
                     />
                 </Component>
+                {/* Card */}
+                <Component
+                    name="Card"
+                    description="Our card component, that allows the creation of cards with different styles."
+                    code={`<Card 
+id="1"
+title="Default Card"
+description="I have all attributes possible (i.e; image, title, description, subtitles and a button)"
+subtitles={["One", "Two"]}
+imgSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThD4or2R-Tpyokw8NzJyn-LXt6R8YK9Sih5w&s"
+button ={<Button title="Button" variant="solid" size="sm" color="primary"/>}
+/>
+`}
+                >
+                    <Card
+                        id="1"
+                        title="Default Card"
+                        description="I have all attributes possible (i.e; image, title, description, subtitles and a button)"
+                        subtitles={["One", "Two"]}
+                        imgSrc="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThD4or2R-Tpyokw8NzJyn-LXt6R8YK9Sih5w&s"
+                        button={
+                            <Button
+                                title="Button"
+                                variant="solid"
+                                size="sm"
+                                color="primary"
+                            />
+                        }
+                    />
+                    <Card
+                        id="2"
+                        title="Alt Card 1"
+                        description="I don't have subtitles"
+                        imgSrc="https://preview.redd.it/i-once-found-a-silly-cat-picture-in-black-and-white-v0-tzn8uvux7vmd1.png?width=236&format=png&auto=webp&s=f17ce524ff01e70fce304712ca5bf58a194b5fbe"
+                        button={
+                            <Button
+                                title="Button"
+                                variant="solid"
+                                size="sm"
+                                color="primary"
+                            />
+                        }
+                    />
+                    <Card
+                        id="3"
+                        title="Alt Card 2"
+                        description="I don't have an image nor subtitles"
+                        button={
+                            <Button
+                                icon="ri-notification-line"
+                                radius="full"
+                                color="primary"
+                            />
+                        }
+                    />
+                </Component>
 
                 {/* Accordion */}
                 <Component

css/components.css

@@ -130,28 +130,96 @@
     }
 }
 
-.se-card-header {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    cursor: pointer;
-}
-
-.se-card-expand-button {
-    background: inherit !important;
-    border: none !important;
-    padding: none !important;
-    margin: none !important;
-    box-shadow: none !important;
-}
-
-.se-card-expand-button:hover {
-    background: inherit !important;
-}
+/* Card Component */
+.se-card {
+    .container {
+        background-color: #eeeeee;
+        max-width: 250px;
+        border-radius: 20px;
+        color: #8c2d19;
+    }
+    .details {
+        padding-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 16px;
+
+        .title {
+            font-size: 24px;
+            font-weight: 600;
+            color: #8c2d19;
+            margin-top: 8px;
+            margin-left: 8px;
+            margin-bottom: 4px;
+        }
+        .subtitles {
+            padding: 5px;
+            background-color: #8c2d19;
+            border-radius: 12px;
+            margin-left: 8px;
+            font-size: 15px;
+            font-weight: 400;
+            color: #eeeeee;
+            display: inline-block;
+            white-space: nowrap;
+        }
+        .description {
+            font-size: 14px;
+            color: #000000;
+            line-height: 150%;
+            margin-left: 8px;
+            margin-right: 8px;
+        }
+        .img {
+            width: 100%;
+            border-radius: 12px;
+            height: 214px;
+            object-fit: cover;
+        }
+        .se-button {
+            margin: 0% auto;
+        }
+    }
 
-.se-expandable-card-wrapper {
-    overflow: hidden;
-    transition: max-height 300ms ease-in-out;
+    .detailsalt {
+        .img {
+            width: 100%;
+            border-top-left-radius: 12px;
+            border-top-right-radius: 12px;
+            height: 150px;
+            width: 250px;
+            object-fit: cover;
+        }
+        .other {
+            display: flex;
+            .textbox {
+                padding: 8px;
+                .title {
+                    font-size: 20px;
+                    font-weight: 600;
+                    margin: 0% auto;
+                    margin-left: 8px;
+                }
+                .description {
+                    font-size: 14px;
+                    color: grey;
+                    line-height: 150%;
+                    margin-top: 0px;
+                    margin-bottom: 0px;
+                    margin-left: 8px;
+                    margin-right: 8px;
+                }
+            }
+            .buttonbox {
+                padding-left: 0px;
+                padding-right: 8px;
+                padding-top: 8px;
+                padding-bottom: 8px;
+                .se-button {
+                    margin: 0% auto;
+                    margin-top: 12px;
+                }
+            }
+        }
+    }
 }