Add teachers photos

src/widgets/schedule/day.tsx

@@ -1,9 +1,29 @@
 import type { Day as DayType } from '@/shared/model/day'
+import { Lesson } from '@/widgets/schedule/lesson'
 
 export function Day({ day }: {
   day: DayType
 }) {
+  const dayOfWeek = [
+    'Понедельник', 
+    'Вторник',
+    'Среда',
+    'Четверг',
+    'Пятница',
+    'Суббота',
+    'Воскресенье'
+  ][day.date.getDay()-1]
+
   return (
-    <p></p>
+    <div className="flex flex-col gap-5">
+      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+        {dayOfWeek}
+      </h1>
+      <div className="flex flex-row gap-4">
+        {day.lessons.map((lesson, i) => (
+          <Lesson lesson={lesson} key={i} />
+        ))}
+      </div>
+    </div>
   )
 }

src/widgets/schedule/index.tsx

@@ -6,7 +6,7 @@ export function Schedule({ days }: {
 }) {
 
   return (
-    <div>
+    <div className="flex flex-col p-16 gap-14">
       {days.map((day, i) => (
         <Day day={day} key={i} />
       ))}

src/widgets/schedule/lesson.tsx

@@ -7,46 +7,49 @@ import {
   CardHeader,
   CardTitle,
 } from '@/shadcn/ui/card'
-import { Input } from '@/shadcn/ui/input'
-import { Label } from '@/shadcn/ui/label'
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/shadcn/ui/select'
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/shadcn/ui/avatar'
+import { teachers } from '@/shared/data/teachers'
+import { Lesson as LessonType } from '@/shared/model/lesson'
+
+export function Lesson({ lesson }: {
+  lesson: LessonType
+}) {
+  const teacherObj = lesson.teacher ? teachers.find(t => t.name === lesson.teacher) : null
+
+  const getTeacherPhoto = (url?: string) => {
+    if(url) {
+      try {
+        const filename = decodeURIComponent(new URL(url).pathname.split('/').pop()!)
+        return `/teachers/${filename}`
+      } catch(e) {
+        console.error(e)
+        return null
+      }
+    } else {
+      return null
+    }
+  }
 
-export function Lesson() {
   return (
-    <Card className="w-[350px]">
-      <CardHeader>
-        <CardTitle>Create project</CardTitle>
-        <CardDescription>Deploy your new project in one-click.</CardDescription>
-      </CardHeader>
+    <Card className="w-[350px]"> 
+      <div>
+        <Avatar>
+          <AvatarImage src={getTeacherPhoto(teacherObj?.picture)} alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+        <Avatar></Avatar>
+        <CardHeader>
+          <CardTitle>{lesson.subject}</CardTitle>
+          <CardDescription>{lesson.teacher}</CardDescription>
+          <CardDescription>{lesson.place?.classroom}</CardDescription>
+        </CardHeader>
+      </div>
       <CardContent>
-        <form>
-          <div className="grid w-full items-center gap-4">
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="name">Name</Label>
-              <Input id="name" placeholder="Name of your project" />
-            </div>
-            <div className="flex flex-col space-y-1.5">
-              <Label htmlFor="framework">Framework</Label>
-              <Select>
-                <SelectTrigger id="framework">
-                  <SelectValue placeholder="Select" />
-                </SelectTrigger>
-                <SelectContent position="popper">
-                  <SelectItem value="next">Next.js</SelectItem>
-                  <SelectItem value="sveltekit">SvelteKit</SelectItem>
-                  <SelectItem value="astro">Astro</SelectItem>
-                  <SelectItem value="nuxt">Nuxt.js</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-        </form>
+        
       </CardContent>
       <CardFooter className="flex justify-between">
         <Button variant="outline">Cancel</Button>