mirror of
				https://github.com/strapi/strapi.git
				synced 2025-11-04 03:43:34 +00:00 
			
		
		
		
	FileWrapper wip
This commit is contained in:
		
							parent
							
								
									2fc117b11e
								
							
						
					
					
						commit
						d3f0015ea9
					
				@ -2,8 +2,9 @@ import React from 'react';
 | 
				
			|||||||
import PropTypes from 'prop-types';
 | 
					import PropTypes from 'prop-types';
 | 
				
			||||||
import styled from 'styled-components';
 | 
					import styled from 'styled-components';
 | 
				
			||||||
import { Avatar } from '@strapi/parts/Avatar';
 | 
					import { Avatar } from '@strapi/parts/Avatar';
 | 
				
			||||||
import { Text } from '@strapi/parts/Text';
 | 
					import { TableLabel } from '@strapi/parts/Text';
 | 
				
			||||||
import { Row } from '@strapi/parts/Row';
 | 
					import { Row } from '@strapi/parts/Row';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 | 
					import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
// TODO: this is very temporary until we get a design
 | 
					// TODO: this is very temporary until we get a design
 | 
				
			||||||
@ -12,7 +13,12 @@ const FileWrapper = styled(Row)`
 | 
				
			|||||||
  border-radius: 50%;
 | 
					  border-radius: 50%;
 | 
				
			||||||
  width: 26px;
 | 
					  width: 26px;
 | 
				
			||||||
  height: 26px;
 | 
					  height: 26px;
 | 
				
			||||||
  background: ${({ theme }) => theme.colors.neutral100};
 | 
					  border: 1px solid ${({ theme }) => theme.colors.neutral200};
 | 
				
			||||||
 | 
					  background: ${({ theme }) => theme.colors.neutral150};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  span {
 | 
				
			||||||
 | 
					    line-height: 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
`;
 | 
					`;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
 | 
					const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
 | 
				
			||||||
@ -28,8 +34,8 @@ const Media = ({ url, mime, alternativeText, name, ext, formats }) => {
 | 
				
			|||||||
  const fileExtension = getFileExtension(ext);
 | 
					  const fileExtension = getFileExtension(ext);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <FileWrapper>
 | 
					    <FileWrapper justifyContent="center" alignItems="center">
 | 
				
			||||||
      <Text textColor="neutral800">{fileExtension}</Text>
 | 
					      <TableLabel textColor="neutral600">{fileExtension}</TableLabel>
 | 
				
			||||||
    </FileWrapper>
 | 
					    </FileWrapper>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user