feat: user page

import {Flex, Typography} from "antd";

import "../user_heading/user_heading.css";

import "./review_tile.css";

import {Review} from "../../../types.ts";

import {Link} from "react-router-dom";

import {useState} from "react";

const {Text, Paragraph} = Typography;

interface ReviewProps {

    review: Review;

}

function ReviewTile({review}: ReviewProps) {

    const [ellipsis, setEllipsis] = useState(true);

    return (

        <Flex vertical className="user_box">

            <Flex justify="space-between" align="center">

                <Flex>

                    <Link to={"/movie/" + review.movie.id}>

                        <Text className="review_tile__heading clickable" strong>The Godfather Part 2</Text>

                    </Link>

                    <Text className="review_tile__heading">(1974)</Text>

                </Flex>

                <Text className="user__club_text review_tile__rating" strong>{review.rating}/10</Text>

            </Flex>

            <Flex className="review_tile__review">

                <Paragraph ellipsis={ellipsis ? { rows: 3, expandable: true, symbol: 'more' } : false}>

                    {review.text}

                </Paragraph>

            </Flex>

        </Flex>

    );

}

export default ReviewTile;

 No newline at end of file

.review_tile__rating {

    border: 3px solid red;

    border-radius: 15px;

    padding: 0.2rem;

    background-color: white;

}

.review_tile__heading {

    font-size: 1.5rem;

    padding-right: 0.5rem;

}

.review_tile__review {

    max-height: 6.7rem;

    overflow: hidden;

}

.review_tile__review.expanded {

    max-height: none;

}

.review_tile__see-more {

    display: block;

    text-align: right;

    cursor: pointer;

    color: blue; /* Style the "See more" link */

}

 No newline at end of file

import {Avatar, Flex, Typography} from "antd";

import "./user_heading.css"

const {Text} = Typography;

interface HeadingProps {

    username: string;

    createdDate: Date;

}

function UserHeading({username, createdDate}: HeadingProps) {

    return (

        <Flex className="user_box">

            <Avatar className="user_heading__avatar" shape="square" size={100} src="/default_user.jpg"/>

            <Flex vertical className="user_heading__details">

                <Text className="details__name">{username}</Text>

                <Text italic>User joined in {createdDate.toLocaleString('default', {

                    month: 'long',

                    year: 'numeric'

                })}

                </Text>

            </Flex>

        </Flex>

    );

}

export default UserHeading;

 No newline at end of file

.user_box {

    border: 2px solid black;

    border-radius: 15px;

    box-shadow: 0 0 8px gray;

    padding: 0.5rem;

    text-align: start;

    margin: 0.5rem;

}

.user_heading__avatar {

    margin-right: 1rem;

}

.user_heading__details {

    align-items: start;

    justify-content: space-between;

}

.details__name {

    font-size: 2rem;

}