Assignment-1 Done

src/app/(root)/(dashboard)/_components/Buttton.tsx

@@ -0,0 +1,10 @@
+import Penicon from "./icons/penicon"
+
+export default function Button() {
+    return(
+        <div className="flex items-center justify-center bg-purple-500 text-xl px-8 py-2  m-3 rounded-lg text-white font-mono gap-2 h-11">
+            <Penicon />
+            <button>Edit</button>
+        </div>
+    )
+}

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 (
+    <div className="flex justify-center px-8 py-8  m-8  bg-purple-100 rounded-2xl border-2 border-solid border-purple-500 gap-10">
+      <Univarsity_logo />
+      <Data />
+
+      <div className="flex flex-col gap-5">
+        <Address />
+        <Email />
+      </div>
+
+      <Contact />
+    </div>
+  );
+}
+async function Data() {
+  return (
+    <div className="mt-6 gap-2">
+      <div className="text-lg">Established in 2001</div>
+      <div className="text-2xl font-bold">BRAC Univarsity </div>
+      <span className="text-lg">Instution code:</span>
+      <span className="text-lg italic font-bold">xyzwue</span>
+    </div>
+  );
+}
+async function Address() {
+  return (
+    <div className="text-xl">
+      <div className="flex justify-start items-center gap-2">
+        <LocationIcon />
+        <h1 className="text-slate-500">Address:</h1>
+      </div>
+
+      <div className="pl-8">
+       123,Main Street,city,country
+      </div>
+    </div>
+  );
+}
+async function Email() {
+  return (
+    <div className="text-xl ">
+      <div className="flex justify-start items-center gap-2">
+        <EmailIcon />
+        <h1 className="text-slate-500">Email:</h1>
+      </div>
+      <div className="pl-8">info@bracu.ac.bd</div>
+    </div>
+  );
+}
+async function Contact() {
+  return (
+    <div className="text-xl">
+      <div className="flex justify-start items-center gap-2">
+        <Contact_Icon />
+        <h1 className="text-slate-500">Contact:</h1>
+      </div>
+      <div className="pl-8">Tel: +123456789</div>
+    </div>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+   )
+}

src/app/(root)/(dashboard)/_components/icons/contactIcon.tsx

@@ -0,0 +1,20 @@
+export default async function Contact_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-slate-500"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"
+        />
+      </svg>
+    </div>
+  );
+}

src/app/(root)/(dashboard)/_components/icons/emailIcon.tsx

@@ -0,0 +1,20 @@
+export default async function () {
+  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-slate-500"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"
+        />
+      </svg>
+    </div>
+  );
+}

src/app/(root)/(dashboard)/_components/icons/graphIcon.tsx

@@ -0,0 +1,24 @@
+interface Icon_Props{
+  text_color:string,
+  size:string
+}
+export default async function GraphIcon({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="M7.5 14.25v2.25m3-4.5v4.5m3-6.75v6.75m3-9v9M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+        />
+      </svg>
+    </div>
+  );
+}