Development/user profile

apps/user-profile/src/components/common/Card/Card.js

@@ -1,107 +1,10 @@
-import React from "react";
-import { useRouter } from "next/router";
-
-import Link from "next/link";
-import {
-  Container,
-  Content,
-  ImageHolder,
-  DataHolder,
-  Image,
-  Description,
-  SecondaryText,
-  AttachmentsContainer,
-  ActionsContainer,
-  TagsContainer,
-} from "./StyledCard";
-import Tag from "../Tag";
-
-import RainbowBar from "../RainbowBar";
-
-import CardTitle from "./CardTitle";
-import Attachments from "./Attachments";
-
-/**
- * Props:
- *  - title:
- *  - description:
- *  - imageSrc:
- *  - size:
- *  - href:
- *  - onClick:
- *  - attachments:
- *  - textAlignment: changes text-alignment if passed otherwise it defaults to left text-alignment
- *  - imageHolderBackgroundColor: changes bgColor if passed otherwise it defaults to black bgColor
- *  - cardFlexDirection: changes flex-direction if existed otherwise delete flex-direction
- */
-export default function Card(props) {
-  const router = useRouter();
-
+import Header from './Header';
+function Card({ title, children }) {
   return (
-    <Container
-      style={props.style}
-      size={props.size}
-      key={props.i}
-      onClick={props.cardData.onClick}
-    >
-      {props.noImage ? "" : 
-        <ImageHolder
-          size={props.size}
-          bgColor={props.cardData.imageHolderBackgroundColor}
-        >
-          {props.cardData.tags && (
-            <TagsContainer>
-              {props.cardData.tags.map((tag, i) => (
-                <Tag filled text={tag} key={i} />
-              ))}
-            </TagsContainer>
-          )}
-          {props.isLinkingInside ? (
-            <Link href={`${router.pathname}/${props.cardData.href}`} passHref>
-              <a rel="noopener noreferrer">
-                <Image alt="" imageSrc={props.cardData.imageSrc} />
-              </a>
-            </Link>
-          ) : (
-            <a
-              href={props.cardData.href}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Image alt="" imageSrc={props.cardData.imageSrc} />
-            </a>
-          )}
-        </ImageHolder>
-      }
-
-      {props.size === "large" ? "" : (<RainbowBar height=".3rem" />)}
-
-      <Content
-        size={props.size}
-        textAlignment={props.cardData.textAlignment}
-        flexDirection={props.cardData.flexDirection}
-      >
-
-        <DataHolder size={props.size}>
-          <CardTitle
-            data={props.cardData}
-            isLinkingInside={props.isLinkingInside}
-            pathname={router.pathname}
-          />
-          {props.cardData.secondaryText && (
-            <SecondaryText>{props.cardData.secondaryText}</SecondaryText>
-          )}
-          <Description>{props.cardData.description}</Description>
-        </DataHolder>
-        {props.cardData.attachments && (
-          <AttachmentsContainer>
-            <Attachments data={props.cardData.attachments} />
-          </AttachmentsContainer>
-        )}
-        {props.cardData.actions && (
-          <ActionsContainer>{props.cardData.actions}</ActionsContainer>
-        )}
-      </Content>
-    </Container>
+    <div className="flex flex-col shadow-lg w-full h-full bg-white">
+      <Header title={title} /> <div className="px-8 pb-10 pt-6">{children}</div>
+    </div>
   );
 }
+
+export default Card;

apps/user-profile/src/components/common/Card/Header/Header.js

@@ -0,0 +1,17 @@
+import { Typography } from '@devlaunchers/components/components/atoms';
+import EditButton from './../../../common/EditButton';
+
+function Header({ title, showEdit }) {
+  return title ? (
+    <div className="flex justify-between px-8 pt-5 pb-2 items-center border-b-2 border-[#f9f9f9]">
+      <Typography type="h3" className="m-0 p-0">
+        {title}
+      </Typography>
+      <EditButton />
+    </div>
+  ) : (
+    <></>
+  );
+}
+
+export default Header;

apps/user-profile/src/components/common/Card/Header/index.js

@@ -0,0 +1 @@
+export { default } from './Header';

apps/user-profile/src/components/common/Card/index.js

@@ -1 +1 @@
-export { default } from "./Card";
+export { default } from './Card';

apps/user-profile/src/components/common/CardGroup/CardGroup.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Card from "../Card/Card";
+import Card from "../OldCard/Card";
 import { Collection, CollectionTitle } from "./StyledCardGroup";
 
 export default function CardGroup(props) {

apps/user-profile/src/components/common/EditButton/EditButton.js

@@ -0,0 +1,13 @@
+import cog from './../../../images/icons/outlined-cog.svg';
+import { Typography } from '@devlaunchers/components/components/atoms';
+
+function EditButton() {
+  return (
+    <div className="flex gap-2">
+      <img src={cog} className="w-4" />
+      <Typography type="p">Edit</Typography>
+    </div>
+  );
+}
+
+export default EditButton;

apps/user-profile/src/components/common/EditButton/index.js

@@ -0,0 +1 @@
+export { default } from './EditButton';

apps/user-profile/src/components/common/Card/Attachments/Attachments.js → apps/user-profile/src/components/common/OldCard/Attachments/Attachments.js

@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useState } from 'react';
 import {
   AttachmentLink,
   AttachmentLinkContainer,
   AttachmentImg,
   AttachmentImgContainer,
-} from "./StyledAttachments";
+} from './StyledAttachments';
 
 export default function Attachments(props) {
   const [showAttachment, setShowAttachment] = useState(false);

apps/user-profile/src/components/common/Card/Attachments/StyledAttachments.js → apps/user-profile/src/components/common/OldCard/Attachments/StyledAttachments.js

@@ -1,8 +1,8 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const AttachmentLink = styled.a.attrs(() => ({
-  target: "_blank",
-  rel: "noopener noreferrer",
+  target: '_blank',
+  rel: 'noopener noreferrer',
 }))`
   color: lightslategray;
   font-size: medium;
@@ -23,8 +23,8 @@ export const AttachmentLinkContainer = styled.div`
 `;
 
 export const AttachmentImg = styled.img.attrs(() => ({
-  src: "images/Attachment.png?webp",
-  alt: "attachment-icon",
+  src: 'images/Attachment.png?webp',
+  alt: 'attachment-icon',
 }))`
   width: 5vh;
   height: 5vh;

apps/user-profile/src/components/common/OldCard/Attachments/index.js

@@ -0,0 +1 @@
+export { default } from './Attachments';

apps/user-profile/src/components/common/OldCard/Card.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+
+import Link from 'next/link';
+import {
+  Container,
+  Content,
+  ImageHolder,
+  DataHolder,
+  Image,
+  Description,
+  SecondaryText,
+  AttachmentsContainer,
+  ActionsContainer,
+  TagsContainer,
+} from './StyledCard';
+import Tag from '../Tag';
+
+import RainbowBar from '../RainbowBar';
+
+import CardTitle from './CardTitle';
+import Attachments from './Attachments';
+
+/**
+ * Props:
+ *  - title:
+ *  - description:
+ *  - imageSrc:
+ *  - size:
+ *  - href:
+ *  - onClick:
+ *  - attachments:
+ *  - textAlignment: changes text-alignment if passed otherwise it defaults to left text-alignment
+ *  - imageHolderBackgroundColor: changes bgColor if passed otherwise it defaults to black bgColor
+ *  - cardFlexDirection: changes flex-direction if existed otherwise delete flex-direction
+ */
+export default function Card(props) {
+  const router = useRouter();
+
+  return (
+    <Container
+      style={props.style}
+      size={props.size}
+      key={props.i}
+      onClick={props.cardData.onClick}
+    >
+      {props.noImage ? (
+        ''
+      ) : (
+        <ImageHolder
+          size={props.size}
+          bgColor={props.cardData.imageHolderBackgroundColor}
+        >
+          {props.cardData.tags && (
+            <TagsContainer>
+              {props.cardData.tags.map((tag, i) => (
+                <Tag filled text={tag} key={i} />
+              ))}
+            </TagsContainer>
+          )}
+          {props.isLinkingInside ? (
+            <Link href={`${router.pathname}/${props.cardData.href}`} passHref>
+              <a rel="noopener noreferrer">
+                <Image alt="" imageSrc={props.cardData.imageSrc} />
+              </a>
+            </Link>
+          ) : (
+            <a
+              href={props.cardData.href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Image alt="" imageSrc={props.cardData.imageSrc} />
+            </a>
+          )}
+        </ImageHolder>
+      )}
+
+      {props.size === 'large' ? '' : <RainbowBar height=".3rem" />}
+
+      <Content
+        size={props.size}
+        textAlignment={props.cardData.textAlignment}
+        flexDirection={props.cardData.flexDirection}
+      >
+        <DataHolder size={props.size}>
+          <CardTitle
+            data={props.cardData}
+            isLinkingInside={props.isLinkingInside}
+            pathname={router.pathname}
+          />
+          {props.cardData.secondaryText && (
+            <SecondaryText>{props.cardData.secondaryText}</SecondaryText>
+          )}
+          <Description>{props.cardData.description}</Description>
+        </DataHolder>
+        {props.cardData.attachments && (
+          <AttachmentsContainer>
+            <Attachments data={props.cardData.attachments} />
+          </AttachmentsContainer>
+        )}
+        {props.cardData.actions && (
+          <ActionsContainer>{props.cardData.actions}</ActionsContainer>
+        )}
+      </Content>
+    </Container>
+  );
+}

apps/user-profile/src/components/common/Card/CardTitle/CardTitle.js → apps/user-profile/src/components/common/OldCard/CardTitle/CardTitle.js

@@ -1,8 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
-import React from "react";
+import Link from 'next/link';
+import Image from 'next/image';
+import React from 'react';
 
-import { Heading, Title } from "./StyledCardTitle";
+import { Heading, Title } from './StyledCardTitle';
 
 export default function CardTitle({
   data,
@@ -36,7 +36,7 @@ export default function CardTitle({
             alt="github"
             height="32"
             width="32"
-            src={"images/GitHub-Mark-Light-32px.png?webp"}
+            src={'images/GitHub-Mark-Light-32px.png?webp'}
           />
         </a>
       )}

apps/user-profile/src/components/common/Card/CardTitle/StyledCardTitle.js → apps/user-profile/src/components/common/OldCard/CardTitle/StyledCardTitle.js

@@ -1,23 +1,23 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 export const Heading = styled.div`
   display: flex;
   align-items: flex-start;
   width: 100%;
   font-size: 1.4rem;
-  text-align: ${({ cardTitleAlignment }) => cardTitleAlignment || "left"};
-  font-size: ${({ cardTitleSize }) => cardTitleSize || "1.4rem"};
+  text-align: ${({ cardTitleAlignment }) => cardTitleAlignment || 'left'};
+  font-size: ${({ cardTitleSize }) => cardTitleSize || '1.4rem'};
 
   ${({ cardTitleUnderline }) => {
     const { color, thickness, type } = cardTitleUnderline;
-    return `border-bottom: ${color || "#00000000"} ${thickness || "0.15rem"} ${
-      type || "solid"
+    return `border-bottom: ${color || '#00000000'} ${thickness || '0.15rem'} ${
+      type || 'solid'
     };`;
   }}
 `;
 
 export const Title = styled.a`
-  font-family: "Abel", sans-serif;
+  font-family: 'Abel', sans-serif;
   color: black;
   font-weight: bold;
   flex: 1;

apps/user-profile/src/components/common/OldCard/CardTitle/index.js

@@ -0,0 +1 @@
+export { default } from './CardTitle';