[draft] feat: Entries Filters and Entry Screen

app/App.tsx

@@ -7,6 +7,7 @@ import Wagmi from "~/providers/Wagmi";
 import { AppLayout } from "~/components/AppLayout";
 import { Outlet } from "@remix-run/react";
 import { RosetteStone } from "./providers/RosetteStone";
+import { FnEntriesFilters } from "./providers/FnEntriesFilters";
 
 export type AppContext = {
   displayTopBar(display: boolean): void;
@@ -24,17 +25,19 @@ export const App = () => {
       <Wagmi>
         <RosetteStone>
           <AppReady>
-            <AppLayout
-              displayTopBar={displayTopBar}
-              displayBottomBar={displayBottomBar}
-            >
-              <Outlet
-                context={{
-                  displayTopBar: setDisplayTopBar,
-                  displayBottomBar: setDisplayBottomBar,
-                }}
-              />
-            </AppLayout>
+            <FnEntriesFilters>
+              <AppLayout
+                displayTopBar={displayTopBar}
+                displayBottomBar={displayBottomBar}
+              >
+                <Outlet
+                  context={{
+                    displayTopBar: setDisplayTopBar,
+                    displayBottomBar: setDisplayBottomBar,
+                  }}
+                />
+              </AppLayout>
+            </FnEntriesFilters>
           </AppReady>
         </RosetteStone>
       </Wagmi>

app/components/EntriesFilters/DateRangeCustom/index.tsx

@@ -0,0 +1,47 @@
+import React, { useCallback, useRef } from "react";
+import { DateRange } from "react-date-range";
+import styled from "styled-components";
+import { useOnClickOutside } from "~/hooks/useOutsideAlerter";
+
+type DataRangeCustomProps = {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  onChange: (dateRange: any) => void;
+  ranges: [{ startDate: Date; endDate: Date; key: string }];
+};
+
+const DateRangeCustom = ({
+  show,
+  setShow,
+  onChange,
+  ranges = [{ startDate: new Date(), endDate: new Date(), key: "selection" }],
+}: DataRangeCustomProps) => {
+  const ref = useRef();
+
+  const handleClose = useCallback(() => {
+    setShow(false);
+  }, [setShow]);
+
+  useOnClickOutside(ref, handleClose);
+
+  return (
+    <DateRangeContainer ref={ref} show={show}>
+      <DateRange
+        rangeColors={["#F86E38"]}
+        ranges={ranges}
+        onChange={onChange}
+      />
+    </DateRangeContainer>
+  );
+};
+
+const DateRangeContainer = styled.div`
+  z-index: 1;
+  position: absolute;
+  display: ${({ show }: { show: boolean }) => (show ? "block" : "none")};
+  text-align: center;
+  margin-top: 60px;
+  background-color: rgba(0, 0, 0, 1);
+`;
+
+export default DateRangeCustom;

app/components/EntriesFilters/DateRangeCustom/style.css

@@ -0,0 +1,26 @@
+.rdrCalendarWrapper {
+    background-color: #FDE9BC;    
+    border: 2px solid #CFC7B5;
+    border-radius: 12px;
+}
+
+.rdrDateDisplayWrapper {
+    background-color: #A2957A;
+    border-radius: 10px 10px 0 0 ;
+}
+
+.rdrDateDisplayItemActive {
+    border: 2px solid #F86E38;
+}
+
+.rdrDateDisplayItem input {
+    background-color: #2B2727;
+    color: #FDE9BC;
+    font-size: 16px;
+    border-radius: 3px;
+}
+
+.rdrDateDisplayItem {
+    box-shadow: none;
+    background-color: transparent;
+}