feat: Initialize ComFi project with Vite
Setup project structure, dependencies, and basic configuration for the ComFi application. Includes initial setup for Vite, React, TypeScript, Tailwind CSS, and essential development tools. Defines core types and provides a basic README for local development.
This commit is contained in:
MMrp89
90
components/ContactsView.tsx
Normal file
90
components/ContactsView.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import React from 'react';
|
||||
import { Phone, Mail, MoreHorizontal, Plus, Grid, List } from 'lucide-react';
|
||||
import { Client } from '../types';
|
||||
|
||||
const contactsData: Client[] = [
|
||||
{ id: '1', name: 'Jordan Nico', role: 'Designer na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'jordan@email.com', avatar: 'https://i.pravatar.cc/150?u=1' },
|
||||
{ id: '2', name: 'Tony Soap', role: 'Desenvolvedor na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'tony@email.com', avatar: 'https://i.pravatar.cc/150?u=2' },
|
||||
{ id: '3', name: 'Karen Hope', role: 'Gerente na', company: 'Uda Studios', phone: '(11) 93456-7890', email: 'karen@email.com', avatar: 'https://i.pravatar.cc/150?u=3' },
|
||||
{ id: '4', name: 'Gabriel', role: 'Designer na', company: 'Angels Studios', phone: '(11) 93456-7890', email: 'gabriel@email.com', avatar: 'https://i.pravatar.cc/150?u=4' },
|
||||
{ id: '5', name: 'Tarmiel', role: 'Designer na', company: 'Heaven Studios', phone: '(11) 93456-7890', email: 'tarmiel@email.com', avatar: 'https://i.pravatar.cc/150?u=5' },
|
||||
{ id: '6', name: 'Sariel', role: 'Designer na', company: 'Sanctuary Studios', phone: '(11) 93456-7890', email: 'sariel@email.com', avatar: 'https://i.pravatar.cc/150?u=6' },
|
||||
{ id: '7', name: 'Cahaya Hikari', role: 'Designer na', company: 'Jekate Studios', phone: '(11) 93456-7890', email: 'cahaya@email.com', avatar: 'https://i.pravatar.cc/150?u=7' },
|
||||
{ id: '8', name: 'Nadila Adja', role: 'Designer na', company: 'FX Studios', phone: '(11) 93456-7890', email: 'nadila@email.com', avatar: 'https://i.pravatar.cc/150?u=8' },
|
||||
{ id: '9', name: 'Angelina Crispy', role: 'Designer na', company: 'Patlapan Studios', phone: '(11) 93456-7890', email: 'angelina@email.com', avatar: 'https://i.pravatar.cc/150?u=9' },
|
||||
];
|
||||
|
||||
export const ContactsView: React.FC = () => {
|
||||
return (
|
||||
<div className="space-y-8 animate-fade-in">
|
||||
{/* Header Controls */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<div className="relative w-full md:w-96">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Pesquisar..."
|
||||
className="w-full pl-12 pr-4 py-3 bg-white border-none rounded-2xl shadow-sm text-slate-600 focus:ring-2 focus:ring-primary-200 outline-none"
|
||||
/>
|
||||
<svg className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button className="w-10 h-10 bg-[#2D3648] text-white rounded-xl flex items-center justify-center hover:bg-slate-700 transition-colors shadow-lg shadow-slate-200">
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
<button className="w-10 h-10 bg-white text-slate-400 rounded-xl flex items-center justify-center hover:text-primary-500 transition-colors shadow-sm">
|
||||
<List size={20} />
|
||||
</button>
|
||||
<button className="w-10 h-10 bg-white text-primary-500 rounded-xl flex items-center justify-center shadow-sm">
|
||||
<Grid size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{contactsData.map((contact) => (
|
||||
<div key={contact.id} className="bg-white p-6 rounded-[2rem] shadow-sm hover:shadow-md transition-shadow border border-slate-50">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div className="flex gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl overflow-hidden bg-slate-100">
|
||||
<img src={contact.avatar} alt={contact.name} className="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-slate-800 text-lg">{contact.name}</h3>
|
||||
<p className="text-slate-400 text-xs mt-1">{contact.role}</p>
|
||||
<p className="font-semibold text-slate-700 text-sm">{contact.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-slate-300 hover:text-slate-600">
|
||||
<MoreHorizontal size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-1 ml-1">Telefone</p>
|
||||
<button className="w-full py-2 px-4 rounded-2xl border border-slate-200 flex items-center gap-3 text-slate-700 font-medium hover:bg-primary-50 hover:border-primary-200 hover:text-primary-600 transition-colors group">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-100/50 flex items-center justify-center text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors">
|
||||
<Phone size={14} />
|
||||
</div>
|
||||
{contact.phone}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs text-slate-400 mb-1 ml-1">E-mail</p>
|
||||
<button className="w-full py-2 px-4 rounded-2xl border border-slate-200 flex items-center gap-3 text-slate-700 font-medium hover:bg-primary-50 hover:border-primary-200 hover:text-primary-600 transition-colors group">
|
||||
<div className="w-8 h-8 rounded-full bg-primary-100/50 flex items-center justify-center text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors">
|
||||
<Mail size={14} />
|
||||
</div>
|
||||
{contact.email}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user