dev: profile page, issue details page design

ui/Breadcrumbs/index.tsx

@@ -6,7 +6,7 @@ type BreadcrumbsProps = {
   children: any;
 };
 
-const Breadcrumbs = (props: BreadcrumbsProps) => {
+const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }: BreadcrumbsProps) => {
   const router = useRouter();
 
   return (
@@ -20,7 +20,7 @@ const Breadcrumbs = (props: BreadcrumbsProps) => {
             <ArrowLeftIcon className="h-3 w-3" />
           </p>
         </div>
-        {props.children}
+        {children}
       </div>
     </>
   );
@@ -32,23 +32,23 @@ type BreadcrumbItemProps = {
   icon?: any;
 };
 
-const BreadcrumbItem = (props: BreadcrumbItemProps) => {
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => {
   return (
     <>
-      {props.link ? (
-        <Link href={props.link}>
+      {link ? (
+        <Link href={link}>
           <a className="bg-indigo-50 hover:bg-indigo-100 duration-300 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
-            <p className={`skew-x-[20deg] ${props.icon ? "flex items-center gap-2" : ""}`}>
-              {props?.icon}
-              {props.title}
+            <p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
+              {icon ?? null}
+              {title}
             </p>
           </a>
         </Link>
       ) : (
         <div className="bg-indigo-50 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
-          <p className={`skew-x-[20deg] ${props.icon ? "flex items-center gap-2" : ""}`}>
-            {props?.icon}
-            {props.title}
+          <p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
+            {icon}
+            {title}
           </p>
         </div>
       )}

ui/EmptySpace/index.tsx

@@ -18,7 +18,7 @@ type EmptySpaceProps = {
   link?: { text: string; href: string };
 };
 
-const EmptySpace = ({ title, description, children, Icon, link }: EmptySpaceProps) => {
+const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => {
   return (
     <>
       <div className="max-w-lg">
@@ -61,13 +61,13 @@ type EmptySpaceItemProps = {
   action: () => void;
 };
 
-const EmptySpaceItem = ({
+const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({
   title,
   description,
   bgColor = "blue",
   Icon,
   action,
-}: EmptySpaceItemProps) => {
+}) => {
   return (
     <>
       <li className="cursor-pointer" onClick={action}>

ui/HeaderButton/index.tsx

@@ -6,16 +6,29 @@ type HeaderButtonProps = {
     }
   ) => JSX.Element;
   label: string;
-  action: () => void;
+  disabled?: boolean;
+  onClick: () => void;
+  className?: string;
+  position?: "normal" | "reverse";
 };
 
-const HeaderButton = ({ Icon, label, action }: HeaderButtonProps) => {
+const HeaderButton = ({
+  Icon,
+  label,
+  disabled = false,
+  onClick,
+  className = "",
+  position = "normal",
+}: HeaderButtonProps) => {
   return (
     <>
       <button
         type="button"
-        className="bg-theme text-white border border-indigo-600 text-xs flex items-center gap-x-1 p-2 rounded-md font-medium whitespace-nowrap outline-none"
-        onClick={action}
+        className={`bg-theme text-white border border-indigo-600 text-xs flex items-center gap-x-1 p-2 rounded-md font-medium whitespace-nowrap outline-none ${
+          position === "reverse" && "flex-row-reverse"
+        } ${className}`}
+        disabled={disabled}
+        onClick={onClick}
       >
         <Icon className="h-4 w-4" />
         {label}

ui/index.ts

@@ -6,3 +6,5 @@ export { default as ListBox } from "./ListBox";
 export { default as Spinner } from "./Spinner";
 export { default as Tooltip } from "./Tooltip";
 export { default as SearchListbox } from "./SearchListbox";
+export * from "./Breadcrumbs";
+export * from "./EmptySpace";