TF-2040 Create CalendarDateIconWidget

(cherry picked from commit ebe81b9eb18c4b2a963d4a1544efd009ae59aec1)
2023-07-25 19:57:07 +07:00
parent 5c7fc3c911
commit 4011f49a16
2 changed files with 102 additions and 0 deletions
@@ -0,0 +1,10 @@
+
+class CalendarIconWidgetStyles {
+  static const double borderRadius = 8;
+  static const double headerVerticalContentPadding = 4;
+  static const double headerHorizontalContentPadding = 8;
+  static const double headerTextSize = 14;
+  static const double bodyDayTextSize = 40;
+  static const double bodyWeekDayTextSize = 14;
+  static const double bodyContentPadding = 8;
+}
@@ -0,0 +1,92 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:jmap_dart_client/jmap/mail/calendar/calendar_event.dart';
+import 'package:tmail_ui_user/features/email/presentation/extensions/calendar_event_extension.dart';
+import 'package:tmail_ui_user/features/email/presentation/styles/calendar_date_icon_widget_styles.dart';
+
+class CalendarDateIconWidget extends StatelessWidget {
+
+  final CalendarEvent calendarEvent;
+  final double width;
+
+  const CalendarDateIconWidget({
+    super.key,
+    required this.calendarEvent,
+    this.width = 100
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      clipBehavior: Clip.antiAlias,
+      width: width,
+      decoration: const ShapeDecoration(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(CalendarIconWidgetStyles.borderRadius))),
+        color: Colors.white,
+        shadows: [
+          BoxShadow(
+            color: AppColor.colorShadowBgContentEmail,
+            blurRadius: 80,
+            offset: Offset(0, 1),
+            spreadRadius: 0,
+          ),
+          BoxShadow(
+            color: AppColor.colorShadowCalendarDateIcon,
+            blurRadius: 3,
+            offset: Offset(0, 1),
+            spreadRadius: 1,
+          )
+        ],
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Container(
+            color: AppColor.primaryColor,
+            padding: const EdgeInsetsDirectional.symmetric(
+              vertical: CalendarIconWidgetStyles.headerVerticalContentPadding,
+              horizontal: CalendarIconWidgetStyles.headerHorizontalContentPadding
+            ),
+            width: width,
+            child: Text(
+              calendarEvent.monthStartDateAsString,
+              textAlign: TextAlign.center,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.headerTextSize,
+                fontWeight: FontWeight.w400,
+                color: Colors.white
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(CalendarIconWidgetStyles.bodyContentPadding),
+            child: Text(
+              calendarEvent.dayStartDateAsString,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.bodyDayTextSize,
+                fontWeight: FontWeight.w700,
+                color: Colors.black
+              ),
+            ),
+          ),
+          const Padding(
+            padding: EdgeInsets.symmetric(horizontal: CalendarIconWidgetStyles.bodyContentPadding),
+            child: Divider(color: AppColor.colorCalendarEventInformationStroke, height: 2)
+          ),
+          Padding(
+            padding: const EdgeInsets.all(CalendarIconWidgetStyles.bodyContentPadding),
+            child: Text(
+              calendarEvent.weekDayStartDateAsString,
+              style: const TextStyle(
+                fontSize: CalendarIconWidgetStyles.bodyWeekDayTextSize,
+                fontWeight: FontWeight.w400,
+                color: Colors.black
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}