Components · attachment
Attachment
A file handed over with a message, as a small ticket: what it is, how big, and whether it has arrived.
npx shadcn add @patina/attachmentSound and photo
Tickets%22%20style%3D%22translate%3Acalc(var(--misregister%2C%201px)%20*%20-0.86)%20calc(var(--misregister%2C%201px)%20*%200.72)%3Bmix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M-7.8%20119.8%20C-2.7%20119.6%2012.9%20118.5%2023.6%20117.8%20C34.3%20117.1%2045.9%20116.5%2056.5%20115.6%20C67.2%20114.8%2077%20113.3%2087.7%20112.7%20C98.4%20112.1%20110.1%20111.8%20120.7%20112%20C131.4%20112.1%20141%20112.8%20151.4%20113.7%20C161.9%20114.5%20172.8%20116.5%20183.5%20117.3%20C194.2%20118.1%20205.1%20118.4%20215.8%20118.6%20C226.5%20118.7%20242.6%20118.3%20247.8%20118.2%20M-8.9%20119.1%20C-4.1%20119.1%2011.7%20119.7%2022.6%20118.8%20C33.4%20117.9%2045.3%20115.2%2056.1%20113.9%20C67%20112.5%2077.1%20111.1%2087.7%20110.9%20C98.4%20110.7%20109%20112.4%20119.8%20112.7%20C130.6%20113%20141.7%20112.2%20152.4%20112.8%20C163%20113.3%20173.4%20115.3%20183.8%20116.1%20C194.2%20117%20203.9%20117.7%20214.8%20117.8%20C225.8%20118%20244%20117.1%20249.4%20116.9%22%20style%3D%22stroke%3A%234a2b5e%3Bstroke-width%3A4.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M-7.1%20129.7%20C-2.1%20129.9%2012.7%20129.7%2023.1%20130.5%20C33.6%20131.3%2044.7%20133.1%2055.4%20134.5%20C66%20135.9%2076.3%20138%2087%20139%20C97.8%20140%20109.2%20140.4%20119.9%20140.4%20C130.6%20140.5%20140.5%20140.2%20151.2%20139.1%20C161.9%20138.1%20173.5%20135.6%20184.2%20134.2%20C194.9%20132.8%20205%20131.7%20215.5%20130.9%20C226%20130.2%20241.6%20129.7%20247.2%20129.7%20M-8%20128.6%20C-2.6%20128.5%2014.2%20128.2%2025.1%20128.8%20C36%20129.5%2047.3%20130.7%2057.6%20132.6%20C67.9%20134.5%2076.6%20138.7%2086.8%20140.1%20C96.9%20141.4%20107.7%20140.8%20118.5%20140.6%20C129.4%20140.3%20140.9%20139.7%20152%20138.5%20C163.1%20137.3%20174%20134.5%20184.9%20133.2%20C195.8%20132%20206.9%20131.4%20217.5%20131.1%20C228.1%20130.8%20243.6%20131.5%20248.5%20131.4%22%20style%3D%22stroke%3A%234a2b5e%3Bstroke-width%3A2.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M-9%20150%20C-3.5%20150.6%2013.6%20151.6%2024.6%20152.9%20C35.6%20154.2%2046.1%20157%2056.8%20158%20C67.5%20158.9%2078.4%20158.6%2089%20158.5%20C99.6%20158.4%20109.8%20158.5%20120.3%20157.4%20C130.8%20156.2%20141.3%20153%20151.9%20151.6%20C162.6%20150.2%20173.4%20149.3%20184.2%20149.1%20C194.9%20148.9%20205.7%20149.5%20216.5%20150.3%20C227.3%20151.1%20243.7%20153.7%20248.9%20154%20M-7.6%20149.1%20C-2.1%20149.8%2013.4%20152.8%2024.1%20154.1%20C34.8%20155.3%2046.1%20155.5%2056.5%20156.4%20C66.9%20157.3%2076%20159.7%2086.5%20159.4%20C96.9%20159.2%20108%20156%20119.1%20155%20C130.3%20154%20142.2%20154.1%20153.1%20153.4%20C164.1%20152.7%20174.4%20151.3%20184.8%20150.8%20C195.3%20150.2%20205.4%20149.7%20215.9%20150.1%20C226.4%20150.5%20242.5%20152.4%20248%20153.2%22%20style%3D%22stroke%3A%234a2b5e%3Bstroke-width%3A2.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M-8.4%20176.7%20C-2.9%20176.6%2013.4%20176.4%2024.1%20176.6%20C34.8%20176.8%2044.9%20177.4%2055.6%20177.9%20C66.3%20178.3%2077.7%20178.7%2088.3%20179.4%20C99%20180.1%20108.9%20181.9%20119.4%20182.3%20C130%20182.8%20140.8%20182.6%20151.7%20182.3%20C162.6%20181.9%20174.2%20181.1%20184.9%20180.2%20C195.6%20179.4%20205.6%20177.9%20216.2%20177.2%20C226.8%20176.6%20243.1%20176.4%20248.4%20176.3%20M-6.7%20178.5%20C-1.2%20178.2%2013.1%20175.4%2023.3%20175%20C33.6%20174.6%2043.8%20175.4%2054.7%20176.2%20C65.6%20177%2077.7%20179%2088.7%20180%20C99.8%20181.1%20110.4%20181.8%20121.1%20182.6%20C131.8%20183.3%20142.5%20184.4%20152.8%20184.3%20C163%20184.3%20172.3%20183.4%20182.7%20182.1%20C193.1%20180.8%20204.6%20177.9%20215.4%20176.7%20C226.1%20175.6%20241.6%20175.3%20247.1%20175.2%22%20style%3D%22stroke%3A%234a2b5e%3Bstroke-width%3A2.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22patina-drum%22%20data-drum%3D%22detail%22%20filter%3D%22url(%23patina-print-horizon-uy3bv0-detail)%22%20style%3D%22translate%3Acalc(var(--misregister%2C%201px)%20*%200.55)%20calc(var(--misregister%2C%201px)%20*%200.36)%3Bmix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M48.9%2029.7%20C50.6%2030.3%2055.6%2033.9%2058.7%2033.8%20C61.8%2033.8%2066.2%2030%2067.6%2029.3%20M47.8%2031.2%20C49.5%2032%2055.1%2035%2058.3%2034.8%20C61.6%2034.6%2065.8%2030.6%2067.3%2029.9%22%20style%3D%22stroke%3A%23304a8c%3Bstroke-width%3A2.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M73.1%2039.7%20C74.3%2040.3%2077.8%2044%2080.1%2044%20C82.4%2044%2085.8%2040.3%2086.9%2039.7%20M72.1%2041.4%20C73.1%2041.8%2077%2042.9%2079.4%2042.8%20C81.8%2042.6%2085.1%2040.8%2086.4%2040.5%22%20style%3D%22stroke%3A%23304a8c%3Bstroke-width%3A2.2%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3C%2Fg%3E%3Cg%20class%3D%22patina-drum%22%20data-drum%3D%22accent%22%20filter%3D%22url(%23patina-print-horizon-uy3bv0-accent)%22%20style%3D%22translate%3Acalc(var(--misregister%2C%201px)%20*%20-0.54)%20calc(var(--misregister%2C%201px)%20*%200.70)%3Bmix-blend-mode%3Amultiply%22%3E%3Cpath%20d%3D%22M132%2036.4%20C138.4%2034.1%20148.2%2034.5%20155%2036.9%20C161.7%2039.3%20168.6%2045%20172.6%2050.9%20C176.6%2056.8%20179.2%2065.4%20179%2072.4%20C178.7%2079.4%20175.7%2087.4%20171%2092.8%20C166.4%2098.2%20158.2%20103%20151.3%20104.7%20C144.3%20106.5%20136.1%20106%20129.3%20103.4%20C122.6%20100.9%20114.6%2095.4%20110.7%2089.5%20C106.8%2083.7%20105.3%2075.3%20105.7%2068.3%20C106.2%2061.3%20108.7%2053%20113.5%2047.5%20C118.4%2042%20130.8%2037.4%20134.9%2035.5%20C139%2033.5%20138.1%2035.2%20138.2%2035.9%20M135.2%2035.1%20C141.8%2033.5%20151%2035.7%20157.6%2038.8%20C164.1%2041.8%20170.9%2047.5%20174.5%2053.4%20C178.2%2059.4%20180.2%2067.6%20179.4%2074.4%20C178.6%2081.3%20174.7%2089.3%20169.8%2094.5%20C164.9%2099.6%20157.2%20104%20150.2%20105.4%20C143.2%20106.7%20134.2%20105.2%20127.6%20102.3%20C120.9%2099.5%20113.9%2094%20110.2%2088.1%20C106.5%2082.1%20104.6%2073.5%20105.5%2066.6%20C106.3%2059.8%20110.4%2052.1%20115.2%2047%20C120%2041.9%20131.1%2037.9%20134.3%2036.2%20C137.5%2034.6%20134.4%2036.6%20134.5%2037%22%20style%3D%22stroke%3Anone%3Bstroke-width%3A0%3Bfill%3A%23c2602f%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M140.1%2035%20C146.9%2034.1%20156.5%2036.3%20162.5%2040.2%20C168.5%2044%20173.6%2051.7%20176.2%2058.3%20C178.7%2065%20179.8%2073.3%20178%2080.1%20C176.1%2086.9%20170.9%2094.6%20165.2%2098.9%20C159.5%20103.1%20151.1%20105.4%20143.8%20105.7%20C136.6%20106%20127.9%20104.6%20121.9%20100.7%20C115.9%2096.8%20110.2%2089.2%20107.7%2082.5%20C105.2%2075.8%20105.1%2067.3%20107%2060.7%20C108.8%2054.1%20113.1%2047.1%20119%2042.8%20C124.9%2038.5%20138.1%2036.2%20142.2%2035%20C146.3%2033.8%20143.6%2035.1%20143.5%2035.6%20M153.5%2036.5%20C160%2037.8%20166.8%2043.3%20171%2049%20C175.3%2054.6%20178.7%2063.5%20178.8%2070.4%20C178.9%2077.3%20175.6%2084.9%20171.5%2090.4%20C167.4%2095.9%20160.8%20101.1%20154.2%20103.4%20C147.6%20105.7%20139%20106.1%20132%20104.1%20C125%20102.2%20116.5%2097.1%20112.2%2091.8%20C107.8%2086.4%20105.9%2079.1%20105.9%2072.1%20C105.9%2065.1%20108%2055.6%20112.1%2049.7%20C116.2%2043.7%20123.8%2038.8%20130.6%2036.5%20C137.4%2034.2%20149.5%2035.6%20153.1%2035.7%20C156.6%2035.9%20152.5%2036.6%20152.1%2037.4%22%20style%3D%22stroke%3A%23c2602f%3Bstroke-width%3A1%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M119.1%20124.7%20C133.5%20123.9%20144.5%20124.8%20165.7%20123.7%20M119.6%20124.4%20C131.5%20123.6%20142.9%20125.2%20164.8%20124.9%22%20style%3D%22stroke%3A%23c2602f%3Bstroke-width%3A2.6%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M126.4%20144.6%20C135.1%20145.4%20145.2%20145.7%20157.2%20144.9%20M126.8%20143.1%20C138.2%20143.4%20148.4%20143.5%20157.3%20143.7%22%20style%3D%22stroke%3A%23c2602f%3Bstroke-width%3A2.6%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3Cpath%20d%3D%22M132%20161.1%20C137.1%20161.9%20143.2%20161.3%20151.5%20163.2%20M132.8%20163%20C136.6%20162.6%20141.3%20162.6%20152.2%20163.8%22%20style%3D%22stroke%3A%23c2602f%3Bstroke-width%3A2.6%3Bfill%3Anone%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Tile
States
Idle
Uploading
Processing
Error
Name only
Sizes
default
sm
xs
In a composer