revamp template

src/partials/modals/share-profile/ModalShareProfile.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  ModalShareProfileViaLink,
+  ModalShareProfileViaEmail,
+  ModalShareProfileUsers,
+  ModalShareProfileSettings
+} from './';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+
+interface ModalShareProfileProps {
+  open: boolean;
+  onOpenChange: () => void;
+}
+
+const ModalShareProfile = ({ open, onOpenChange }: ModalShareProfileProps) => {
+  const scrollableHeight = 300;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Share Profile</DialogTitle>
+          <DialogDescription></DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-5 px-0 py-5">
+          <ModalShareProfileViaLink />
+
+          <div className="border-b border-b-gray-200"></div>
+
+          <ModalShareProfileViaEmail />
+
+          <div className="border-b border-b-gray-200"></div>
+
+          <div className="scrollable-y-auto" style={{ maxHeight: `${scrollableHeight}px` }}>
+            <ModalShareProfileUsers />
+          </div>
+
+          <div className="border-b border-b-gray-200"></div>
+
+          <ModalShareProfileSettings />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { ModalShareProfile };

src/partials/modals/share-profile/ModalShareProfileSettings.tsx

@@ -0,0 +1,43 @@
+import { KeenIcon } from '@/components';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const ModalShareProfileSettings = () => {
+  return (
+    <div className="flex flex-col px-5 gap-4">
+      <label className="text-gray-900 font-semibold text-2sm">Settings</label>
+
+      <div className="flex flex-center justify-between flex-wrap gap-2">
+        <div className="flex flex-center gap-1.5">
+          <KeenIcon icon="user" className="text-gray-500" />
+
+          <div className="flex flex-center text-gray-700 font-medium text-xs">
+            Anyone at
+            <Link to="#" className="text-xs font-medium link mx-1">
+              KeenThemes
+            </Link>
+            can view
+          </div>
+        </div>
+
+        <button className="btn btn-sm btn-link">Change Access</button>
+      </div>
+
+      <div className="flex flex-center justify-between flex-wrap gap-2 mb-1">
+        <div className="flex flex-center gap-1.5">
+          <KeenIcon icon="icon" className="text-gray-500" />
+
+          <div className="flex flex-center text-gray-700 font-medium text-xs">
+            Anyone with link can edit
+          </div>
+        </div>
+
+        <button className="btn btn-sm btn-link">Set Password</button>
+      </div>
+
+      <button className="btn btn-primary justify-center">Done</button>
+    </div>
+  );
+};
+
+export { ModalShareProfileSettings };

src/partials/modals/share-profile/ModalShareProfileUsers.tsx

@@ -0,0 +1,74 @@
+import { toAbsoluteUrl } from '@/utils';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+
+const ModalShareProfileUsers = () => {
+  const items = [
+    {
+      avatar: '300-3.png',
+      userName: 'Tyler Hero',
+      email: 'tyler.hero@gmail.com',
+      role: 'owner'
+    },
+    {
+      avatar: '300-1.png',
+      userName: 'Esther Howard',
+      email: 'esther.howard@gmail.com',
+      role: 'editor'
+    },
+    {
+      avatar: '300-11.png',
+      userName: 'Jacob Jones',
+      email: 'jacob.jones@gmail.com',
+      role: 'viewer'
+    }
+  ];
+
+  return (
+    <div className="flex flex-col px-5 gap-2.5">
+      {items.map((item, index) => (
+        <div key={index} className="flex items-center flex-wrap gap-2">
+          <div className="flex items-center grow gap-2.5">
+            <img
+              src={toAbsoluteUrl(`/media/avatars/${item.avatar}`)}
+              className="rounded-full size-9 shrink-0"
+              alt={`${item.userName} avatar`}
+            />
+            <div className="flex flex-col">
+              <Link
+                to="#"
+                className="text-sm font-semibold text-gray-900 hover:text-primary-active mb-px"
+              >
+                {item.userName}
+              </Link>
+              <Link to="#" className="hover:text-primary-active text-2sm font-medium text-gray-600">
+                {item.email}
+              </Link>
+            </div>
+          </div>
+
+          <Select defaultValue={item.role}>
+            <SelectTrigger className="w-24" size="sm">
+              <SelectValue placeholder="Role" />
+            </SelectTrigger>
+            <SelectContent className="w-32">
+              <SelectItem value="owner">Owner</SelectItem>
+              <SelectItem value="editor">Editor</SelectItem>
+              <SelectItem value="viewer">Viewer</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export { ModalShareProfileUsers };

src/partials/modals/share-profile/ModalShareProfileViaEmail.tsx

@@ -0,0 +1,30 @@
+import { KeenIcon } from '@/components';
+import React, { useState } from 'react';
+
+const ModalShareProfileViaEmail = () => {
+  const [emailInput, setEmailInput] = useState('');
+  return (
+    <div className="flex flex-col px-5 gap-2.5">
+      <div className="flex flex-center gap-1">
+        <label className="text-gray-900 font-semibold text-2sm">Share via email</label>
+        <KeenIcon icon="information-2" className="text-gray-500 text-2sm" />
+      </div>
+
+      <div className="flex flex-center gap-2.5">
+        <label className="input">
+          <input
+            type="text"
+            name="query"
+            value={emailInput}
+            onChange={(e) => setEmailInput(e.target.value)}
+            placeholder="miles.turner@gmail.com"
+          />
+        </label>
+
+        <button className="btn btn-primary">Share</button>
+      </div>
+    </div>
+  );
+};
+
+export { ModalShareProfileViaEmail };

src/partials/modals/share-profile/ModalShareProfileViaLink.tsx

@@ -0,0 +1,29 @@
+import { KeenIcon } from '@/components';
+import React, { useState } from 'react';
+
+const ModalShareProfileViaLink = () => {
+  const [linkInput, setLinkInput] = useState('');
+  return (
+    <div className="flex flex-col px-5 gap-2.5">
+      <div className="flex flex-center gap-1">
+        <label className="text-gray-900 font-semibold text-2sm">Share read-only link</label>
+        <KeenIcon icon="information-2" className="text-gray-500 text-2sm" />
+      </div>
+
+      <label className="input">
+        <input
+          type="text"
+          name="query"
+          value={linkInput}
+          onChange={(e) => setLinkInput(e.target.value)}
+          placeholder="https://metronic.com/profiles/x7g2vA3kZ5"
+        />
+        <button className="btn btn-icon">
+          <KeenIcon icon="copy" />
+        </button>
+      </label>
+    </div>
+  );
+};
+
+export { ModalShareProfileViaLink };

src/partials/modals/share-profile/index.ts

@@ -0,0 +1,6 @@
+export * from './ModalShareProfile';
+export * from './ModalShareProfileViaLink';
+export * from './ModalShareProfileViaEmail';
+export * from './ModalShareProfileUsers';
+export * from './ModalShareProfileSettings';
+export * from './types';

src/partials/modals/share-profile/types.ts

@@ -0,0 +1,6 @@
+export interface IModalShareProfileDocsItem {
+  avatar: string;
+  userName: string;
+  email: string;
+  role: string;
+}