Skip to content

Commit 8d7346d

Browse files
ahad324ahad324
committed
Added Instructions📜
1 parent 2249c2f commit 8d7346d

10 files changed

+235
-138
lines changed

‎dist/assets/index-Bymnq_kx.css ‎dist/assets/index-HOC6ifwV.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-X3vV2s6v.js

-67
This file was deleted.

‎dist/assets/index-xE_qfvlj.js

+67
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020

2121
gtag("config", "G-WKXYE5ZZR2");
2222
</script>
23-
<script type="module" crossorigin src="/assets/index-X3vV2s6v.js"></script>
24-
<link rel="stylesheet" crossorigin href="/assets/index-Bymnq_kx.css">
23+
<script type="module" crossorigin src="/assets/index-xE_qfvlj.js"></script>
24+
<link rel="stylesheet" crossorigin href="/assets/index-HOC6ifwV.css">
2525
</head>
2626
<body class="light">
2727
<div id="root"></div>

‎src/components/Background.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22

33
const Background = () => {
44
return (
5-
<div className="fixed z-[2] w-full h-screen">
5+
<div className="fixed z-0 w-full h-screen">
66
<div className="absolute w-full py-10 top-[5%] flex justify-center text-zinc-600 text-xl font-semibold">
77
Documents.
88
</div>

‎src/components/CreateFileModal.jsx

+51-65
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
// CreateFileModal.jsx
21
import React, { useState } from "react";
32
import { storage, BUCKET_ID, ID } from "../AppwriteConfig.js";
4-
import Loader from "./Loader.jsx";
53
import { toast } from "react-toastify";
4+
import Modal from "./Modal";
5+
import Loader from "./Loader"; // Assuming you have a Loader component
66

77
const MAX_FILE_SIZE = 52428800; // Maximum file size in Bytes
8-
98
const CreateFileModal = ({
109
isOpen,
1110
onClose,
@@ -54,70 +53,57 @@ const CreateFileModal = ({
5453
}
5554
};
5655

57-
if (!isOpen) return null;
58-
5956
return (
60-
<div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-50">
61-
<div className="bg-[--bg-color] p-8 rounded-lg shadow-custom w-fit text-[--text-color] border-2 border-[--text-color]">
62-
<h2 className="text-xl font-semibold mb-4">Create File</h2>
63-
{isUploading ? (
64-
<div className="flex justify-center items-center flex-col">
65-
<Loader /> <p className="ml-2">Creating file...</p>
57+
<Modal isOpen={isOpen} onClose={onClose} title="Create File">
58+
{isUploading ? (
59+
<div className="flex justify-center items-center flex-col">
60+
<Loader /> <p className="ml-2">Creating file...</p>
61+
</div>
62+
) : (
63+
<form onSubmit={(e) => e.preventDefault()}>
64+
<div className="mb-4">
65+
<label className="block">File Name</label>
66+
<input
67+
type="text"
68+
value={fileName}
69+
onChange={(e) => setFileName(e.target.value)}
70+
className="border p-2 w-full text-black rounded"
71+
/>
6672
</div>
67-
) : (
68-
<form onSubmit={(e) => e.preventDefault()}>
69-
<div className="mb-4">
70-
<label className="block">File Name</label>
71-
<input
72-
type="text"
73-
value={fileName}
74-
onChange={(e) => setFileName(e.target.value)}
75-
className="border p-2 w-full text-black rounded"
76-
/>
77-
</div>
78-
<div className="mb-4">
79-
<label className="block font-semibold mb-1">File Extension</label>
80-
<input
81-
type="text"
82-
value={fileExtension}
83-
onChange={(e) => setFileExtension(e.target.value)}
84-
className="border text-black border-gray-300 p-2 w-full rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
85-
placeholder="e.g., pdf, docx, txt"
86-
/>
87-
<p className="text-xs text-red-500 mt-1">
88-
Note: Enter extension without the dot (e.g., 'pdf', not '.pdf').
89-
</p>
90-
</div>
91-
92-
<div className="mb-4">
93-
<label className="block">File Content</label>
94-
<textarea
95-
value={fileContent}
96-
onChange={(e) => setFileContent(e.target.value)}
97-
className="border p-2 w-full rounded text-black"
98-
rows="4"
99-
/>
100-
</div>
101-
<div className="flex justify-between text-[--default-text-color]">
102-
<button
103-
type="button"
104-
onClick={handleFileCreation}
105-
className="bg-[--secondary-color] p-2 rounded hover:bg-[--secondary-color-hover]"
106-
>
107-
Create File
108-
</button>
109-
<button
110-
type="button"
111-
onClick={onClose}
112-
className="bg-gray-600 p-2 rounded hover:bg-gray-500"
113-
>
114-
Cancel
115-
</button>
116-
</div>
117-
</form>
118-
)}
119-
</div>
120-
</div>
73+
<div className="mb-4">
74+
<label className="block font-semibold mb-1">File Extension</label>
75+
<input
76+
type="text"
77+
value={fileExtension}
78+
onChange={(e) => setFileExtension(e.target.value)}
79+
className="border text-black border-gray-300 p-2 w-full rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
80+
placeholder="e.g., pdf, docx, txt"
81+
/>
82+
<p className="text-xs text-red-500 mt-1">
83+
Note: Enter extension without the dot (e.g., 'pdf', not '.pdf').
84+
</p>
85+
</div>
86+
<div className="mb-4">
87+
<label className="block">File Content</label>
88+
<textarea
89+
value={fileContent}
90+
onChange={(e) => setFileContent(e.target.value)}
91+
className="border p-2 w-full rounded text-black"
92+
rows="4"
93+
/>
94+
</div>
95+
<div className="flex justify-center">
96+
<button
97+
type="button"
98+
onClick={handleFileCreation}
99+
className="bg-[--secondary-color] p-2 text-[--default-text-color] rounded hover:bg-[--secondary-color-hover]"
100+
>
101+
Create File
102+
</button>
103+
</div>
104+
</form>
105+
)}
106+
</Modal>
121107
);
122108
};
123109

‎src/components/Foreground.jsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useRef, useState, useEffect } from "react";
22
import Card from "./Card";
3+
import InstructionsModal from "./InstructionsModal";
34
import { client, storage, BUCKET_ID, PROJECT_ID } from "../AppwriteConfig.js";
45
import UploadFileButton from "./UploadFileButton";
56
import Empty from "../assets/empty.svg";
@@ -16,6 +17,7 @@ const Foreground = ({ isAdmin = false, handleAdminLogout }) => {
1617
const [data, setData] = useState([]);
1718
const [deletingFileId, setDeletingFileId] = useState(null);
1819
const [storageOccupied, setStorageOccupied] = useState(0);
20+
const [isInstructionsOpen, setIsInstructionsOpen] = useState(false);
1921

2022
useEffect(() => {
2123
setloading(true);
@@ -81,8 +83,18 @@ const Foreground = ({ isAdmin = false, handleAdminLogout }) => {
8183
return (
8284
<div
8385
ref={ref}
84-
className="absolute top-0 left-0 z-[3] w-full h-full flex justify-center items-center gap-10 flex-wrap p-5 overflow-auto py-20"
86+
className="absolute top-0 left-0 z-[2] w-full h-full flex justify-center items-center gap-10 flex-wrap p-5 overflow-auto py-20"
8587
>
88+
<button
89+
onClick={() => setIsInstructionsOpen(true)}
90+
className="absolute top-4 left-4 bg-[--secondary-color] border-2 text-sm border-[--text-color] rounded-lg text-[--default-text-color] font-bold py-2 px-2 hover:bg-[--secondary-color-hover] transition"
91+
>
92+
Instructions
93+
</button>
94+
<InstructionsModal
95+
isOpen={isInstructionsOpen}
96+
onClose={() => setIsInstructionsOpen(false)}
97+
/>
8698
{isAdmin && (
8799
<section className="fixed top-0 flex justify-between w-full flex-row-reverse pl-4 pr-14 xs:px-16 py-2 bg-[--secondary-color] z-[3] shadow-custom rounded-b-3xl border-b-4 border-[--text-color]">
88100
<span

‎src/components/InstructionsModal.jsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
import { motion } from "framer-motion";
3+
import Modal from "./Modal";
4+
5+
const InstructionsModal = ({ isOpen, onClose }) => {
6+
const containerVariants = {
7+
hidden: { opacity: 0 },
8+
visible: {
9+
opacity: 1,
10+
transition: {
11+
staggerChildren: 0.2,
12+
},
13+
},
14+
};
15+
16+
const itemVariants = {
17+
hidden: { opacity: 0, y: 20 },
18+
visible: { opacity: 1, y: 0 },
19+
};
20+
21+
return (
22+
<Modal isOpen={isOpen} onClose={onClose} title="Instructions">
23+
<motion.div
24+
className="text-[--text-color] space-y-6"
25+
variants={containerVariants}
26+
initial="hidden"
27+
animate="visible"
28+
>
29+
<motion.p className="text-center text-lg" variants={itemVariants}>
30+
This platform allows you to easily share files with others. Whether
31+
you're in a classroom or a collaborative environment, sharing files
32+
has never been easier!
33+
</motion.p>
34+
<motion.h2
35+
className="text-xl font-semibold mt-4 text-center text-[--accent-color]"
36+
variants={itemVariants}
37+
>
38+
How to Share Files Publicly
39+
</motion.h2>
40+
<ol className="list-decimal list-inside mb-4 space-y-2">
41+
<motion.li className="mb-2" variants={itemVariants}>
42+
<strong>Upload from Your System:</strong> Click on the "Upload File"
43+
button. Select the file you wish to share. Once uploaded, it will be
44+
accessible to everyone.
45+
</motion.li>
46+
<motion.li variants={itemVariants}>
47+
<strong>Create a File:</strong> Use the "Create File" button located
48+
at the bottom left of the screen. Fill in the file details and
49+
content, then click "Create". Your file will be automatically
50+
uploaded and shared.
51+
</motion.li>
52+
</ol>
53+
<motion.h2
54+
className="text-xl font-semibold mt-4 text-center text-[--accent-color]"
55+
variants={itemVariants}
56+
>
57+
Perfect for Classroom Environments
58+
</motion.h2>
59+
<motion.p className="text-center" variants={itemVariants}>
60+
Imagine a scenario where one student has the solution to a lab
61+
assessment. They can upload their file here, allowing everyone to
62+
access it instantly. This feature is designed to foster collaboration
63+
and ease of access.
64+
</motion.p>
65+
<motion.h2
66+
className="text-xl font-semibold mt-4 text-center text-[--accent-color]"
67+
variants={itemVariants}
68+
>
69+
😊 Enjoy a Seamless Experience 😊
70+
</motion.h2>
71+
</motion.div>
72+
</Modal>
73+
);
74+
};
75+
76+
export default InstructionsModal;

‎src/components/Modal.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import { MdClose } from "react-icons/md";
3+
4+
const Modal = ({ isOpen, onClose, title, children }) => {
5+
if (!isOpen) return null;
6+
7+
return (
8+
<div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50 z-10">
9+
<div className="bg-[--bg-color] p-8 rounded-lg shadow-custom w-full max-w-lg mx-4 text-[--text-color] border-2 border-[--text-color] relative">
10+
<button
11+
onClick={onClose}
12+
className="absolute top-2 right-2 text-[--text-color] bg-transparent hover:bg-gray-200 hover:text-black rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
13+
>
14+
<MdClose size="1.5em" />
15+
</button>
16+
<h2 className="text-xl font-semibold mb-4">{title}</h2>
17+
<div className="max-h-[70vh] overflow-y-auto">{children}</div>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default Modal;

‎src/components/ThemeToggler.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ThemeToggler = () => {
1919
};
2020

2121
return (
22-
<label className="theme fixed right-3 top-3 z-10">
22+
<label className="theme fixed right-3 top-3 z-[3]">
2323
<input
2424
className="input"
2525
type="checkbox"

0 commit comments

Comments
 (0)