Sheet

1
import * as React from 'react';
2
// import styled from 'styled-components';
3
import { Sheet } from '@kubed/components';
4

5
// const { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTrigger, SheetFieldTitle } = Sheets;
6

7
// const SheetContentChildrenWrapper = styled.div`
8
//  display: grid;
9
//  grid-template-rows: auto 1fr auto;
10
//  height: 100%;
11
// `;
12

13
() => {
14
  const SHEET_SIDES = ['top', 'right', 'bottom', 'left'];
15
  const wrapper = (side) => {
16
    // if (side === 'left' || side === 'right') {
17
    //   return SheetContentChildrenWrapper;
18
    // }
19
    return 'div';
20
  };
21

22
  return SHEET_SIDES.map((side) => {
23
    const Wrapper = wrapper('left');
24
    return (
25
      <Sheet.Sheet>
26
        <Sheet.SheetTrigger asChild>
27
          <Button variant="outline">{side}</Button>
28
        </Sheet.SheetTrigger>
29
        <Sheet.SheetContent width={1200} side={side}>
30
          <Wrapper>
31
            <Sheet.SheetHeader>
32
              <Sheet.SheetFieldTitle
33
                title="Edit profile"
34
                description="Make changes to your profile here. Click save when you are done."
35
              />
36
            </Sheet.SheetHeader>
37
            body
38
            <Sheet.SheetFooter>
39
              <Sheet.SheetClose asChild>
40
                <Button type="submit">Save changes</Button>
41
              </Sheet.SheetClose>
42
            </Sheet.SheetFooter>
43
          </Wrapper>
44
        </Sheet.SheetContent>
45
      </Sheet.Sheet>
46
    );
47
  });
48
};
49