time-calendar
Version:
Shows the schedule, increases and decreases the calendar day, changing the schedule
74 lines (66 loc) • 1.77 kB
JavaScript
// src/components/Time/Time.styled.ts
import styled from "styled-components";
var Wrapper = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, 80px);
gap: 10px;
`;
var Cell = styled.div`
padding: 8px 16px;
border-radius: 16px;
border: 1px solid rgba(197, 193, 193, 0.77);
background-color: #fff;
text-align: center;
font-size: 14px;
font-weight: 400;
&:hover {
background-color: #f6f6f6;
border: 0;
cursor: pointer;
}
`;
// src/components/Time/Time.tsx
import { jsx } from "react/jsx-runtime";
// src/components/Calendar/Calendar.tsx
import { useState as useState2 } from "react";
// src/components/Calendar/Calendar.styled.ts
import styled2 from "styled-components";
var Wrapper2 = styled2.div`
max-width: 350px;
border-radius: 12px;
box-shadow: 0px 4px 16px 0px #0000000A;
background-color: white;
padding: 10px;
`;
var Header = styled2.div`
margin-bottom: 16px;
display: flex;
justify-content: space-between;
`;
var FormatedDate = styled2.span`
font-size: 16px;
font-weight: 600;
`;
var NavWrapper = styled2.div`
display: flex;
justify-content: space-between;
gap: 10px;
`;
var Nav = styled2.button`
padding: 6px 10px;
border-radius: 12px;
background-color: rgba(197, 193, 193, 0.77);
border: 0;
&:hover {
background-color: #f6f6f6;
border: 0;
cursor: pointer;
}
`;
// src/components/Calendar/Calendar.tsx
import { format, addDays, subDays } from "date-fns";
// src/hooks/useDateFnsLocale.ts
import { useState, useEffect } from "react";
// src/components/Calendar/Calendar.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
//# sourceMappingURL=index.mjs.map