feat: lab module feature

src/app/code-of-conduct/page.tsx

@@ -107,7 +107,7 @@ export default function CodeOfConductPage() {
 
               <Switch
                 label="Published"
-                description="If published, students can view"
+                description="If published, students can view."
                 labelPosition="left"
                 styles={{
                   body: {

src/app/lab-module/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+import { LabModuleAdd, LabModuleCard, useGetLabModule } from "@/lab-module";
+import { AppLayout, SearchInput } from "@/common";
+import { Group, SimpleGrid, Skeleton, Text, Title } from "@mantine/core";
+import { useDebouncedState } from "@mantine/hooks";
+
+export default function LabModulePage() {
+  const [search, setSearch] = useDebouncedState("", 300);
+
+  const getLabModule = useGetLabModule({
+    sort: "created_at-desc",
+    search: search,
+  });
+
+  const labModules = getLabModule.data?.data?.data || [];
+
+  return (
+    <>
+      <AppLayout>
+        <Title order={1} mb="xl">
+          Materi Praktikum
+        </Title>
+
+        <Group mb="md">
+          <LabModuleAdd />
+
+          <SearchInput
+            onChange={event => {
+              setSearch(event.currentTarget.value);
+            }}
+          />
+        </Group>
+
+        {!getLabModule.isLoading && labModules.length < 1 && (
+          <Text style={{ textAlign: "center" }} w="100%" c="dimmed">
+            No results.
+          </Text>
+        )}
+
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
+          {getLabModule.isLoading &&
+            Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} height={356} radius="lg" />
+            ))}
+
+          {!getLabModule.isLoading &&
+            labModules.map(item => (
+              <LabModuleCard key={item.id} labModule={item} />
+            ))}
+        </SimpleGrid>
+      </AppLayout>
+    </>
+  );
+}

src/app/organigram/page.tsx

@@ -107,7 +107,7 @@ export default function OrganigramPage() {
 
               <Switch
                 label="Published"
-                description="If published, students can view"
+                description="If published, students can view."
                 labelPosition="left"
                 styles={{
                   body: {

src/auth/helpers/index.ts

@@ -9,6 +9,7 @@ export function isProtectedPath(path: string) {
     "/organigram",
     "/handout",
     "/schedule",
+    "/lab-module",
   ];
 
   return PROTECTED_PATHS.includes(path);

src/common/helpers/index.tsx

@@ -73,3 +73,18 @@ export function getGoogleDrivePreviewLink(value: string) {
 
   return value.replace("/view", "/preview");
 }
+
+export function getYoutubeEmbedLink(value: string) {
+  try {
+    let url = new URL(value);
+
+    url = new URL(
+      "/embed" + url.pathname + url.search,
+      "https://www.youtube.com"
+    );
+
+    return url.toString();
+  } catch {
+    return "";
+  }
+}

src/common/utils/index.ts

@@ -64,3 +64,9 @@ export function objectToSearchParams(object: object) {
 
   return searchParams;
 }
+
+export function regexToInputPattern(regex: RegExp) {
+  const stringValue = regex.toString();
+
+  return stringValue.slice(1, stringValue.length - 1);
+}

src/handout/components/AddHandout.tsx

@@ -84,7 +84,7 @@ export function AddHandout() {
           <TextInput
             label="Name"
             placeholder="Insert name"
-            description={`Max ${NAME_MAX_LENGTH} characters`}
+            description={`Max ${NAME_MAX_LENGTH} characters.`}
             required
             maxLength={NAME_MAX_LENGTH}
             key={form.key("name")}
@@ -105,7 +105,7 @@ export function AddHandout() {
 
           <Switch
             label="Published"
-            description="If published, students can view"
+            description="If published, students can view."
             labelPosition="left"
             styles={{
               body: {

src/handout/components/HandoutCard.tsx

@@ -202,7 +202,7 @@ export function HandoutCard(props: { handout: Handout }) {
 
         <Switch
           label="Published"
-          description="If published, students can view"
+          description="If published, students can view."
           labelPosition="left"
           styles={{
             body: {