feat: ai document (#8793)

* Refactor AI course

* Add AI course generation functionality

* Add basic error handling

* AI Document content

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* feat: regenerate guide

* wip

* wip

* wip

* wip

* wip

* fix: form ui

* feat: update guide ui

* refactor: update the course card

* fix: term and redirects

* Guide page UI improvements

* Loading chip refactor

* AI guide changes

* Improve UI for ai guide content

* Add AI guide

* AI Guide chat

* fix: stop streaming

* fix: chat responsiveness

* UI improvements for ai library

* Guide listing UI update

* User guides listing

* Library guides listing UI

* Library guides listing UI

* Featured courses listing UI update

* Staff picks UI changes

* Community page UI design

* Explore courses listing functionality

* Improve UI for explore page

* Implement guides functionality

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

src/components/ContentGenerator/FormatItem.tsx

@@ -0,0 +1,29 @@
+import { type LucideIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+
+type FormatItemProps = {
+  label: string;
+  onClick: () => void;
+  icon: LucideIcon;
+  isSelected: boolean;
+};
+
+export function FormatItem(props: FormatItemProps) {
+  const { label, onClick, icon: Icon, isSelected } = props;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full flex-col items-center justify-center gap-2.5 rounded-xl border border-gray-200 p-2 py-8',
+        isSelected
+          ? 'border-gray-400 font-medium bg-white'
+          : 'bg-white text-gray-400 hover:bg-white hover:border-gray-300',
+      )}
+      onClick={onClick}
+    >
+      <Icon className="size-6" />
+      <span>{label}</span>
+    </button>
+  );
+}