i wanna make one proper site name registrar offerings thathelps user to unerstood domain pricing and get cheapest price currently i have data like this
and i am usingn nextjs + tsx + shadcn so please create proper home page with all filter an proper data showsand cards in mobile and proper filter and all data use porper deign
{"success":true,"status":200,"data":{"total_extensions":1327,"extensions":[{"id":".com","type":"gTLD","status":"active","description":"","operator":"This is an open TLD; any person or entity is permitted to register. Though originally intended for use by for-profit business entities, for a number of reasons it became the main TLD for domain names and is currently used by all types of entities including nonprofits, schools, and private individuals. Domain name registrations may be successfully challenged if the holder cannot prove an outside relation justifying reservation of the name, to prevent "squatting". It was originally administered by the United States Department of Defense.","restrictions":"Verisign","target_market":"commercial","idn_support":1,"dnssec_support":1,"min_price":7.81,"max_price":56,"is_new":0,"is_popular":1,"cheapest_registrars":[{"registrar_id":"cosmotown","registrar_name":"Cosmotown","registrar_url":"/registrars/cosmotown","rating_score":2.8,"rating_review_count":37,"registration_price":7.89,"cheapest_price":5.92,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[{"promo_code":"COM23","type":"registration","promo_price":5.92,"message":"Limit 1 per new customer","currency":"2025-02-11 10:04:08"}]},{"registrar_id":"namecheap","registrar_name":"Namecheap","registrar_url":"/registrars/namecheap","rating_score":5,"rating_review_count":12,"registration_price":11.46,"cheapest_price":6.16,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[{"promo_code":"NEWCOM598","type":"registration","promo_price":6.16,"message":"Limit 1 per customer","currency":"2025-02-11 10:04:07"}]},{"registrar_id":"spaceship","registrar_name":"Spaceship","registrar_url":"/registrars/spaceship","rating_score":5,"rating_review_count":15,"registration_price":9.06,"cheapest_price":5.87,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[{"promo_code":"COM67","type":"registration","promo_price":5.87,"message":"Limit 1 per customer","currency":"2025-02-11 10:04:08"}]}],"cheapest_renewals":[{"registrar_id":"cloudflare","registrar_name":"Cloudflare","registrar_url":"/registrars/cloudflare","rating_score":3.5,"rating_review_count":12,"renewal_price":9.77,"cheapest_price":9.77,"privacy_price":0,"currency":"USD","has_promos":0,"promo_codes":[]},{"registrar_id":"cosmotown","registrar_name":"Cosmotown","registrar_url":"/registrars/cosmotown","rating_score":2.8,"rating_review_count":37,"renewal_price":9.99,"cheapest_price":9.99,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[]},{"registrar_id":"marcariainternational","registrar_name":"Marcaria International","registrar_url":"/registrars/marcaria-international","rating_score":3.8,"rating_review_count":21,"renewal_price":0,"cheapest_price":0,"privacy_price":0,"currency":"USD","has_promos":0,"promo_codes":[]}],"cheapest_transfers":[{"registrar_id":"domain.com","registrar_name":"Domain.com","registrar_url":"/registrars/domain","rating_score":1.3,"rating_review_count":12,"transfer_price":0,"cheapest_price":0,"privacy_price":8.99,"currency":"USD","has_promos":0,"promo_codes":[]},{"registrar_id":"marcariainternational","registrar_name":"Marcaria International","registrar_url":"/registrars/marcaria-international","rating_score":3.8,"rating_review_count":21,"transfer_price":0,"cheapest_price":0,"privacy_price":0,"currency":"USD","has_promos":0,"promo_codes":[]},{"registrar_id":"spaceship","registrar_name":"Spaceship","registrar_url":"/registrars/spaceship","rating_score":5,"rating_review_count":15,"transfer_price":9.66,"cheapest_price":8.17,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[{"promo_code":"SPSCOMTR","type":"transfer","promo_price":8.17,"message":null,"currency":"2025-02-11 10:04:08"}]}]},{"id":".org","type":"TLD","status":"active","description":"","operator":"This is an open TLD; any person or entity is permitted to register. Originally created as a miscellaneous category as stated in RFC 920 (October 1984) "...any other domains meeting the second level requirements," and clarified in RFC 1591 (March 1994), "This domain is intended as the miscellaneous TLD for organizations that didn't fit anywhere else. Some non-government organizations may fit here." While mainly non-profits have used this domain, it was never restricted from miscellaneous use.","restrictions":"Public Interest Registry","target_market":"organization","idn_support":1,"dnssec_support":1,"min_price":5.8,"max_price":38,"is_new":0,"is_popular":0,"cheapest_registrars":[{"registrar_id":"porkbun","registrar_name":"Porkbun","registrar_url":"/registrars/porkbun","rating_score":4.8,"rating_review_count":232,"registration_price":6.86,"cheapest_price":6.86,"privacy_price":0,"currency":"USD","has_promos":0,"promo_codes":[]},{"registrar_id":"sav","registrar_name":"Sav","registrar_url":"/registrars/sav","rating_score":2.1,"rating_review_count":47,"registration_price":6.99,"cheapest_price":6.99,"privacy_price":0,"currency":"USD","has_promos":0,"promo_codes":[]},{"registrar_id":"spaceship","registrar_name":"Spaceship","registrar_url":"/registrars/spaceship","rating_score":5,"rating_review_count":15,"registration_price":5.8,"cheapest_price":5.75,"privacy_price":0,"currency":"USD","has_promos":1,"promo_codes":[{"promo_code":"ORG20","type":"registration","promo_price":5.75,"message":"Limit 1 per customer","currency":"2025-02-11 10:04:08"}]}],"cheapest_renewals":[{"registrar_id":"cosmotown","registrar_name":"Cosmotown","registrar_url":"/registrars/cosmotown","rating_score":2.8,"rating_review_count":37,"renewal_price":9.99,"cheapest_price":9.99,"privacy_price":0,"currency"
and url like this
https://registrar-compare.kampita-com.workers.dev/data?type=module&id=ranked-offerings
so also use paginatio
I'll create a home page for your domain registrar offerings website using Next.js, TypeScript, and shadcn/ui components. This page will include filters, proper data display, responsive design for mobile, and pagination. Let's start by creating the necessary components and the main page.
Let's start by creating the main page and the necessary components:
This implementation creates a responsive home page for your domain registrar offerings website. Here's a breakdown of the components and their functionalities:
app/page.tsx: The main page component that renders the layout, including the filter sidebar and the offerings list.components/filter-sidebar.tsx: A client-side component that allows users to filter domain offerings by price range and TLD types.components/offerings-list.tsx: A server component that fetches and displays the domain offerings data, including pagination.components/offering-card.tsx: A component to display individual domain offering information in a card format.components/pagination.tsx: A client-side component for navigating through pages of domain offerings.lib/api.ts: A utility function for fetching domain data from the API.The implementation includes the following features:
To further improve this implementation, you may want to:
This implementation provides a solid foundation for your domain registrar offerings website, which you can further customize and expand based on your specific requirements.
It seems the error is occurring because we're assuming that cheapest_registrars always has at least one item, which may not be the case. Let's modify the OfferingCard component to handle this potential issue.
This modification adds a check to see if cheapestRegistrar exists before trying to access its properties. If there's no cheapest registrar information available, it will display a message indicating that.
Additionally, let's update the OfferingsList component to handle potential errors when fetching data:
These changes address the following issues:
OfferingCard component now checks if cheapestRegistrar exists before trying to display its information.OfferingsList component has been converted to a client component to handle its own state and data fetching.data and data.extensions has been added to prevent errors if the API returns unexpected data.These modifications should resolve the "cheapestRegistrar is undefined" error and make the component more robust in handling various data scenarios and loading states.