Avatar

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17

import { Avatar } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Avatar
        aria-hidden="true"
        className=""
        fallback="AL"
        name="Ada Lovelace"
        size="md"
        slotProps={{ image: { className: "" } }}
      />
      <span>Ada Lovelace</span>
    </>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37

@layer components {
  [data-uiify-avatar] {
    display: inline-grid;
    place-items: center;
    overflow: clip;
    border-radius: var(--radius-full);
    background: var(--muted);
    color: var(--muted-foreground);
    font-weight: var(--weight-medium);
    line-height: 1;
    vertical-align: middle;
  }

  [data-uiify-avatar][data-size="sm"] {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: var(--text-xs);
  }

  [data-uiify-avatar]:is(:not([data-size]), [data-size="md"]) {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    font-size: var(--text-sm);
  }

  [data-uiify-avatar][data-size="lg"] {
    inline-size: 3rem;
    block-size: 3rem;
    font-size: var(--text-base);
  }

  [data-uiify-avatar] > [data-part="image"] {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24

import { Avatar } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Avatar
        aria-hidden="true"
        className="
          inline-grid place-items-center overflow-clip rounded-[var(--radius-full)] bg-muted text-muted-foreground
          font-[number:var(--weight-medium)] leading-none [vertical-align:middle] data-[size=sm]:[inline-size:2rem]
          data-[size=sm]:[block-size:2rem] data-[size=sm]:text-xs
          [&:is(:not([data-size]),[data-size=md])]:[inline-size:2.5rem]
          [&:is(:not([data-size]),[data-size=md])]:[block-size:2.5rem] [&:is(:not([data-size]),[data-size=md])]:text-sm
          data-[size=lg]:[inline-size:3rem] data-[size=lg]:[block-size:3rem] data-[size=lg]:text-base
        "
        fallback="AL"
        name="Ada Lovelace"
        size="md"
        slotProps={{ image: { className: "block [inline-size:100%] [block-size:100%] object-cover" } }}
      />
      <span>Ada Lovelace</span>
    </>
  );
}