Merge pull request #67 from Lorg0n/feature/add-rules-for-collections

feat: add collection rules alert

features/collections/collection-edit/collection-rules-alert.component.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect } from 'react';
+import MaterialSymbolsInfoRounded from '~icons/material-symbols/info-rounded';
+
+import MDViewer from '@/components/markdown/viewer/MD-viewer';
+import { Button } from '@/components/ui/button';
+
+import { useModalContext } from '@/services/providers/modal-provider';
+
+const CollectionRulesAlert = () => {
+    const [rules, setRules] = React.useState('');
+    const { openModal } = useModalContext();
+
+    useEffect(() => {
+        fetch(
+            'https://raw.githubusercontent.com/hikka-io/rules/main/COLLECTION_RULES.md',
+        )
+            .then((res) => res.text())
+            .then((res) => setRules(res));
+    }, []);
+
+    return (
+        <div>
+            <div className="flex items-center gap-4 rounded-md border border-secondary/60 bg-secondary/30 p-4">
+                <MaterialSymbolsInfoRounded className="text-xl" />
+                <span className="flex-1 text-sm">
+                    Перш ніж створювати колекції, рекомендуємо ознайомитись з{' '}
+                    <Button
+                        onClick={() =>
+                            openModal({
+                                content: (
+                                    <MDViewer className="overflow-scroll px-6 py-4 md:overflow-hidden md:p-0">
+                                        {rules}
+                                    </MDViewer>
+                                ),
+                                title: 'Правила колекцій',
+                            })
+                        }
+                        variant="link"
+                        className="h-auto p-0 text-primary hover:underline"
+                    >
+                        нашими правилами
+                    </Button>{' '}
+                    створення колекцій.
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default CollectionRulesAlert;

features/collections/collection-edit/collection-title.component.tsx

@@ -4,6 +4,7 @@ import { useParams } from 'next/navigation';
 
 import PlateEditor from '@/components/markdown/plate-editor/plate-editor';
 import Header from '@/components/ui/header';
+import RulesAlert from '@/features/collections/collection-edit/collection-rules-alert.component';
 
 import { useCollectionContext } from '@/services/providers/collection-provider';
 
@@ -19,6 +20,7 @@ const CollectionTitle = () => {
     return (
         <div className="flex flex-col gap-4">
             <Header title={title || 'Нова колекція'} />
+            <RulesAlert />
             {((reference && description !== undefined) || !reference) && (
                 <PlateEditor
                     onChange={(markdown) =>