From a5a3a1848612b5cbb697695ef708bff3c4ec7cf8 Mon Sep 17 00:00:00 2001
From: alexsparkes <alexsparkes@gmail.com>
Date: Mon, 16 Dec 2024 14:29:39 +0000
Subject: [PATCH] feat(date): Date preview

---
 src/features/date/options/DateOptions.jsx | 29 +++++++++++-----------
 src/features/date/options/DatePreview.jsx | 30 +++++++++++++++++++++++
 2 files changed, 45 insertions(+), 14 deletions(-)
 create mode 100644 src/features/date/options/DatePreview.jsx

diff --git a/src/features/date/options/DateOptions.jsx b/src/features/date/options/DateOptions.jsx
index 46816e62..f40d8935 100644
--- a/src/features/date/options/DateOptions.jsx
+++ b/src/features/date/options/DateOptions.jsx
@@ -3,8 +3,10 @@ import { useState } from 'react';
 
 import { Header } from 'components/Layout/Settings';
 import { Checkbox, Dropdown } from 'components/Form/Settings';
+import { Hero, Preview, Controls } from 'components/Layout/Settings/Hero';
 
 import { Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import DatePreview from './DatePreview';
 
 import defaults from './default';
 
@@ -80,20 +82,19 @@ function DateOptions() {
 
   return (
     <>
-      <Header
-        title={variables.getMessage('settings:sections.date.title')}
-        setting="date"
-        category="date"
-        element=".date"
-        zoomSetting="zoomDate"
-        visibilityToggle={true}
-      />
-      <PreferencesWrapper
-        setting="date"
-        visibilityToggle={true}
-        category="date"
-        zoomSetting="zoomDate"
-      >
+      <Hero>
+        <Preview>
+          <DatePreview />
+        </Preview>
+        <Controls
+          setting="date"
+          category="date"
+          element=".date"
+          zoomSetting="zoomDate"
+          visibilityToggle={true}
+        />
+      </Hero>
+      <PreferencesWrapper setting="date">
         <Row>
           <Content
             title={variables.getMessage('settings:sections.time.type')}
diff --git a/src/features/date/options/DatePreview.jsx b/src/features/date/options/DatePreview.jsx
new file mode 100644
index 00000000..1092731f
--- /dev/null
+++ b/src/features/date/options/DatePreview.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import DateWidget from 'features/date/Date';
+
+const DatePreview = ({ zoomLevel = 100 }) => {
+  const dateType = localStorage.getItem('dateType') || 'long';
+
+  return (
+    <AnimatePresence mode="crossfade">
+      <motion.div
+        className="absolute"
+        key={`date-preview-${dateType}`}
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{
+          opacity: 1,
+          scale: zoomLevel / 100,
+        }}
+        exit={{ opacity: 0, scale: 0.95 }}
+        transition={{
+          opacity: { duration: 0.2 },
+          scale: { duration: 0.3, ease: 'anticipate' },
+        }}
+      >
+        <DateWidget isPreview={true} staticDate={new Date(2024, 2, 15)} />
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export { DatePreview, DatePreview as default };