feat(date): Date preview

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')}

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 };