react-icons/fi#FiFile JavaScript Examples
The following examples show how to use
react-icons/fi#FiFile.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ShareDialog.js From sailplane-web with GNU General Public License v3.0 | 6 votes |
|
shareTypes = [
{
name: 'default',
icon: FiFile,
},
{
name: 'image',
icon: FiImage,
},
{
name: 'audio',
icon: FiMusic,
},
]
Example #2
| Source File: Utils.js From sailplane-web with GNU General Public License v3.0 | 6 votes |
|
export function getIconForPath(type, filename) {
const ext = filenameExt(filename);
let iconComponent = FiFile;
if (isImageFileExt(ext)) {
iconComponent = FiImage;
} else if (isFileExtensionAudio(ext)) {
iconComponent = FiMusic;
} else if (isFileExtensionVideo(ext)) {
iconComponent = FiVideo;
} else if (isFileExtensionArchive(ext)) {
iconComponent = FiArchive;
}
if (type === 'dir') {
iconComponent = FaFolder;
}
return iconComponent;
}
Example #3
| Source File: MailboxList.js From CubeMail with MIT License | 4 votes |
|
MailboxList = () => {
const { getMessages, setCurrentLabel } = useContext(EmailContext);
const [active, setActive] = useState("INBOX");
const handleClick = (e) => {
const categoryId = e.target.id;
setActive(categoryId);
setCurrentLabel(categoryId);
// Get Messages using clicked category
getMessages(categoryId);
};
return (
<Box
w='16%'
h='100%'
bg='white'
border='1px'
borderColor='gray.200'
borderTopLeftRadius='md'
borderBottomLeftRadius='md'
>
<List>
{/* Send Model */}
<ListItem p='0.5rem 1rem 1rem'>
<SendModel />
</ListItem>
{/* Labels Buttons */}
<ListItem>
<Button
id='INBOX'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdInbox}
variantColor='blue'
variant={active === "INBOX" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Inbox
</Button>
</ListItem>
<ListItem>
<Button
id='STARRED'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdStar}
variantColor='blue'
variant={active === "STARRED" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Starred
</Button>
</ListItem>
<ListItem>
<Button
id='IMPORTANT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLabel}
variantColor='blue'
variant={active === "IMPORTANT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Important
</Button>
</ListItem>
<ListItem>
<Button
id='SENT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiSend}
variantColor='blue'
variant={active === "SENT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Sent
</Button>
</ListItem>
<ListItem>
<Button
id='DRAFT'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={FiFile}
variantColor='blue'
variant={active === "DRAFT" ? "solid" : "ghost"}
justifyContent='flex-start'
onClick={handleClick}
>
Drafts
</Button>
</ListItem>
<ListItem>
<Button
id='TRASH'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon='delete'
variantColor='blue'
variant={active === "TRASH" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Trash
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_SOCIAL'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdPeople}
variantColor='blue'
variant={active === "CATEGORY_SOCIAL" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Social
</Button>
</ListItem>
<ListItem>
<Button
id='CATEGORY_PROMOTIONS'
w='100%'
h='45px'
py={2}
pl={8}
leftIcon={MdLoyalty}
variantColor='blue'
variant={active === "CATEGORY_PROMOTIONS" ? "solid" : "ghost"}
justifyContent='flxex-start'
onClick={handleClick}
>
Promotions
</Button>
</ListItem>
</List>
</Box>
);
}
Example #4
| Source File: index.js From dashboard-reactjs with MIT License | 4 votes |
|
export default function FormsPage() {
const [ selectedCV, setSelectedCV ] = useState();
useEffect(() => {
document.title = 'Forms'
}, []);
return (
<>
<div className="col-12 title">
<h1>Forms</h1>
</div>
<div className="col-6 px-0">
<Card>
<div className="card-title">
<h3>Simple Form</h3>
</div>
<div className="card-body">
<Form>
<div className="input-block">
<label>Name</label>
<input type="text" placeholder="Ex: Luis Otávio"/>
</div>
<div className="input-block">
<label>E-mail</label>
<input type="email" placeholder="Ex: [email protected]"/>
</div>
<div className="input-block">
<label>Password</label>
<input type="password" placeholder="********"/>
</div>
</Form>
</div>
<div className="card-actions flex-end">
<Button className="success btn-circle">Submit</Button>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card>
<div className="card-title">
<h3>Form Inline</h3>
</div>
<div className="card-body">
<Form>
<div className="input-row">
<div className="col-8">
<div className="input-block">
<label>Name</label>
<input type="text" placeholder="Ex: Luis Otávio"/>
</div>
</div>
<div className="col-4">
<div className="input-block">
<label>Age</label>
<input type="number" min="0" placeholder="Ex: 19"/>
</div>
</div>
</div>
<div className="input-row">
<div className="col-6">
<div className="input-block">
<label>E-mail</label>
<input type="email" placeholder="Ex: [email protected]"/>
</div>
</div>
<div className="col-6">
<div className="input-block">
<label>Password</label>
<input type="password" placeholder="********"/>
</div>
</div>
</div>
</Form>
</div>
<div className="card-actions flex-end">
<Button className="success btn-circle">Submit</Button>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card>
<div className="card-title">
<h3>All components Form</h3>
</div>
<div className="card-body">
<Form>
<div className="input-block">
<label>Name</label>
<input type="text" placeholder="Ex: Luis Otávio"/>
</div>
<div className="input-block">
<label>E-mail</label>
<input type="email" placeholder="Ex: [email protected]"/>
</div>
<div className="input-block">
<label>Select you Genre</label>
<select>
<option selected disabled>Select on Option</option>
<option value="">Male</option>
<option value="">Female</option>
<option value="">Other</option>
<option value="">I prefer not say</option>
</select>
</div>
<div className="input-block">
<label>Your Description</label>
<textarea cols="30" rows="6" placeholder="I am a young and bad boy in search of the best tecnologies"></textarea>
</div>
<div className="input-block">
<div className="checkbox">
<input
type="checkbox"
// onChange={() => { setIsHere(!isHere) }}
/>
<span>I not working</span>
</div>
</div>
<div className="input-block">
<label>Password</label>
<input type="password" placeholder="********"/>
</div>
</Form>
</div>
<div className="card-actions flex-end">
<Button className="success btn-circle">Submit</Button>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card>
<div className="card-title">
<h3>File Input</h3>
</div>
<div className="card-body">
<Form>
<div className="input-block">
<label htmlFor="email">Curriculum</label>
<label className="file-input">
<input
type="file"
placeholder="Upload Curriculum"
accept=".pdf, .doc, .docx"
onChange={(e) => setSelectedCV(e.target.files[0])}
/>
<div className="text">
{ selectedCV ? selectedCV.name : 'Select a file' }
</div>
<div className="icon">
<FiFile />
</div>
</label>
</div>
</Form>
</div>
<div className="card-actions flex-end">
<Button className="success btn-circle">Submit</Button>
</div>
</Card>
</div>
</>
);
}
