diff --git a/public/fonts/Inter-VariableFont_opsz,wght.ttf b/public/fonts/Inter-VariableFont_opsz,wght.ttf deleted file mode 100644 index e31b51e..0000000 Binary files a/public/fonts/Inter-VariableFont_opsz,wght.ttf and /dev/null differ diff --git a/public/fonts/Literata-Italic-VariableFont_opsz,wght.ttf b/public/fonts/Literata-Italic-VariableFont_opsz,wght.ttf deleted file mode 100644 index 29743a3..0000000 Binary files a/public/fonts/Literata-Italic-VariableFont_opsz,wght.ttf and /dev/null differ diff --git a/public/fonts/Literata-VariableFont_opsz,wght.ttf b/public/fonts/Literata-VariableFont_opsz,wght.ttf deleted file mode 100644 index 527a458..0000000 Binary files a/public/fonts/Literata-VariableFont_opsz,wght.ttf and /dev/null differ diff --git a/public/fonts/Onest-VariableFont_wght.ttf b/public/fonts/Onest-VariableFont_wght.ttf deleted file mode 100644 index 6c77d20..0000000 Binary files a/public/fonts/Onest-VariableFont_wght.ttf and /dev/null differ diff --git a/public/mocks/mockAvatar.png b/public/mocks/mockAvatar.png new file mode 100644 index 0000000..f28a330 Binary files /dev/null and b/public/mocks/mockAvatar.png differ diff --git a/public/statsIcon.png b/public/statsIcon.png new file mode 100644 index 0000000..570ddba Binary files /dev/null and b/public/statsIcon.png differ diff --git a/src/fonts/Inter-Medium.ttf b/src/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..5c88739 Binary files /dev/null and b/src/fonts/Inter-Medium.ttf differ diff --git a/src/fonts/Inter-Regular.ttf b/src/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..6b088a7 Binary files /dev/null and b/src/fonts/Inter-Regular.ttf differ diff --git a/src/fonts/Literata-Regular.ttf b/src/fonts/Literata-Regular.ttf new file mode 100644 index 0000000..e2c46c2 Binary files /dev/null and b/src/fonts/Literata-Regular.ttf differ diff --git a/src/index.css b/src/index.css index faac4ee..9f197ce 100644 --- a/src/index.css +++ b/src/index.css @@ -3,6 +3,11 @@ src: url("./fonts/Literata-Medium.woff") format("woff"); } +@font-face { + font-family: "Literata-Regular"; + src: url("./fonts/Literata-Regular.ttf") format("ttf"); +} + @font-face { font-family: "Onest-Medium"; src: url("./fonts/Onest-Medium.woff") format("woff"); @@ -12,3 +17,13 @@ font-family: "Onest-Regular"; src: url("./fonts/Onest-Regular.woff") format("woff"); } + +@font-face { + font-family: "Inter-Medium"; + src: url("./fonts/Inter-Medium.ttf") format("ttf"); +} + +@font-face { + font-family: "Inter-Regular"; + src: url("./fonts/Inter-Regular.ttf") format("ttf"); +} diff --git a/src/pages/book/components/BookContent/components/BookDescription/index.tsx b/src/pages/book/components/BookContent/components/BookDescription/index.tsx index 1f602cd..ac71c14 100644 --- a/src/pages/book/components/BookContent/components/BookDescription/index.tsx +++ b/src/pages/book/components/BookContent/components/BookDescription/index.tsx @@ -1,6 +1,6 @@ import { Typography } from "antd"; import styles from "./styles.module.scss"; -import { BookDescriptionProps } from "../../../../../../types/books"; +import { BookDescriptionProps } from "../../../../../../types/book"; const { Title, Paragraph, Text } = Typography; diff --git a/src/pages/book/components/BookContent/components/BookDescription/styles.module.scss b/src/pages/book/components/BookContent/components/BookDescription/styles.module.scss index acf1a0c..b44cf66 100644 --- a/src/pages/book/components/BookContent/components/BookDescription/styles.module.scss +++ b/src/pages/book/components/BookContent/components/BookDescription/styles.module.scss @@ -2,13 +2,13 @@ display: flex; flex-direction: column; gap: 40px; - width: 620px; + max-width: 620px; } .annotation { :global(h3.ant-typography) { margin: 10px 0 15px; - font-family: "Onest", sans-serif; + font-family: "Onest-Regula", sans-serif; font-weight: 600; font-size: 24px; line-height: 31px; @@ -16,7 +16,7 @@ } .annotationText { - font-family: "Literata", serif; + font-family: "Literata-Regular", serif; font-weight: 400; font-size: 16px; line-height: 135%; @@ -24,7 +24,7 @@ } .expandButton { - font-family: "Literata", serif; + font-family: "Literata-Regular", serif; color: var(--ant-color-primary); cursor: pointer; border: none; @@ -41,16 +41,16 @@ .detailItem { display: flex; - gap: 40px; + gap: 20px; :global(.ant-typography) { - font-family: "Onest", sans-serif; + font-family: "Onest-Regular", sans-serif; font-size: 16px; line-height: 20px; } .label { - width: 97px; + width: 120px; color: var(--ant-color-text-placeholder); } diff --git a/src/pages/book/components/BookContent/components/BookGallery/styles.module.scss b/src/pages/book/components/BookContent/components/BookGallery/styles.module.scss index 8e6b4cc..5b7fc6a 100644 --- a/src/pages/book/components/BookContent/components/BookGallery/styles.module.scss +++ b/src/pages/book/components/BookContent/components/BookGallery/styles.module.scss @@ -34,7 +34,7 @@ border-radius: 7px; span { - font-family: "Onest", sans-serif; + font-family: "Onest-Medium", sans-serif; font-weight: 500; font-size: 17px; line-height: 22px; diff --git a/src/pages/book/components/BookContent/components/OwnerCard/index.tsx b/src/pages/book/components/BookContent/components/OwnerCard/index.tsx new file mode 100644 index 0000000..6b82de9 --- /dev/null +++ b/src/pages/book/components/BookContent/components/OwnerCard/index.tsx @@ -0,0 +1,87 @@ +import { Avatar, Card, Typography, Button, Image, Divider } from "antd"; +import { EnvironmentOutlined } from "@ant-design/icons"; +import styles from "./styles.module.scss"; +import { OwnerCardProps } from "../../../../../../types/user"; +import { getMembershipTime } from "../../../../../../utils/date"; +import { ExchangeInfoIcon } from "./svg-icons"; + +const { Text } = Typography; + +const mockOwnerData: OwnerCardProps = { + name: "Евгения", + avatar: "/mocks/mockAvatar.png", + registrationDate: new Date("2023-08-09"), + booksGiven: 17, + booksExchanged: 21, + gender: "female", + location: "Санкт-Петербург, Озерки", + isMessageAvailable: true, +}; + +export const OwnerCard = () => { + const { + name, + avatar, + gender, + location, + isMessageAvailable, + booksGiven, + booksExchanged, + } = mockOwnerData; + + const membershipTime = getMembershipTime(mockOwnerData.registrationDate); + + return ( + +
+ +
+ {name} + {membershipTime} +
+
+ +
+
+ +
+ + Отдано {booksGiven} книг • Обменяно {booksExchanged} + +
+ +
+
+ +
+ + {name} {gender === "female" ? "готова" : "готов"} обменять книгу на + любую интересную + +
+ +
+
+ +
+ {location} +
+ + + + + + ); +}; diff --git a/src/pages/book/components/BookContent/components/OwnerCard/styles.module.scss b/src/pages/book/components/BookContent/components/OwnerCard/styles.module.scss new file mode 100644 index 0000000..4fc3a80 --- /dev/null +++ b/src/pages/book/components/BookContent/components/OwnerCard/styles.module.scss @@ -0,0 +1,128 @@ +.card { + width: 315px; + border: 1px solid rgba(158, 158, 158, 0.2); + box-shadow: 0px 0px 12px 5px rgba(66, 66, 66, 0.05); + border-radius: 15px; + padding: 15px; + + :global(.ant-card-body) { + display: flex; + flex-direction: column; + gap: 12px; + + &::before, + &::after { + display: none; + } + } +} + +.header { + display: flex; + gap: 14px; +} + +.userInfo { + display: flex; + flex-direction: column; + justify-content: center; + gap: 2px; +} + +.name { + font-family: "Onest-Medium", sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 500; + color: var(--ant-color-text); +} + +.membershipTime { + font-family: "Onest-Regular", sans-serif; + font-size: 14px; + line-height: 16px; + color: var(--ant-color-text-placeholder); +} + +.detailsRow { + display: flex; + gap: 8px; + + .iconWrapper { + display: flex; + width: 24px; + flex-shrink: 0; + } +} + +.statsRow { + padding-bottom: 3px; + align-items: flex-end; +} + +.statsIcon { + display: block; +} + +.statsText { + font-family: "Onest-Medium", sans-serif; + font-size: 16px; + line-height: 18px; + font-weight: 500; + color: var(--ant-color-text); +} + +.exchangeInfoText { + font-family: "Onest-Regular", sans-serif; + font-size: 16px; + line-height: 19px; + color: var(--ant-color-text-placeholder); +} + +.locationIcon { + font-size: 18px; + color: var(--ant-color-text-quaternary); +} + +.location { + font-family: "Onest-Regular", sans-serif; + font-size: 14px; + line-height: 18px; + color: var(--ant-color-text-placeholder); +} + +.divider { + height: 1px; + background-color: var(--ant-color-border-bg); + width: 100%; + + &:global(.ant-divider-horizontal) { + margin: 2px 0; + } +} + +.messageButton { + width: 100%; + height: 42px; + border-radius: 9px; + font-family: "Onest-Medium", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 20px; + + &:global(.ant-btn-variant-solid:hover) { + &:hover { + background-color: var(--ant-geekblue-6); //В фигме #355FFF + } + } + + &:global(.ant-btn-variant-solid:disabled) { + color: var(--ant-color-bg-base); + background-color: var(--ant-color-primary-text-hover); //В фигме #5A9CFF + + &:hover { + color: var(--ant-color-bg-base); + background-color: var(--ant-color-primary-text-hover); + } + } +} diff --git a/src/pages/book/components/BookContent/components/OwnerCard/svg-icons.tsx b/src/pages/book/components/BookContent/components/OwnerCard/svg-icons.tsx new file mode 100644 index 0000000..6cd7eff --- /dev/null +++ b/src/pages/book/components/BookContent/components/OwnerCard/svg-icons.tsx @@ -0,0 +1,25 @@ +export const ExchangeInfoIcon = ({ className }: { className?: string }) => ( + + + + +); diff --git a/src/pages/book/components/BookContent/components/ShareButton/index.tsx b/src/pages/book/components/BookContent/components/ShareDropdown/index.tsx similarity index 92% rename from src/pages/book/components/BookContent/components/ShareButton/index.tsx rename to src/pages/book/components/BookContent/components/ShareDropdown/index.tsx index 03bb173..763de2d 100644 --- a/src/pages/book/components/BookContent/components/ShareButton/index.tsx +++ b/src/pages/book/components/BookContent/components/ShareDropdown/index.tsx @@ -19,7 +19,7 @@ const shareMenu = { ], }; -export const ShareButton = () => ( +export const ShareDropdown = () => ( - + @@ -34,7 +35,9 @@ export const BookContent = ({ - + ); diff --git a/src/pages/book/components/BookContent/styles.module.scss b/src/pages/book/components/BookContent/styles.module.scss index 385468b..94ab379 100644 --- a/src/pages/book/components/BookContent/styles.module.scss +++ b/src/pages/book/components/BookContent/styles.module.scss @@ -25,7 +25,7 @@ line-height: 36px; font-size: 28px; font-weight: 500; - font-family: "Onest", sans-serif; + font-family: "Onest-Medium", sans-serif; } :global(span.ant-typography) { @@ -33,7 +33,7 @@ line-height: 24px; font-size: 20px; font-weight: 500; - font-family: "Inter", sans-serif; + font-family: "Inter-Medium", sans-serif; color: var(--color-text-author); } diff --git a/src/pages/book/components/OwnerCard/index.tsx b/src/pages/book/components/OwnerCard/index.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/book/components/OwnerCard/styles.module.scss b/src/pages/book/components/OwnerCard/styles.module.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx index 8dc3488..e43cf86 100644 --- a/src/pages/book/index.tsx +++ b/src/pages/book/index.tsx @@ -1,7 +1,7 @@ import { Layout } from "antd"; import { BookContent } from "./components/BookContent"; import styles from "./styles.module.scss"; -import { BookContentProps } from "../../types/books"; +import { BookContentProps } from "../../types/book"; const { Content } = Layout; diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss deleted file mode 100644 index 12544d0..0000000 --- a/src/styles/fonts.scss +++ /dev/null @@ -1,19 +0,0 @@ -@font-face { - font-family: "Onest"; - src: url("/fonts/Onest-VariableFont_wght.ttf") format("truetype-variations"); - font-weight: 1 1000; -} - -@font-face { - font-family: "Inter"; - src: url("/fonts/Inter-VariableFont_opsz,wght.ttf") - format("truetype-variations"); - font-weight: 1 1000; -} - -@font-face { - font-family: "Literata"; - src: url("/fonts/Literata-VariableFont_opsz,wght.ttf") - format("truetype-variations"); - font-weight: 1 1000; -} diff --git a/src/styles/variables.scss b/src/styles/variables.scss deleted file mode 100644 index d45c143..0000000 --- a/src/styles/variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -:root { - --color-text-gray: #909090; -} diff --git a/src/types/books.ts b/src/types/book.ts similarity index 100% rename from src/types/books.ts rename to src/types/book.ts diff --git a/src/types/user.ts b/src/types/user.ts new file mode 100644 index 0000000..b705d57 --- /dev/null +++ b/src/types/user.ts @@ -0,0 +1,10 @@ +export type OwnerCardProps = { + name: string; + avatar: string; + registrationDate: Date; + booksGiven: number; + booksExchanged: number; + gender: "male" | "female"; + location: string; + isMessageAvailable: boolean; +}; diff --git a/src/utils/date.ts b/src/utils/date.ts new file mode 100644 index 0000000..4e09b37 --- /dev/null +++ b/src/utils/date.ts @@ -0,0 +1,15 @@ +export const getMembershipTime = (date: Date): string => { + const now = new Date(); + const diff = now.getTime() - date.getTime(); + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const months = Math.floor(days / 30); + const years = Math.floor(months / 12); + + if (years > 0) { + return `${years} ${years === 1 ? "год" : years < 5 ? "года" : "лет"} с ShareBook`; + } + if (months > 0) { + return `${months} ${months === 1 ? "месяц" : months < 5 ? "месяца" : "месяцев"} с ShareBook`; + } + return `${days} ${days === 1 ? "день" : days < 5 ? "дня" : "дней"} с ShareBook`; +};