diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 1c4a206..0000000 --- a/.babelrc +++ /dev/null @@ -1,27 +0,0 @@ -{ - "presets": ["next/babel"], - "plugins": [ - [ - "styled-components", - { - "ssr": true, - "displayName": true, - "preprocess": false - } - ], - [ - "module-resolver", - { - "alias": { - "~/collections": "./collections", - "~/components": "./components", - "~/lib": "./lib", - "~/pages": "./pages", - "~/sections": "./sections", - "~/styles": "./styles", - "~/utils": "./utils" - } - } - ] - ] -} diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..c41a1c0 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,5 @@ +module.exports = { + semi: true, + singleQuote: true, + trailingComma: 'all', +}; diff --git a/README.md b/README.md index 5d47d64..5f0dfbb 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ The section that you need to create is shown in **agencyselection.png** 1. The main Section must be placed in the folder sections. 2. All collections of components must be created and placed in the collections folder. (for example such things are Forms, Menus, etc. because they contain multiple other components within themselves, a form contains inputs, checkboxes, radio buttons, buttons and so on, that is making it a _collection of components_) -3. All base components that are making up collections of components go to components folder - these are Typography, Buttons, Checkboxes and other base elements. +3. All base components that are making up collections of components go to components folder - these are Typography, Buttons, Checkboxes and other base elements. You will find the desktop and mobile designs in the resources folder. That folder is not part of the project, its there for your convenience diff --git a/collections/Card/Card.jsx b/collections/Card/Card.jsx deleted file mode 100644 index 477fb66..0000000 --- a/collections/Card/Card.jsx +++ /dev/null @@ -1 +0,0 @@ -// The Card to be exported goes here diff --git a/collections/Card/Card.tsx b/collections/Card/Card.tsx new file mode 100644 index 0000000..b6c8758 --- /dev/null +++ b/collections/Card/Card.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react'; +import Image from 'next/image'; +import { + CardContainer, + CardInfoContainer, + CardInnerHeading, + CardInnerText, + ImageContainer, +} from './elements'; +import { CardProps } from '../../types/types'; + +export const Card: FC<{ card: CardProps }> = ({ card }) => { + const { image, title, description } = card; + const boldedDescription = description.replace(/(.*?)<\/b>/g, '$1'); + return ( + + + {title} + + + {card.title} + + + + ); +}; diff --git a/collections/Card/elements.jsx b/collections/Card/elements.jsx deleted file mode 100644 index daa406f..0000000 --- a/collections/Card/elements.jsx +++ /dev/null @@ -1 +0,0 @@ -// Styled elements for the Card go here diff --git a/collections/Card/elements.tsx b/collections/Card/elements.tsx new file mode 100644 index 0000000..0f8fb30 --- /dev/null +++ b/collections/Card/elements.tsx @@ -0,0 +1,70 @@ +import { HTMLAttributes } from 'react'; +import styled from 'styled-components'; + +export const CardContainer = styled((props: HTMLAttributes) => ( +
+))` + display: flex; + align-items: center; + width: 100%; + min-height: 7rem; + border-radius: 10px; + border: 3px solid transparent; + + &:hover { + border: 3px solid #006efd; + color: #006efd; + cursor: pointer; + } +`; + +export const CardInnerHeading = styled( + (props: HTMLAttributes) =>

, +)` + font-family: Poppins; + font-weight: 700; + font-size: 1.2rem; + margin-bottom: 0; + + ${CardContainer}:hover & { + text-decoration: underline; + } +`; + +export const CardInnerText = styled( + (props: HTMLAttributes) =>

, +)` + font-family: Poppins; + font-size: 1rem; + line-height: 1.5rem; + font-weight: 400; + color: black; + margin-top: 5px; + + b { + font-weight: bold; + } +`; + +export const CardInfoContainer = styled( + (props: HTMLAttributes) =>

, +)` + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: center; + padding-right: 20px; +`; + +export const ImageContainer = styled( + (props: HTMLAttributes) =>
, +)` + display: flex; + max-width: 5rem; + max-height: 5rem; + width: 75%; + height: 75%; + justify-content: center; + align-self: center; + padding: 2rem; +`; diff --git a/collections/Card/index.js b/collections/Card/index.js deleted file mode 100644 index 24d3212..0000000 --- a/collections/Card/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./Card"; diff --git a/collections/Card/index.ts b/collections/Card/index.ts new file mode 100644 index 0000000..ca0b060 --- /dev/null +++ b/collections/Card/index.ts @@ -0,0 +1 @@ +export * from './Card'; diff --git a/collections/index.js b/collections/index.js deleted file mode 100644 index 24d3212..0000000 --- a/collections/index.js +++ /dev/null @@ -1 +0,0 @@ -export * from "./Card"; diff --git a/collections/index.ts b/collections/index.ts new file mode 100644 index 0000000..ca0b060 --- /dev/null +++ b/collections/index.ts @@ -0,0 +1 @@ +export * from './Card'; diff --git a/components/Button/Button.jsx b/components/Button/Button.jsx deleted file mode 100644 index 4d645ff..0000000 --- a/components/Button/Button.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import { StyledButton, StyledButtonText } from "./elements"; - -export const Button = ({ children, ...props }) => { - return ( - - {children} - - ); -}; diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx new file mode 100644 index 0000000..aa0a245 --- /dev/null +++ b/components/Button/Button.tsx @@ -0,0 +1,14 @@ +import { ButtonHTMLAttributes, ReactNode, FC } from 'react'; +import { StyledButton, StyledButtonText } from './elements'; + +interface ButtonProps extends ButtonHTMLAttributes { + children: ReactNode; + props: any; +} +export const Button: FC = ({ children, ...props }) => { + return ( + + {children} + + ); +}; diff --git a/components/Button/elements.jsx b/components/Button/elements.jsx deleted file mode 100644 index 696fcce..0000000 --- a/components/Button/elements.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import styled, { css } from "styled-components"; -import { SectionInnerHeading } from "~/components"; - -const outlinedVariantButton = css` - background-color: transparent; - border: 1px solid; - border-color: ${({ theme, color }) => theme[color]}; - color: ${({ theme, color }) => theme[color]}; - - &:hover { - border-color: ${({ theme }) => theme.main}; - background-color: ${({ theme }) => theme.main}; - color: ${({ theme }) => theme.white}; - } -`; - -const containedVariantButton = css` - background-color: ${({ theme, color }) => theme[color]}; - - &:hover { - background-color: ${({ theme, color }) => theme.hover[color]}; - } -`; - -const textVariantButton = css` - background-color: transparent; - border: none; - border-radius: 0; - min-width: unset; - padding: 0 2rem; - margin: 0 2rem; - color: ${({ theme, color }) => theme[color]}; - - &:hover { - color: ${({ theme }) => theme.black}; - border-bottom: 1px solid ${({ theme }) => theme.black}; - } -`; - -const buttonVariants = { - outlined: outlinedVariantButton, - contained: containedVariantButton, - text: textVariantButton, -}; - -export const StyledButton = styled(({ color = "primary", variant = "contained", ...props }) =>