style: create a whole sections instead of having the create custom statement floating around

Author: AlexVOiceover

src/features/statements/components/StatementList.tsx

@@ -13,7 +13,8 @@ import statementsCategories from '@/data/statementsCategories.json';
 import { formatCategoryName } from '@/lib/utils';
 import { updateEntry } from '../api/entriesApi';
 import { EditStatementModal } from '../../wizard/components/EditStatementModal';
-import { BellOff, ChevronUp, ChevronDown } from 'lucide-react';
+import { BellOff, ChevronUp, ChevronDown, Plus } from 'lucide-react';
+import { Button } from '../../../components/ui/button';
 
 // Helper function to normalize category IDs for consistent comparison
 const normalizeCategoryIdForGrouping = (id: string): string => {
@@ -58,7 +59,15 @@ const groupStatementsByCategory = (statements: Entry[]) => {
   }, {});
 };
 
-const StatementList: React.FC<{ username: string }> = ({ username }) => {
+interface StatementListProps {
+  username: string;
+  onAddCustomStatement?: () => void;
+}
+
+const StatementList: React.FC<StatementListProps> = ({ 
+  username,
+  onAddCustomStatement 
+}) => {
   const { data, setData } = useEntries();
   const { entries } = data;
 
@@ -541,6 +550,26 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
         {/* Snoozed sections */}
         {renderSnoozedQuestionsSection()}
 
+        {/* Add custom statement section */}
+        {onAddCustomStatement && (
+          <div className="mt-8 border-t pt-8 text-center">
+            <div className="max-w-md mx-auto">
+              <h3 className="text-lg font-medium text-gray-700 mb-2">Want to add your own statement?</h3>
+              <p className="text-gray-500 mb-4">
+                Create a custom statement to add anything that's not covered by the questions above.
+              </p>
+              <Button
+                onClick={onAddCustomStatement}
+                variant="pink"
+                className="flex items-center px-6 py-2 mx-auto shadow-sm"
+              >
+                <Plus className="w-5 h-5 mr-2" />
+                <span>Add custom statement</span>
+              </Button>
+            </div>
+          </div>
+        )}
+        
         <ConfirmationDialog
           isOpen={deleteConfirmation.isOpen}
           onClose={handleDeleteCancel}

src/layouts/components/MainPage.tsx

@@ -9,7 +9,7 @@ import {
 import StatementList from '../../features/statements/components/StatementList';
 import { useEntries } from '../../features/statements/hooks/useEntries';
 import { Button } from '../../components/ui/button';
-import { Plus, Mail } from 'lucide-react';
+import { Mail } from 'lucide-react';
 import StatementWizard from '../../features/wizard/components/StatementWizard';
 import ShareEmailModal from '../../components/modals/ShareEmailModal';
 import PrivacyModal from '../../components/modals/PrivacyModal';
@@ -54,35 +54,29 @@ const MainPage: React.FC = () => {
               ? `${username} would like to share with ${managerName}`
               : `${username}'s statements for sharing`}
           </h1>
-
-          <Button
-            onClick={handleNewStatement}
-            variant='pink'
-            className='flex items-center px-3 h-10 shadow-sm whitespace-nowrap self-start'
-          >
-            <Plus className='w-5 h-5 mr-1 flex-shrink-0' />
-            <span>Add statement</span>
-          </Button>
         </div>
       </div>
 
       <div className='container mx-auto px-4 flex-grow'>
-        <StatementList username={username} />
+        <StatementList
+          username={username}
+          onAddCustomStatement={handleNewStatement}
+        />
       </div>
-      
+
       {/* Footer with privacy links */}
-      <footer className="mt-auto pt-6 pb-4 bg-gray-50 border-t border-gray-200">
-        <div className="container mx-auto px-4">
-          <div className="flex flex-col sm:flex-row justify-center items-center text-xs text-gray-500 space-y-2 sm:space-y-0 sm:space-x-4">
-            <button 
+      <footer className='mt-auto pt-6 pb-4 bg-gray-50 border-t border-gray-200'>
+        <div className='container mx-auto px-4'>
+          <div className='flex flex-col sm:flex-row justify-center items-center text-xs text-gray-500 space-y-2 sm:space-y-0 sm:space-x-4'>
+            <button
               onClick={() => setIsPrivacyModalOpen(true)}
-              className="hover:text-brand-pink hover:underline"
+              className='hover:text-brand-pink hover:underline'
             >
               Privacy Policy
             </button>
-            <button 
+            <button
               onClick={() => setIsTermsModalOpen(true)}
-              className="hover:text-brand-pink hover:underline"
+              className='hover:text-brand-pink hover:underline'
             >
               Terms of Use
             </button>
@@ -139,12 +133,12 @@ const MainPage: React.FC = () => {
       {isShareModalOpen && (
         <ShareEmailModal onClose={() => setIsShareModalOpen(false)} />
       )}
-      
+
       {/* Conditionally render the privacy modal */}
       {isPrivacyModalOpen && (
         <PrivacyModal onClose={() => setIsPrivacyModalOpen(false)} />
       )}
-      
+
       {/* Conditionally render the terms modal */}
       {isTermsModalOpen && (
         <TermsModal onClose={() => setIsTermsModalOpen(false)} />