Skip to content

Commit

Permalink
feat(luna): render tutor card v1
Browse files Browse the repository at this point in the history
  • Loading branch information
moalidv committed Dec 23, 2024
1 parent 8e42d4f commit 0ea865f
Show file tree
Hide file tree
Showing 19 changed files with 384 additions and 36 deletions.
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/ServerStats/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Chart = <T extends { timestamp: number }>({
dataKey?: keyof T;
}) => {
return (
<div className="h-[20rem] shadow-ls-small rounded-md p-4" dir="ltr">
<div className="h-[20rem] shadow-ls-x-small rounded-md p-4" dir="ltr">
<ResponsiveContainer>
<LineChart data={data}>
{lines.map((key) => (
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/components/UserDetails/Content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Content: React.FC<{
if (!user) return;

return (
<div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-small w-full">
<div className="p-4 mx-auto mt-6 border border-border-strong rounded-md shadow-ls-x-small w-full">
<div className="flex gap-2 ">
<div className="relative">
{user.image ? (
Expand Down
2 changes: 1 addition & 1 deletion apps/dashboard/src/pages/PlatformSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import Cache from "@/components/Settings/Cache";

const Settings = () => {
return (
<div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-small rounded-md h-fit">
<div className="w-full flex flex-col max-w-screen-2xl mx-auto m-6 p-6 shadow-ls-x-small rounded-md h-fit">
<Cache />
</div>
);
Expand Down
12 changes: 4 additions & 8 deletions apps/nova/src/components/Tutors/Content.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import BookLesson from "@/components/Lessons/BookLesson";
import { Route } from "@/types/routes";
import { Loading } from "@litespace/luna/Loading";
import { Element, ITutor, Void } from "@litespace/types";
import React, { useCallback, useState } from "react";
import { TutorCard } from "@litespace/luna/TutorCard";
import { asFullAssetUrl } from "@litespace/luna/backend";
import { Route } from "@/types/routes";
import { useNavigate } from "react-router-dom";
import { Element, ITutor, Void } from "@litespace/types";
import { motion } from "framer-motion";
import React, { useCallback, useState } from "react";
import { InView } from "react-intersection-observer";
import BookLesson from "@/components/Lessons/BookLesson";

type Tutor = Element<ITutor.FindOnboardedTutorsApiResponse["list"]>;

Expand All @@ -19,8 +18,6 @@ const Content: React.FC<{
more: Void;
hasMore: boolean;
}> = ({ tutors, loading, error, more, hasMore, fetching }) => {
const navigate = useNavigate();

const [tutor, setTutor] = useState<Tutor | null>(null);

const openBookingDialog = useCallback((tutor: Tutor) => setTutor(tutor), []);
Expand Down Expand Up @@ -53,7 +50,6 @@ const Content: React.FC<{
studentCount={tutor.studentCount}
rating={tutor.avgRating}
onBook={() => openBookingDialog(tutor)}
onOpenProfile={() => navigate(profileUrl)}
profileUrl={profileUrl}
imageUrl={tutor.image ? asFullAssetUrl(tutor.image) : null}
/>
Expand Down
5 changes: 4 additions & 1 deletion packages/luna/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,10 @@ export const Avatar: React.FC<{
"tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[1]"
)}
>
<JazzIcon seed={seed || alt || src || "litespace"} />
<JazzIcon
seed={seed || alt || src || "litespace"}
className="tw-h-full"
/>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/luna/src/components/Call/PreCallUserPreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const PreCallUserPreview: React.FC<{
}, [stream, camera]);

return (
<div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden">
<div className="tw-aspect-video tw-w-full tw-grow tw-max-w-[700px] tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden">
{camera ? (
<video ref={videoRef} autoPlay muted={false} playsInline />
) : (
Expand Down
2 changes: 1 addition & 1 deletion packages/luna/src/components/Call/UnFocusedStream.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const UnFocusedStream: React.FC<{
duration: 0.3,
ease: "easeInOut",
}}
className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-small tw-overflow-hidden"
className="tw-aspect-video tw-w-[219px] tw-border tw-border-natural-500 tw-flex tw-items-center tw-justify-center tw-backdrop-blur-[15px] tw-bg-background-indicator tw-rounded-lg tw-shadow-ls-x-small tw-overflow-hidden"
>
{stream.camera || stream.cast ? (
// todo: should only be muted for the current user (props)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const ChatSummary: React.FC<Props> = ({ rooms, chatsUrl }) => {
return (
<div
className={cn(
"tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
"tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
)}
>
<Typography
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const UpcomingLessonsSummary: React.FC<Props> = ({
return (
<div
className={cn(
"tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-small tw-bg-natural-50"
"tw-border tw-border-transparent hover:tw-border-natural-100 tw-rounded-lg tw-p-6 tw-shadow-ls-x-small tw-bg-natural-50"
)}
>
<Typography
Expand Down
6 changes: 3 additions & 3 deletions packages/luna/src/components/MultiSelect/MultiSelect.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ export const MultiSelect = <T,>({
className={cn(
"tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
"tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
"data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
"focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
"data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
"focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
"tw-bg-natural-50 hover:tw-bg-brand-50",
"data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
"data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
)}
onClick={() => setOpen(true)}
>
Expand Down
6 changes: 3 additions & 3 deletions packages/luna/src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ export const Select = <T extends string | number>({
"tw-flex tw-flex-row tw-justify-between tw-items-center",
"tw-w-full tw-h-14 tw-rounded-lg tw-p-2 tw-transition-colors tw-duration-200",
"tw-border tw-border-natural-300 hover:tw-border-brand-200 focus:tw-border-brand-500",
"data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
"focus:tw-outline-none focus:tw-shadow-ls-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
"data-[error=true]:tw-border-destructive-500 data-[error=true]:tw-shadow-ls-x-small data-[error=true]:tw-shadow-[rgba(204,0,0,0.25)]",
"focus:tw-outline-none focus:tw-shadow-ls-x-small focus:tw-shadow-[rgba(43,181,114,0.25)]",
"tw-bg-natural-50 hover:tw-bg-brand-50",
"data-[open=true]:tw-shadow-ls-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
"data-[open=true]:tw-shadow-ls-x-small data-[open=true]:tw-shadow-[rgba(43,181,114,0.25)] data-[open=true]:tw-border-brand-500"
)}
>
<Value>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const Card: React.FC<{
return (
<div
className={cn(
"tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-small",
"tw-p-4 tw-bg-natural-50 tw-rounded-2xl tw-shadow-ls-x-small",
"tw-border tw-border-transparent hover:tw-border-natural-100",
"tw-basis-full tw-flex tw-flex-col tw-gap-2"
)}
Expand Down
27 changes: 16 additions & 11 deletions packages/luna/src/components/TutorCard/TutorCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ type Props = {
imageUrl?: string | null;
profileUrl: string;
onBook: Void;
onOpenProfile: Void;
};

export const TutorCard: React.FC<Props> = ({
Expand All @@ -41,15 +40,14 @@ export const TutorCard: React.FC<Props> = ({
profileUrl,
rating,
onBook,
onOpenProfile,
}) => {
const intl = useFormatMessage();
return (
<div
className={cn(
"tw-flex tw-flex-col",
"tw-bg-natural-50 tw-border tw-border-natural-100",
"tw-p-4 tw-shadow-ls-small tw-rounded-lg"
"tw-p-4 tw-shadow-ls-x-small tw-rounded-lg"
)}
>
<div className="tw-flex tw-flex-row tw-gap-2 tw-mb-4">
Expand Down Expand Up @@ -157,15 +155,22 @@ export const TutorCard: React.FC<Props> = ({
>
{intl("tutors.card.book-button.label")}
</Button>
<Button
onClick={onOpenProfile}
className="tw-w-full"
type={ButtonType.Main}
variant={ButtonVariant.Secondary}
size={ButtonSize.Tiny}
<Link
to={profileUrl}
className={cn(
"tw-block tw-grow tw-basis-1/2 tw-text-center tw-px-4 tw-py-2 tw-border tw-border-brand-700 tw-rounded-lg tw-w-full",
"hover:tw-bg-brand-100 hover:tw-border-brand-700 focus:tw-bg-brand-200 focus:tw-ring-1 focus:tw-ring-brand-900",
"tw-transition-colors tw-ease-out tw-duration-200"
)}
>
{intl("tutors.card.profile-button.label")}
</Button>
<Typography
element="caption"
weight="semibold"
className="tw-text-brand-700"
>
{intl("tutors.card.profile-button.label")}
</Typography>
</Link>
</div>
</div>
);
Expand Down
105 changes: 105 additions & 0 deletions packages/luna/src/components/TutorCard/TutorCardV1.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import { Meta, StoryObj } from "@storybook/react";
import { TutorCardV1 } from "@/components/TutorCard";
import { CardProps } from "@/components/TutorCard/types";
import { faker } from "@faker-js/faker/locale/ar";
import React from "react";
import { range } from "lodash";

type Story = StoryObj<CardProps>;

const meta: Meta<CardProps> = {
title: "TutorCardV1",
component: TutorCardV1,
decorators: [
(Story) => (
<div style={{ width: "568px" }}>
<Story />
</div>
),
],
};

const makeTopics = (count: number, wordLength?: number | null) =>
range(count).map(() => {
return faker.word.sample({ length: wordLength || { min: 5, max: 15 } });
});

export const TutorWithoutName: Story = {
args: {
id: faker.number.int(),
name: null,
about: faker.lorem.paragraphs(3),
studentCount: faker.number.int({ min: 10, max: 1_000 }),
lessonCount: faker.number.int({ min: 10, max: 500 }),
rating: faker.number.int({ min: 0, max: 5 }),
imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
topics: makeTopics(7),
},
};

export const TutorWithoutImage: Story = {
args: {
id: faker.number.int(),
name: null,
about: faker.lorem.paragraphs(3),
studentCount: faker.number.int({ min: 10, max: 1_000 }),
lessonCount: faker.number.int({ min: 10, max: 500 }),
rating: faker.number.int({ min: 0, max: 5 }),
imageUrl: null,
topics: makeTopics(7),
},
};

export const TutorWithStats: Story = {
args: {
id: faker.number.int(),
name: faker.person.fullName(),
about: faker.lorem.paragraphs(3),
studentCount: faker.number.int({ min: 10, max: 1_000 }),
lessonCount: faker.number.int({ min: 10, max: 500 }),
rating: faker.number.int({ min: 0, max: 5 }),
imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
topics: makeTopics(7),
},
};

export const TutorWithHighStats: Story = {
args: {
id: faker.number.int(),
name: faker.person.fullName(),
about: faker.lorem.paragraphs(3),
studentCount: faker.number.int({ min: 1_000, max: 10_000 }),
lessonCount: faker.number.int({ min: 1_000, max: 10_000 }),
rating: faker.number.int({ min: 0, max: 5 }),
imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
topics: makeTopics(12, 10),
},
};

export const TutorWithouStats: Story = {
args: {
id: faker.number.int(),
name: faker.person.fullName(),
about: faker.lorem.paragraphs(3),
studentCount: 0,
lessonCount: 0,
rating: 0,
imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
topics: makeTopics(12),
},
};

export const TutorWithoutRating: Story = {
args: {
id: faker.number.int(),
name: faker.person.fullName(),
about: faker.lorem.paragraphs(3),
studentCount: faker.number.int({ min: 1, max: 200 }),
lessonCount: faker.number.int({ min: 1, max: 200 }),
rating: 0,
imageUrl: faker.image.urlPicsumPhotos({ width: 200, height: 300 }),
topics: makeTopics(12),
},
};

export default meta;
Loading

0 comments on commit 0ea865f

Please sign in to comment.