complate detail page

src/widgets/detail/ui/components/SourcesList.tsx

@@ -0,0 +1,65 @@
+import { blue } from '../../lib/constant';
+import { Source } from '../../lib/types';
+import EmptySourcesList from '../emptyList';
+import SectionTitle from './SectionTitle';
+
+export default function SourcesList({ sources }: { sources: Source[] }) {
+  return (
+    <>
+      <SectionTitle>Manbalar ro&apos;yxati</SectionTitle>
+      {sources.length > 0 ? (
+        <div className="mb-5">
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ borderBottom: `0.5px solid ${blue[100]}` }}>
+                <th
+                  className="text-left pb-2 font-medium"
+                  style={{ color: blue[600] }}
+                >
+                  URL
+                </th>
+                <th
+                  className="text-right pb-2 font-medium"
+                  style={{ color: blue[600] }}
+                >
+                  Modul
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sources.map((s, i) => (
+                <tr
+                  key={s.url}
+                  style={{ borderBottom: `0.5px solid ${blue[50]}` }}
+                >
+                  <td className="py-1.5 pr-4">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-1.5 h-1.5 rounded-full shrink-0"
+                        style={{ background: i < 3 ? blue[900] : blue[200] }}
+                      />
+                      <span
+                        className="text-[12px] truncate max-w-95 block"
+                        style={{ color: blue[800] }}
+                      >
+                        {s.url}
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    className="py-1.5 text-right text-[12px] whitespace-nowrap"
+                    style={{ color: blue[600] }}
+                  >
+                    {s.module}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <EmptySourcesList />
+      )}
+    </>
+  );
+}