{upperHours.map((hour, index) => (
))}
diff --git a/src/components/ReadonlyClassBlock.tsx b/src/components/ReadonlyClassBlock.tsx
new file mode 100644
index 0000000..416ade9
--- /dev/null
+++ b/src/components/ReadonlyClassBlock.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const typeClasses = {
+ W: "bg-red-300",
+ L: "bg-blue-300",
+ C: "bg-green-300",
+ S: "bg-orange-300",
+ P: "bg-fuchsia-200",
+} as const;
+
+function calculatePosition(startTime: string, endTime: string) {
+ const [startHour, startMinute] = startTime.split(":").map(Number);
+ const [endHour, endMinute] = endTime.split(":").map(Number);
+
+ const startGrid = startHour * 12 - 7 * 12 - 5 + startMinute / 5;
+
+ const startTotalMinutes = startHour * 60 + startMinute;
+ const endTotalMinutes = endHour * 60 + endMinute;
+
+ const durationSpan = (endTotalMinutes - startTotalMinutes) / 5;
+
+ return [startGrid, durationSpan];
+}
+
+const ReadonlyClassBlock = ({
+ startTime,
+ endTime,
+ group,
+ courseName,
+ lecturer,
+ week,
+ courseType,
+}: {
+ startTime: string;
+ endTime: string;
+ group: string;
+ courseName: string;
+ lecturer: string;
+ week: "" | "TN" | "TP";
+ courseType: "C" | "L" | "P" | "S" | "W";
+}) => {
+ const position = calculatePosition(startTime, endTime);
+ const [startGrid, durationSpan] = position;
+ return (
+
+ );
+};
+
+export { ReadonlyClassBlock };
diff --git a/src/components/ReadonlyClassSchedule.tsx b/src/components/ReadonlyClassSchedule.tsx
new file mode 100644
index 0000000..e19b5d3
--- /dev/null
+++ b/src/components/ReadonlyClassSchedule.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+import type { ClassBlockProps } from "@/lib/types";
+
+import { Hour } from "./Hour";
+import { ReadonlyClassBlock } from "./ReadonlyClassBlock";
+
+const upperHours = [
+ "7:30",
+ "8:00",
+ "9:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "16:55",
+ "17:50",
+ "18:45",
+ "19:40",
+ "20:45",
+ "21:40",
+] as const;
+
+const bottomHours = [
+ "8:15",
+ "9:15",
+ "10:15",
+ "11:15",
+ "12:15",
+ "13:15",
+ "14:15",
+ "15:15",
+ "16:10",
+ "17:05",
+ "18:00",
+ "18:55",
+ "19:50",
+ "20:55",
+ "21:50",
+] as const;
+
+const ReadonlyClassSchedule = ({
+ schedule,
+ day,
+}: {
+ schedule: ClassBlockProps[];
+ day: string;
+}) => {
+ return (
+
+
+ {day}
+
+
+
+ {upperHours.map((hour, index) => (
+
+ ))}
+ {bottomHours.map((hour, index) => (
+
+ ))}
+
+
+
+ {schedule.map((block, index) => (
+
+ ))}
+
+
+
+ );
+};
+
+export { ReadonlyClassSchedule };
diff --git a/src/components/ReadonlyScheduleTest.tsx b/src/components/ReadonlyScheduleTest.tsx
new file mode 100644
index 0000000..8d37dc2
--- /dev/null
+++ b/src/components/ReadonlyScheduleTest.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import { ReadonlyClassSchedule } from "@/components/ReadonlyClassSchedule";
+import type { ClassBlockProps } from "@/lib/types";
+
+export const ReadonlyScheduleTest = ({
+ schedule,
+}: {
+ schedule: ClassBlockProps[];
+}) => {
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/SharePlanResponsiveDialog.tsx b/src/components/SharePlanResponsiveDialog.tsx
new file mode 100644
index 0000000..d22b05f
--- /dev/null
+++ b/src/components/SharePlanResponsiveDialog.tsx
@@ -0,0 +1,96 @@
+import Image from "next/image";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+import { Input } from "@/components/ui/input";
+import { useMediaQuery } from "@/lib/useMediaQuery";
+
+export const SharePlanResponsiveDialog = ({ hash }: { hash: string }) => {
+ const [open, setOpen] = React.useState(false);
+ const isDesktop = useMediaQuery("(min-width: 768px)");
+ if (isDesktop) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ Udostępnij plan
+ Skopiuj link
+
+
+
+
+
+
+
+
+
+ );
+};
+
+function CopyLink({ hash }: { hash: string }) {
+ const sharePlan = () => {
+ navigator.clipboard
+ .writeText(`${window.location.origin}/shareplan/${hash}`)
+ .catch(() => {
+ alert("Something went wrong :(");
+ });
+ };
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..e03f29b
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,124 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, children, ...props }, ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+ Dialog,
+ DialogPortal,
+ DialogOverlay,
+ DialogClose,
+ DialogTrigger,
+ DialogContent,
+ DialogHeader,
+ DialogFooter,
+ DialogTitle,
+ DialogDescription,
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
new file mode 100644
index 0000000..987d5e2
--- /dev/null
+++ b/src/components/ui/drawer.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+ shouldScaleBackground = true,
+ ...props
+}: React.ComponentProps) => (
+
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+ {children}
+
+
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+ // eslint-disable-next-line react/prop-types
+>(({ className, ...props }, ref) => (
+
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+ Drawer,
+ DrawerPortal,
+ DrawerOverlay,
+ DrawerTrigger,
+ DrawerClose,
+ DrawerContent,
+ DrawerHeader,
+ DrawerFooter,
+ DrawerTitle,
+ DrawerDescription,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..4d09fd3
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type InputProps = React.InputHTMLAttributes;
+
+const Input = React.forwardRef(
+ // eslint-disable-next-line react/prop-types
+ ({ className, type, ...props }, ref) => {
+ return (
+
+ );
+ },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/lib/sharingUtils.ts b/src/lib/sharingUtils.ts
new file mode 100644
index 0000000..e0fb18c
--- /dev/null
+++ b/src/lib/sharingUtils.ts
@@ -0,0 +1,9 @@
+function encodeToBase64(input: string) {
+ return btoa(unescape(encodeURIComponent(input)));
+}
+
+function decodeFromBase64(encoded: string) {
+ return decodeURIComponent(escape(atob(encoded)));
+}
+
+export { encodeToBase64, decodeFromBase64 };
diff --git a/src/lib/useMediaQuery.ts b/src/lib/useMediaQuery.ts
new file mode 100644
index 0000000..b4ce143
--- /dev/null
+++ b/src/lib/useMediaQuery.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export const useMediaQuery = (query: string) => {
+ const [value, setValue] = React.useState(false);
+
+ React.useEffect(() => {
+ function onChange(event: MediaQueryListEvent) {
+ setValue(event.matches);
+ }
+
+ const result = matchMedia(query);
+ result.addEventListener("change", onChange);
+ setValue(result.matches);
+
+ return () => {
+ result.removeEventListener("change", onChange);
+ };
+ }, [query]);
+
+ return value;
+};
diff --git a/src/pages/createplan/[id].tsx b/src/pages/createplan/[id].tsx
index ec9723c..f7df7a9 100644
--- a/src/pages/createplan/[id].tsx
+++ b/src/pages/createplan/[id].tsx
@@ -11,7 +11,9 @@ import { IoCheckmarkOutline } from "react-icons/io5";
import { Seo } from "@/components/SEO";
import { ScheduleTest } from "@/components/Schedule";
import { SelectGroups } from "@/components/SelectGroups";
+import { SharePlanResponsiveDialog } from "@/components/SharePlanResponsiveDialog";
import { SolvroLogo } from "@/components/SolvroLogo";
+import { encodeToBase64 } from "@/lib/sharingUtils";
import type { ClassBlockProps, Course, Registration } from "@/lib/types";
import { cn } from "@/lib/utils";
@@ -184,9 +186,18 @@ const mondaySchedule = [
mockVoleyball2,
];
-const registrations = [mockRegistration1, mockRegistration2, mockRegistration3];
-const mockCourses = [mockCourse1, mockCourse2, mockCourse3, mockCourse4];
-const mockGroups = [
+const registrations: Registration[] = [
+ mockRegistration1,
+ mockRegistration2,
+ mockRegistration3,
+];
+const mockCourses: Course[] = [
+ mockCourse1,
+ mockCourse2,
+ mockCourse3,
+ mockCourse4,
+];
+const mockGroups: ClassBlockProps[] = [
mockL,
mockW,
mockS,
@@ -291,45 +302,51 @@ const CreatePlan = ({
-