From 919aa3a12cf7d715cf952cb1c0afbffd937161ca Mon Sep 17 00:00:00 2001 From: tanzim_safin Date: Tue, 4 Mar 2025 16:30:16 +0600 Subject: [PATCH 1/2] Title Button and Univarsity details Done --- .../(dashboard)/_components/Buttton.tsx | 10 + .../(root)/(dashboard)/_components/Card.tsx | 66 +++++ .../(dashboard)/_components/Student.tsx | 12 + .../_components/icons/contactIcon.tsx | 20 ++ .../_components/icons/emailIcon.tsx | 20 ++ .../_components/icons/graphIcon.tsx | 20 ++ .../_components/icons/groupIcon.tsx | 6 + .../_components/icons/locationicon.tsx | 25 ++ .../_components/icons/logoicon.tsx | 237 ++++++++++++++++++ .../(dashboard)/_components/icons/penicon.tsx | 10 + .../(root)/(dashboard)/_components/index.ts | 1 - .../(root)/(dashboard)/_components/index.tsx | 20 ++ .../(root)/(dashboard)/_components/title.tsx | 12 + src/app/(root)/(dashboard)/page.tsx | 7 +- tailwind.config.ts | 6 + 15 files changed, 468 insertions(+), 4 deletions(-) create mode 100644 src/app/(root)/(dashboard)/_components/Buttton.tsx create mode 100644 src/app/(root)/(dashboard)/_components/Card.tsx create mode 100644 src/app/(root)/(dashboard)/_components/Student.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/contactIcon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/emailIcon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/locationicon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/logoicon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/penicon.tsx delete mode 100644 src/app/(root)/(dashboard)/_components/index.ts create mode 100644 src/app/(root)/(dashboard)/_components/index.tsx create mode 100644 src/app/(root)/(dashboard)/_components/title.tsx diff --git a/src/app/(root)/(dashboard)/_components/Buttton.tsx b/src/app/(root)/(dashboard)/_components/Buttton.tsx new file mode 100644 index 0000000..b43fcf9 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Buttton.tsx @@ -0,0 +1,10 @@ +import Penicon from "./icons/penicon" + +export default function Button() { + return( +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/Card.tsx b/src/app/(root)/(dashboard)/_components/Card.tsx new file mode 100644 index 0000000..0a22aba --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Card.tsx @@ -0,0 +1,66 @@ +import Contact_Icon from "./icons/contactIcon"; +import EmailIcon from "./icons/emailIcon"; +import LocationIcon from "./icons/locationicon"; +import Univarsity_logo from "./icons/logoicon"; + +export default async function Card() { + return ( +
+ + + +
+
+ +
+ + +
+ ); +} +async function Data() { + return ( +
+
Established in 2001
+
BRAC Univarsity
+ Instution code: + xyzwue +
+ ); +} +async function Address() { + return ( +
+
+ +

Address:

+
+ +
+ Kha 224, Bir Uttam Rafiqul Islam Ave, Dhaka 1212 +
+
+ ); +} +async function Email() { + return ( +
+
+ +

Email:

+
+
info@bracu.ac.bd
+
+ ); +} +async function Contact() { + return ( +
+
+ +

Contact:

+
+
Tel: +88 09638464646
+
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/Student.tsx b/src/app/(root)/(dashboard)/_components/Student.tsx new file mode 100644 index 0000000..2c8255b --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Student.tsx @@ -0,0 +1,12 @@ + +import Group_Icon from "./icons/groupIcon"; +import { StudentTitle } from "./title"; + +export default async function Student_Portfolio(){ + return( +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/icons/contactIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/contactIcon.tsx new file mode 100644 index 0000000..e1786b0 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/contactIcon.tsx @@ -0,0 +1,20 @@ +export default async function Contact_Icon() { + return ( +
+ + + +
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/emailIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/emailIcon.tsx new file mode 100644 index 0000000..8fd651e --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/emailIcon.tsx @@ -0,0 +1,20 @@ +export default async function () { + return ( +
+ + + +
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx new file mode 100644 index 0000000..c6e5389 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx @@ -0,0 +1,20 @@ +export default async function GraphIcon() { + return ( +
+ + + +
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx new file mode 100644 index 0000000..7bcaa2d --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx @@ -0,0 +1,6 @@ +export default async function Group_Icon() { + return(
+ + +
); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/locationicon.tsx b/src/app/(root)/(dashboard)/_components/icons/locationicon.tsx new file mode 100644 index 0000000..754da9a --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/locationicon.tsx @@ -0,0 +1,25 @@ +export default async function LocationIcon() { + return ( +
+ + + + +
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/logoicon.tsx b/src/app/(root)/(dashboard)/_components/icons/logoicon.tsx new file mode 100644 index 0000000..2c8b956 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/logoicon.tsx @@ -0,0 +1,237 @@ +export default async function Univarsity_logo() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/penicon.tsx b/src/app/(root)/(dashboard)/_components/icons/penicon.tsx new file mode 100644 index 0000000..0018ca2 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/penicon.tsx @@ -0,0 +1,10 @@ +export default async function Penicon(){ + return ( +
+ + + +
+ +) +} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/index.ts b/src/app/(root)/(dashboard)/_components/index.ts deleted file mode 100644 index 28d4d61..0000000 --- a/src/app/(root)/(dashboard)/_components/index.ts +++ /dev/null @@ -1 +0,0 @@ -// here we can add all the components that we want to use in the dashboard (you can rename this file to whatever you want) \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/index.tsx b/src/app/(root)/(dashboard)/_components/index.tsx new file mode 100644 index 0000000..af1e6e6 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/index.tsx @@ -0,0 +1,20 @@ +import Button from "./Buttton"; +import Card from "./Card"; +import Student_Portfolio from "./Student"; +import Title from "./title"; + +// here we can add all the components that we want to use in the dashboard (you can rename this file to whatever you want)] +export default async function Combined_component() { + return ( +
+
+ + <Button /> + </div> + <div className="flex flex-col justify-center"> + <Card /> + <Student_Portfolio /> + </div> + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/title.tsx b/src/app/(root)/(dashboard)/_components/title.tsx new file mode 100644 index 0000000..6bbc7d6 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/title.tsx @@ -0,0 +1,12 @@ +export default async function Title() { + return(<div> + <h1 className="text-3xl p-4 m-3 font-sarif">Institute Overview & Management</h1> + </div>) +} +export async function StudentTitle(){ + return ( + <div className="text-3xl p-3 m-2 font-sarif"> + Students Overview + </div> + ) +} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/page.tsx b/src/app/(root)/(dashboard)/page.tsx index 75a3155..f3edbe7 100644 --- a/src/app/(root)/(dashboard)/page.tsx +++ b/src/app/(root)/(dashboard)/page.tsx @@ -1,7 +1,8 @@ -import Image from "next/image"; - +import Combined_component from "./_components"; export default function Home() { return ( - <>Home</> + <div> + <Combined_component /> + </div> ); } diff --git a/tailwind.config.ts b/tailwind.config.ts index 2873606..957b3bf 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,6 +11,12 @@ const config = { ], prefix: '', theme: { + purple:{ + 500:"#A03232" + }, + borderWidth:{ + 2:"1px" + }, container: { center: true, padding: '2rem', From 65c278592e4ad4c7fb45ff354db11ab029c833d9 Mon Sep 17 00:00:00 2001 From: tanzim_safin <tanzimhossainsafin756@gmail.com> Date: Fri, 7 Mar 2025 10:41:57 +0600 Subject: [PATCH 2/2] Done --- .../(root)/(dashboard)/_components/Card.tsx | 4 +- .../(dashboard)/_components/Student.tsx | 12 -- .../(dashboard)/_components/Student_Icon.tsx | 20 +++ .../_components/Student_Teacher.tsx | 47 ++++++ .../_components/Student_Teacher_Button.tsx | 23 +++ .../(dashboard)/_components/generalType.tsx | 141 ++++++++++++++++++ .../_components/icons/attendance_Icon.tsx | 15 ++ .../_components/icons/graphIcon.tsx | 8 +- .../_components/icons/groupIcon.tsx | 8 +- .../(root)/(dashboard)/_components/index.tsx | 9 +- .../_components/performance-icon.tsx | 22 +++ .../(dashboard)/_components/teacher_icon.tsx | 16 ++ .../(root)/(dashboard)/_components/title.tsx | 13 +- 13 files changed, 311 insertions(+), 27 deletions(-) delete mode 100644 src/app/(root)/(dashboard)/_components/Student.tsx create mode 100644 src/app/(root)/(dashboard)/_components/Student_Icon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/Student_Teacher.tsx create mode 100644 src/app/(root)/(dashboard)/_components/Student_Teacher_Button.tsx create mode 100644 src/app/(root)/(dashboard)/_components/generalType.tsx create mode 100644 src/app/(root)/(dashboard)/_components/icons/attendance_Icon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/performance-icon.tsx create mode 100644 src/app/(root)/(dashboard)/_components/teacher_icon.tsx diff --git a/src/app/(root)/(dashboard)/_components/Card.tsx b/src/app/(root)/(dashboard)/_components/Card.tsx index 0a22aba..6600477 100644 --- a/src/app/(root)/(dashboard)/_components/Card.tsx +++ b/src/app/(root)/(dashboard)/_components/Card.tsx @@ -37,7 +37,7 @@ async function Address() { </div> <div className="pl-8"> - Kha 224, Bir Uttam Rafiqul Islam Ave, Dhaka 1212 + 123,Main Street,city,country </div> </div> ); @@ -60,7 +60,7 @@ async function Contact() { <Contact_Icon /> <h1 className="text-slate-500">Contact:</h1> </div> - <div className="pl-8">Tel: +88 09638464646</div> + <div className="pl-8">Tel: +123456789</div> </div> ); } diff --git a/src/app/(root)/(dashboard)/_components/Student.tsx b/src/app/(root)/(dashboard)/_components/Student.tsx deleted file mode 100644 index 2c8255b..0000000 --- a/src/app/(root)/(dashboard)/_components/Student.tsx +++ /dev/null @@ -1,12 +0,0 @@ - -import Group_Icon from "./icons/groupIcon"; -import { StudentTitle } from "./title"; - -export default async function Student_Portfolio(){ - return( - <div> - <StudentTitle/> - <Group_Icon /> - </div> - ) -} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/Student_Icon.tsx b/src/app/(root)/(dashboard)/_components/Student_Icon.tsx new file mode 100644 index 0000000..1421d25 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Student_Icon.tsx @@ -0,0 +1,20 @@ +export default async function Student_Icon() { + return ( + <div> + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + className="size-6" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" + /> + </svg> + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/Student_Teacher.tsx b/src/app/(root)/(dashboard)/_components/Student_Teacher.tsx new file mode 100644 index 0000000..2eb2a25 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Student_Teacher.tsx @@ -0,0 +1,47 @@ +import General from "./generalType"; + +export default async function Student_Portfolio() { + return ( + <div className="flex justify-between "> + <div className="flex-grow"> + <General + role={"Student"} + color={"bg-green-100"} + text={"text-green-600"} + title={"Students Overview"} + total_title={"Total Students"} + course_title={"Active Courses"} + average_atten_title={"Average Attendance"} + performance_title_index={"Performance Index"} + text_color={"text-green-600"} + size={'6'} + total_number={'2284'} + active_course={'84'} + average_performance={"98 %"} + performance_index={'9.0 / 10'} + border_color={"border-green-500"} + /> + </div> + <div className="flex-grow"> + <General + role={"Teacher"} + color={"bg-blue-100"} + text={"text-blue-600"} + title={"Teachers Overview"} + text_color={"text-blue-500"} + total_title={"Total Teachers"} + course_title={"Depatrments"} + average_atten_title={"Active Classes"} + performance_title_index={"Satisfaction Rate"} + size={'6'} + total_number={'24'} + active_course={'14'} + average_performance={"98 %"} + performance_index={'9.0 / 10'} + border_color={"border-blue-500"} + /> + </div> + + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/Student_Teacher_Button.tsx b/src/app/(root)/(dashboard)/_components/Student_Teacher_Button.tsx new file mode 100644 index 0000000..9bac8e9 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/Student_Teacher_Button.tsx @@ -0,0 +1,23 @@ +import Student_Icon from "./Student_Icon"; +import Teacher_Icon from "./teacher_icon"; + +interface student_teacher_button_icon { + role: string; + color: string; + text: string; +} +export default async function Student_Teacher_Button({ + role, + color, + text, +}: student_teacher_button_icon) { + return ( + <div + className={`flex items-center justify-center ${color} px-8 py-2 m-3 rounded-lg gap-2 h-11 ${text} font-sans text-xl `} + > + {role === 'Student' ? < Student_Icon/> : null} + {role === 'Teacher' ? <Teacher_Icon/> : null} + <button>View {role} </button> + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/generalType.tsx b/src/app/(root)/(dashboard)/_components/generalType.tsx new file mode 100644 index 0000000..ef9bf13 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/generalType.tsx @@ -0,0 +1,141 @@ +import Attendance_Icon from "./icons/attendance_Icon"; +import GraphIcon from "./icons/graphIcon"; +import Group_Icon from "./icons/groupIcon"; +import Performance_Icon from "./performance-icon"; +import Student_Teacher_Button from "./Student_Teacher_Button"; +import Title from "./title"; +import { SmallTitle } from "./title"; +interface general { + role?:string, + color?:string, + text?:string, + title?: string; + size?: string; + text_color?: string; + border_color?: string; + total_number?: string; + active_course?: string; + average_performance?: string; + performance_index?: string; + total_title?:string; + course_title?:string; + average_atten_title?:string; + performance_title_index?:string +} +export default async function General({ + role, + color, + text, + title, + size, + text_color, + border_color, + total_title, + course_title, + average_atten_title, + performance_title_index, + total_number, + active_course, + average_performance, + performance_index, +}: general) { + return ( + <div className={`flexrounded-2xl border-2 rounded-xl border-solid ${border_color} px-8 py-2 m-8 `}> + <div className="m-2"> + <Headline title={title} /> + </div> + + <div className="flex gap-10"> + <div className="flex flex-col justify-center items-center gap-4"> + <Number_stu_tea + size={size} + text_color={text_color} + total_number={total_number} + total_title={total_title} + /> + <Atten_Class + title={title} + size={size} + text_color={text_color} + average_atten_title={average_atten_title} + average_performance={average_performance} + /> + </div> + <div className="flex flex-col justify-center items-center gap-4"> + <Subject_dept + title={title} + size={size} + text_color={text_color} + course_title={course_title} + active_course={active_course} + /> + + <Performance + title={title} + size={size} + text_color={text_color} + performance_title_index={performance_title_index} + performance_index={performance_index} + /> + </div> + + </div> + <div className="flex flex-col"> + <Student_Teacher_Button role={role ?? "default"} color={color ?? "default"} text={text ?? "default"}/> + </div> + </div> + ); +} +function Headline({ title }: general) { + return ( + <div> + <Title title={title ?? "Default Title"} /> + </div> + ); +} +function Number_stu_tea({ size, text_color, total_number,total_title }: general) { + return ( + <div className="flex flex-col justify-center items-start"> + <SmallTitle title={total_title ?? "Total Student"} /> + <div className="flex jusatify-center gap-2 text-xl ml-4"> + <Group_Icon text_color={text_color ?? "green"} size={size ?? "6"} /> + <div>{total_number}</div> + </div> + </div> + ); +} +function Subject_dept({ active_course ,text_color,size,course_title}: general) { + return ( + <div className="flex flex-col justify-center items-start "> + <SmallTitle title={course_title ?? "default"} /> + <div className="flex jusatify-center gap-2 text-xl ml-4"> + <GraphIcon text_color={text_color ?? "green"} size={size ?? "6"} /> + <div>{active_course}</div> + </div> + </div> + ); +} +function Atten_Class({ average_performance,text_color,size, average_atten_title }: general) { + return ( + <div className="flex flex-col justify-items-start "> + <SmallTitle title={ average_atten_title ?? "default"} /> + <div className="flex jusatify-center gap-2 text-xl ml-4"> + <Attendance_Icon text_color={text_color ?? "green"} size={size ?? "6"} /> + <div>{average_performance}</div> + </div> + + </div> + ); +} +function Performance({ performance_index ,text_color,size,performance_title_index}: general) { + return ( + <div className="flex flex-col justify-center items-start"> + <SmallTitle title={performance_title_index ?? "default"} /> + <div className="flex jusatify-center gap-2 text-xl ml-4"> + <Performance_Icon text_color={text_color ?? "green"} size={size ?? "6"} /> + <div>{performance_index}</div> + </div> + + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/icons/attendance_Icon.tsx b/src/app/(root)/(dashboard)/_components/icons/attendance_Icon.tsx new file mode 100644 index 0000000..3fa09b7 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/icons/attendance_Icon.tsx @@ -0,0 +1,15 @@ +interface Icon_Props{ + text_color:string, + size:string + } +export default async function Attendance_Icon({text_color,size}:Icon_Props){ + return( + <div> + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`size-${size} ${text_color}`}> + <path fill-rule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0 1 18 9.375v9.375a3 3 0 0 0 3-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 0 0-.673-.05A3 3 0 0 0 15 1.5h-1.5a3 3 0 0 0-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6ZM13.5 3A1.5 1.5 0 0 0 12 4.5h4.5A1.5 1.5 0 0 0 15 3h-1.5Z" clip-rule="evenodd" /> + <path fill-rule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V9.375ZM6 12a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V12Zm2.25 0a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75ZM6 15a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V15Zm2.25 0a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75ZM6 18a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V18Zm2.25 0a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H9a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" /> +</svg> + + </div> + ) +} \ No newline at end of file diff --git a/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx index c6e5389..fc5a1cc 100644 --- a/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx +++ b/src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx @@ -1,4 +1,8 @@ -export default async function GraphIcon() { +interface Icon_Props{ + text_color:string, + size:string +} +export default async function GraphIcon({text_color,size}:Icon_Props) { return ( <div> <svg @@ -7,7 +11,7 @@ export default async function GraphIcon() { viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" - className="size-6" + className={`size-${size} ${text_color}`} > <path stroke-linecap="round" diff --git a/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx b/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx index 7bcaa2d..1ceef28 100644 --- a/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx +++ b/src/app/(root)/(dashboard)/_components/icons/groupIcon.tsx @@ -1,5 +1,9 @@ -export default async function Group_Icon() { - return(<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6 text-green-500"> +interface Icon_Props{ + text_color:string, + size:string +} +export default async function Group_Icon({text_color,size}:Icon_Props) { + return(<div><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className={`size-${size} ${text_color}`}> <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" /> </svg> </div>); diff --git a/src/app/(root)/(dashboard)/_components/index.tsx b/src/app/(root)/(dashboard)/_components/index.tsx index af1e6e6..a02751a 100644 --- a/src/app/(root)/(dashboard)/_components/index.tsx +++ b/src/app/(root)/(dashboard)/_components/index.tsx @@ -1,19 +1,20 @@ import Button from "./Buttton"; import Card from "./Card"; -import Student_Portfolio from "./Student"; +import Student_Portfolio from "./Student_Teacher"; import Title from "./title"; // here we can add all the components that we want to use in the dashboard (you can rename this file to whatever you want)] export default async function Combined_component() { return ( - <div className="flex flex-col"> - <div className="flex justify-between m-2 pl-10 pr-10"> - <Title /> + <div className="flex flex-col p-6 m-3"> + <div className="flex justify-between ml-2 mr-4"> + <Title title={"Institute Overview & Management"} /> <Button /> </div> <div className="flex flex-col justify-center"> <Card /> <Student_Portfolio /> + </div> </div> ); diff --git a/src/app/(root)/(dashboard)/_components/performance-icon.tsx b/src/app/(root)/(dashboard)/_components/performance-icon.tsx new file mode 100644 index 0000000..a105e7b --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/performance-icon.tsx @@ -0,0 +1,22 @@ +interface Icon_Props{ + text_color:string, + size:string + } +export default async function Performance_Icon({text_color,size}:Icon_Props) { + return ( + <div> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="currentColor" + className={`size-${size} ${text_color}`} + > + <path + fillRule="evenodd" + d="M15.22 6.268a.75.75 0 0 1 .968-.431l5.942 2.28a.75.75 0 0 1 .431.97l-2.28 5.94a.75.75 0 1 1-1.4-.537l1.63-4.251-1.086.484a11.2 11.2 0 0 0-5.45 5.173.75.75 0 0 1-1.199.19L9 12.312l-6.22 6.22a.75.75 0 0 1-1.06-1.061l6.75-6.75a.75.75 0 0 1 1.06 0l3.606 3.606a12.695 12.695 0 0 1 5.68-4.974l1.086-.483-4.251-1.632a.75.75 0 0 1-.432-.97Z" + clipRule="evenodd" + /> + </svg> + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/teacher_icon.tsx b/src/app/(root)/(dashboard)/_components/teacher_icon.tsx new file mode 100644 index 0000000..b712e59 --- /dev/null +++ b/src/app/(root)/(dashboard)/_components/teacher_icon.tsx @@ -0,0 +1,16 @@ +export default async function Teacher_Icon() { + return ( + <div> + <svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="currentColor" + className="size-6" + > + <path d="M11.7 2.805a.75.75 0 0 1 .6 0A60.65 60.65 0 0 1 22.83 8.72a.75.75 0 0 1-.231 1.337 49.948 49.948 0 0 0-9.902 3.912l-.003.002c-.114.06-.227.119-.34.18a.75.75 0 0 1-.707 0A50.88 50.88 0 0 0 7.5 12.173v-.224c0-.131.067-.248.172-.311a54.615 54.615 0 0 1 4.653-2.52.75.75 0 0 0-.65-1.352 56.123 56.123 0 0 0-4.78 2.589 1.858 1.858 0 0 0-.859 1.228 49.803 49.803 0 0 0-4.634-1.527.75.75 0 0 1-.231-1.337A60.653 60.653 0 0 1 11.7 2.805Z" /> + <path d="M13.06 15.473a48.45 48.45 0 0 1 7.666-3.282c.134 1.414.22 2.843.255 4.284a.75.75 0 0 1-.46.711 47.87 47.87 0 0 0-8.105 4.342.75.75 0 0 1-.832 0 47.87 47.87 0 0 0-8.104-4.342.75.75 0 0 1-.461-.71c.035-1.442.121-2.87.255-4.286.921.304 1.83.634 2.726.99v1.27a1.5 1.5 0 0 0-.14 2.508c-.09.38-.222.753-.397 1.11.452.213.901.434 1.346.66a6.727 6.727 0 0 0 .551-1.607 1.5 1.5 0 0 0 .14-2.67v-.645a48.549 48.549 0 0 1 3.44 1.667 2.25 2.25 0 0 0 2.12 0Z" /> + <path d="M4.462 19.462c.42-.419.753-.89 1-1.395.453.214.902.435 1.347.662a6.742 6.742 0 0 1-1.286 1.794.75.75 0 0 1-1.06-1.06Z" /> + </svg> + </div> + ); +} diff --git a/src/app/(root)/(dashboard)/_components/title.tsx b/src/app/(root)/(dashboard)/_components/title.tsx index 6bbc7d6..67b2ddf 100644 --- a/src/app/(root)/(dashboard)/_components/title.tsx +++ b/src/app/(root)/(dashboard)/_components/title.tsx @@ -1,12 +1,15 @@ -export default async function Title() { +interface title{ + title:string +} +export default async function Title({title}:title) { return(<div> - <h1 className="text-3xl p-4 m-3 font-sarif">Institute Overview & Management</h1> + <h1 className="text-4xl p-4 m-3 font-sarif">{title}</h1> </div>) } -export async function StudentTitle(){ +export async function SmallTitle({title}:title){ return ( - <div className="text-3xl p-3 m-2 font-sarif"> - Students Overview + <div className="text-2xl p-2 m-2 font-sarif"> + {title} </div> ) } \ No newline at end of file