Note Example

class NoteTile extends StatelessWidget {
  final Note note;

  const NoteTile({
    super.key,
    required this.note,
  });

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    final colorScheme = Theme.of(context).colorScheme;

    return PostHogMaskWidget(
      child: MyCard(
        onTap: () => showNoteCard(context, note),
        padding: .all(12),
        child: Column(
          crossAxisAlignment: .start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              spacing: 12,
              children: [
                Flexible(
                  child: Text(
                    note.title,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: textTheme.titleMedium?.copyWith(
                      color: colorScheme.onSurfaceVariant,
                    ),
                  ),
                ),
                if (note.recipeId != null)
                  Icon(
                    LucideIcons.link2,
                    color: colorScheme.primary,
                  ),
              ],
            ),
            const Padding(
              padding: EdgeInsets.symmetric(vertical: 4),
              child: Divider(),
            ),
            Tag(
              label: Text(note.bodyReaction.title),
              highlightColor: note.bodyReaction.color,
              isSelected: true,
            ),
            const SizedBox(height: 4),
            Text(
              note.detailedReaction,
              maxLines: 2,
              overflow: TextOverflow.ellipsis,
              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 8),
            Align(
              alignment: Alignment.bottomRight,
              child: Text(
                DateFormat('d MMM').format(note.createdAt),
                style: Theme.of(context).textTheme.bodySmall,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void showNoteCard(
  BuildContext context,
  Note note, {
  bool? showActions,
  bool showBackLink = true,
}) {
  log('Showing note card for noteId: $noteId');
  PosthogService.captureNoteInteraction('note_opened');

  showModalBottomSheet<void>(
    useRootNavigator: true,
    context: context,
    backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh,
    builder: (context) => SingleChildScrollView(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      child: NoteCard(
        noteId: note,
        showActions: showActions,
        showBackLink: showBackLink,
      ),
    ),
  );
}

class NoteCard extends ConsumerWidget {
  final Note note;
  final bool showBackLink;
  final bool showActions;

  const NoteCard({
    super.key,
    required this.note,
    this.showBackLink = true,
    bool? showActions,
  }): showActions = testNote == null ? (showActions ?? true) : false;


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final textTheme = Theme.of(context).textTheme;

    return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: 8,
            children: [
              _Heading(
                note: note,
                showActions: showActions,
                showBackLink: showBackLink,
              ),
              _ReactionSection(note: note),
              if (note.opinion != null)
                InfoCard(
                  title: 'Taste and Enjoyment',
                  child: Text(note.opinion!, style: textTheme.bodyMedium),
                ),
              if (note.observations != null)
                InfoCard(
                  title: 'Potential Triggers or Aids',
                  child: Text(note.observations!, style: textTheme.bodyMedium),
                ),
              if (note.improvements != null)
                InfoCard(
                  title: 'Improvements or Changes',
                  child: Text(note.improvements!, style: textTheme.bodyMedium),
                ),
              Align(
                alignment: Alignment.centerRight,
                child: MyCard(
                  padding: .all(8),
                  child: Text(
                    DateFormat('dd MMM yyyy').format(note.createdAt),
                    style: Theme.of(
                      context,
                    ).textTheme.bodySmall?.copyWith(fontStyle: .italic),
                  ),
                ),
              ),
            ],
          )
  }
}