diff --git a/src/api/.gitkeep b/src/api/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/.gitkeep b/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx new file mode 100644 index 0000000..028bb52 --- /dev/null +++ b/src/components/chat/ChatInput.tsx @@ -0,0 +1,90 @@ +import React, { useState } from 'react'; + +const AddIcon: React.FC = () => ( + + + +); + +const EmojiIcon: React.FC = () => ( + + + +); + +const DividerIcon: React.FC = () => ( + + + +); + +type ReplyIconProps = { + onReply: () => void; +}; + +const ReplyIcon: React.FC = ({ onReply }) => ( + +); + +type ChatInputProps = { + onSendMessage: (message: string) => void; +}; + +const ChatInput: React.FC = ({ onSendMessage }) => { + const [message, setMessage] = useState(''); + const [replyTo, setReplyTo] = useState(null); + + const handleChange = (event: React.ChangeEvent) => { + setMessage(event.target.value); + }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + if (event.key === 'Enter' && message.trim() !== '') { + onSendMessage(message); + setMessage(''); + setReplyTo(null); + } + }; + + const handleReply = () => { + setReplyTo("Replying to last message..."); + }; + + return ( +
+ + +
+ {replyTo && ( +
+ {replyTo} +
+ )} + +
+ + + + + + +
+ ); +}; + +export default ChatInput; \ No newline at end of file diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx new file mode 100644 index 0000000..f4ce8c9 --- /dev/null +++ b/src/components/chat/Message.tsx @@ -0,0 +1,66 @@ +import React from 'react'; + +type AvatarProps = { + imageUrl: string; + altText: string; +}; + +const Avatar: React.FC = ({ imageUrl, altText }) => { + return ( +
+
+ {altText} +
+ ); +}; + +type MessageHeaderProps = { + username: string; + timestamp: string; +}; + +const MessageHeader: React.FC = ({ username, timestamp }) => { + return ( +
+
{username}
+
{timestamp}
+
+ ); +}; + +type MessageContentProps = { + content: string; +}; + +const MessageContent: React.FC = ({ content }) => { + return ( +
+
{content}
+
+ ); +}; + +type MessageProps = { + avatarUrl: string; + username: string; + timestamp: string; + content: string; +}; + +const Message: React.FC = ({ avatarUrl, username, timestamp, content }) => { + return ( +
+ +
+ + +
+
+ ); +}; + +export default Message; diff --git a/src/components/chat/Reply.tsx b/src/components/chat/Reply.tsx new file mode 100644 index 0000000..30529a3 --- /dev/null +++ b/src/components/chat/Reply.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +const MentionIcon: React.FC = () => { + return ( + + + + ); +}; + +type MentionAvatarProps = { + avatarUrl: string; +}; + +const MentionAvatar: React.FC = ({ avatarUrl }) => { + return ( +
+
+ Mention avatar +
+ ); +}; + +type MentionTextProps = { + username: string; + message: string; +}; + +const MentionText: React.FC = ({ username, message }) => { + return ( +
+
@{username}
+
{message}
+
+ ); +}; + +type MentionMessageProps = { + avatarUrl: string; + username: string; + message: string; +}; + +const MentionMessage: React.FC = ({ avatarUrl, username, message }) => { + return ( +
+
+ +
+
+ + +
+
+ ); +}; + +export default MentionMessage; diff --git a/src/components/Button.tsx b/src/components/shared/Button.tsx similarity index 100% rename from src/components/Button.tsx rename to src/components/shared/Button.tsx diff --git a/src/components/Checkbox.tsx b/src/components/shared/Checkbox.tsx similarity index 100% rename from src/components/Checkbox.tsx rename to src/components/shared/Checkbox.tsx diff --git a/src/components/DropDown.tsx b/src/components/shared/DropDown.tsx similarity index 100% rename from src/components/DropDown.tsx rename to src/components/shared/DropDown.tsx diff --git a/src/components/LoginLabel.tsx b/src/components/user/LoginLabel.tsx similarity index 100% rename from src/components/LoginLabel.tsx rename to src/components/user/LoginLabel.tsx diff --git a/src/components/LoginTextInput.tsx b/src/components/user/LoginTextInput.tsx similarity index 100% rename from src/components/LoginTextInput.tsx rename to src/components/user/LoginTextInput.tsx diff --git a/src/pages/Login/components/LoginForm.tsx b/src/pages/Login/components/LoginForm.tsx index 2a0794f..2f49ade 100644 --- a/src/pages/Login/components/LoginForm.tsx +++ b/src/pages/Login/components/LoginForm.tsx @@ -4,7 +4,7 @@ import { signIn } from "@api/authService.ts"; import { FieldInfos, FieldValue } from "src/types/LoginTypes"; import { isEmptyString } from "@utils/stringValidations.ts"; import useForm from "@hooks/useForm"; -import LoginTextInput from "@components/LoginTextInput"; +import LoginTextInput from "@components/user/LoginTextInput.tsx"; const fieldInfos: FieldInfos = { email: { diff --git a/src/pages/SignupPage/DatePicker.tsx b/src/pages/SignupPage/DatePicker.tsx index ab9fc56..c6dd18b 100644 --- a/src/pages/SignupPage/DatePicker.tsx +++ b/src/pages/SignupPage/DatePicker.tsx @@ -1,4 +1,4 @@ -import DropDown from "@components/DropDown"; +import DropDown from "@components/shared/DropDown.tsx"; import { useState } from "react"; type DatePickerProps = { diff --git a/src/pages/SignupPage/SignupForm.tsx b/src/pages/SignupPage/SignupForm.tsx index d647935..eb8cc4e 100644 --- a/src/pages/SignupPage/SignupForm.tsx +++ b/src/pages/SignupPage/SignupForm.tsx @@ -9,11 +9,11 @@ import { isName, } from "@utils/stringValidations.ts"; import useForm from "@hooks/useForm.ts"; -import Button from "@components/Button.tsx"; -import Checkbox from "@components/Checkbox.tsx"; +import Button from "@components/shared/Button.tsx"; +import Checkbox from "@components/shared/Checkbox.tsx"; import DatePicker from "./DatePicker.tsx"; -import LoginLabel from "@components/LoginLabel.tsx"; -import LoginTextInput from "@components/LoginTextInput.tsx"; +import LoginLabel from "@components/user/LoginLabel.tsx"; +import LoginTextInput from "@components/user/LoginTextInput.tsx"; import type { FieldInfos, FieldValue } from "src/types/LoginTypes"; diff --git a/tailwind.config.js b/tailwind.config.js index e9e5aa2..3676c4d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,12 +7,49 @@ export default { './src/App.tsx', ], theme: { - fontSize: { - lg: '16px', - base: '14px', - sm: '12px', - }, extend: { + fontFamily: { + sans: ["gg sans", "sans-serif"], + display: ["ABC Ginto Nord Trial", "sans-serif"], + regular: ['gg sans Regular', 'sans-serif'], + bold: ['gg sans Bold', 'sans-serif'], + medium: ['gg sans Medium', 'sans-serif'], + semibold: ['gg sans Semibold', 'sans-serif'], + kr: ['NotoSansKR-VariableFont_wght', 'sans-serif'], + }, + fontSize: { + "heading-sm": "0.875rem", // 14px + "heading-md": "1rem", // 16px + "heading-lg": "1.25rem", // 20px + "heading-xl": "1.5rem", // 24px + "heading-xxl": "2rem", // 32px + "text-xxs": "0.625rem", // 10px + "text-xs": "0.75rem", // 12px + "text-sm": "0.875rem", // 14px + "text-md": "1rem", // 16px + "text-lg": "1.25rem", // 20px + "display-sm": "1.5rem", // 24px + "display-md": "2.125rem", // 34px + "display-lg": "2.75rem", // 44px + lg: '16px', + base: '14px', + sm: '12px', + }, + fontWeight: { + normal: "400", + medium: "500", + semibold: "600", + bold: "700", + extrabold: "800", + black: "900", + }, + lineHeight: { + none: "1", + tight: "1.1", + snug: "1.2", + normal: "1.5", + relaxed: "1.75", + }, colors: { 'wrapper': '#313338', 'sidebar': '#2E3036', @@ -21,13 +58,13 @@ export default { 'des': '#DCDDDE', 'primary': '#5865F2', 'panel': '#292b2f', - }, - fontFamily: { - regular: ['gg sans Regular', 'sans-serif'], - bold: ['gg sans Bold', 'sans-serif'], - medium: ['gg sans Medium', 'sans-serif'], - semibold: ['gg sans Semibold', 'sans-serif'], - kr: ['NotoSansKR-VariableFont_wght', 'sans-serif'], + 'blurple': '#5865F2', // CMYK 80, 60, 0, 0 + 'green': '#57F287', // CMYK 50, 0, 55, 0 + 'yellow': '#FEE75C', // CMYK 0, 5, 80, 0 + 'fuchsia': '#EB459E', // CMYK 0, 90, 0, 0 + 'red': '#ED4245', // CMYK 0, 90, 65, 0 + 'white': '#FFFFFF', // CMYK 0, 0, 0, 0 + 'black': '#000000', // CMYK 35, 0, 0, 100 }, width: { 'wrapper': '72px', @@ -37,4 +74,4 @@ export default { }, }, plugins: [], -} +}; \ No newline at end of file